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.

In previous columns ("Integrating Entity Framework with an ASP.NET Web Site," "Extending 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 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.

About the Author

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/.

comments powered by Disqus

Featured

  • AI for GitHub Collaboration? Maybe Not So Much

    No doubt GitHub Copilot has been a boon for developers, but AI might not be the best tool for collaboration, according to developers weighing in on a recent social media post from the GitHub team.

  • Visual Studio 2022 Getting VS Code 'Command Palette' Equivalent

    As any Visual Studio Code user knows, the editor's command palette is a powerful tool for getting things done quickly, without having to navigate through menus and dialogs. Now, we learn how an equivalent is coming for Microsoft's flagship Visual Studio IDE, invoked by the same familiar Ctrl+Shift+P keyboard shortcut.

  • .NET 9 Preview 3: 'I've Been Waiting 9 Years for This API!'

    Microsoft's third preview of .NET 9 sees a lot of minor tweaks and fixes with no earth-shaking new functionality, but little things can be important to individual developers.

  • Data Anomaly Detection Using a Neural Autoencoder with C#

    Dr. James McCaffrey of Microsoft Research tackles the process of examining a set of source data to find data items that are different in some way from the majority of the source items.

  • What's New for Python, Java in Visual Studio Code

    Microsoft announced March 2024 updates to its Python and Java extensions for Visual Studio Code, the open source-based, cross-platform code editor that has repeatedly been named the No. 1 tool in major development surveys.

Subscribe on YouTube