Creating Master/Detail and Update Pages with Entity Framework
After using EF to drive a series of drop-down lists, Peter moves on to the next step: using EF to build a Master/Detail page.
In previous columns ("Integrating
Entity Framework with an ASP.NET Web Site
an Entity Framework Model -- and Some Limitations
" and "Using
the Entity Model to Create an ASP.NET Page
"), I've built a simple Entity
Framework model and used it to drive a series of drop-down lists both with and
without the AJAX-enabled UpdatePanel. With this column, I'm moving on to the
next obvious step: Creating a Master/Detail page with updating.
In previous columns, I created an Entity diagram by starting with a blank diagram
and handcrafting my entities. This time, I added an ADO.NET Entity Data Model
named Northwind.edmx and, once my .EDMX file was added (and opened), I right-clicked
on its design surface and selected "Update Model from Database." In
the Update Wizard dialog that appeared, I selected the Northwind database and
added the Categories and Products tables. With my Entity diagram completed,
I built the Web site to make the model available to the other components in
Creating the Page
To begin the page, I dragged a ScriptManager and an AJAX UpdatePanel onto the
page. With the page's infrastructure in place, I then dragged on an EntityDataSource
and selected Configure Data Source. In the resulting wizard, I selected my Entity
model (now called NorthwindContainer) and clicked the Next button. On the second
page, I selected Categories from the EntitySetName drop-down list (if your tables
don't appear, it just means that you forgot to rebuild the Web site after adding
the tables to your Entity model). Once I selected a table, I checked off the
options to turn on updates and picked the fields I wanted.
With the EntityDataSource in place, I dragged a GridView onto the UpdatePanel,
connected it to the EntityDataSource and turned on editing/deleting/paging/selecting.
A quick press of the F5 key showed that I was displaying all the Categories
table data with all the features of the GridView without any page postbacks.
I clicked on the Select button on the GridView. Since my page wasn't done yet,
I shrugged that off and plunged on.
I dragged a second EntityDataSource onto the page and tied it to the Products
table in my Entity model. I added a second GridView and tied it to the new EntityDataSource
to display my Products data. At this point I noticed a second anomaly: While
my Categories GridView still show its columns as DataBoundColumn0, DataBoundColumn1,
etc., my Products GridView showed the field names for the Products table (e.g.,
ProductId, Description). Interestingly, the foreign key in the Products table
that linked back to the Categories table appeared as Categories.CategoryID.
On the other hand, I don't really care what the column headers look like in
design view as long as everything's OK at run time. So I continued on.
As I did in my earlier
column with the drop-down lists, I added a Where clause to the Products
DataSource that tied the Categories.CategoryID field to the SelectedValue property
of the Categories GridView. I also set the DataKeyNames property of the Categories
GridView to the CategoryID field so that field's value would be returned through
the GridView's SelectedValue property.
Another press of the F5 key and I had a working Master/Detail page. I could
update Categories data and Products data. When I selected a row in the Categories
table, only the corresponding rows in the Products table were displayed (and,
So what's missing? Well, so far, I have yet to drag a DynamicDataManager onto
the page. Which raises the question: Do I need Dynamic Data? I've got everything
I wanted from the EntityDataSource with my data access layer objects now being
automatically generated for me (and I haven't even begun to investigate my ability
to customize those objects). But I have yet to drag a DynamicDataManager onto
I'm going to return to Dynamic Data in future columns. However, now that I've
got a working page, I'm going to spend the next few columns looking at the other
new feature in SP1 for .NET 3.5 -- routing.
Peter Vogel is a system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter tweets about his VSM columns with the hashtag #vogelarticles. His blog posts on user experience design can be found at http://blog.learningtree.com/tag/ui/.