Practical ASP.NET

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.

• By Peter Vogel
• 11/13/2008

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 the application.

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.

The bad news: At this point, I started getting regular JavaScript errors when 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, mysteriously, my JavaScript error on selecting rows had gone away).

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 the page.

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.