Simple Master-Details with GridView and LinqDataSource

Posted By: syuhada on Jan 10, 2008

Over the last few weeks I've been trying to put my hands on LINQ but my other activities keep me away from learning this new feature in .NET. On this blog I want to show a simple master-detail using two gridviews and LinqDataSource control replacing the commonly-used SqlDataSource.

The <asp:LinqDataSource> control is an ASP.NET control that implements the DataSourceControl pattern introduced with ASP.NET 2.0. It is similar to the ObjectDataSource and SqlDataSource controls in that it can be used to declaratively bind other ASP.NET controls on a page to a datasource. Where it differs is that instead of binding directly to a database (like the SqlDataSource) or to a generic class (like the ObjectDataSource), the <asp:LinqDataSource> is designed to bind against a LINQ enabled data model.

One of the benefits of using the <asp:LinqDataSource> control is that it leverages the flexibility that LINQ based ORMs provide. You don't need to define custom query/insert/update/delete methods for the datasource to call - instead you can point the <asp:LinqDataSource> control at your data model, identify what entity table you want it to work against, and then bind any ASP.NET UI control against the <asp:LinqDataSource> and have them work with it.

Back to our goal (creating Master-Details list), first we have to define the data model that represent the database. To create the data model, click Add New Item option from VS2008 (I use VWD 2008 on this tutorial) and choose Linq to SQL File.

Selecting the "LINQ to SQL" item will launch the LINQ to SQL designer, and allow you to model classes that represent a relational database. It will also create a strongly-typed "DataContext" class that will have properties that represent each Table we modeled within the database. Below is the screenshot of an empty LINQ to SQL ORM designer surface.

The next step is creating the entity class from database. On my database explorer I have define a connection to CrashTest database on SQLEXPRESS on my machine. Using drag and drop function I put two tables Books and Comments to my designer surface.

Now that our data model is created, we can focus to our gridviews. Create a webform and put 2 gridviews to it. To bind our gridviews to the data model we created earlier, we can switch into design-view, select the GridView, and then select the "New Data Source..." option within the "Choose Data Source:" drop-down.

This will bring up a dialog box that lists the available datasource options to create. Select the new "LINQ" option in the dialog box and name the resulting <asp:linqdatasource> control we want to create.

The <asp:linqdatasource> designer will then display the available LINQ to SQL DataContext classes that our application can use.

Pick the CrashTestDataContext that we just created.
And then for the first GriedView (GridView1), choose Table Books and Select BookID, Books, and CommentsCount fields on the the Configure Data Selection part.

Choose Table Comments and Select CommentID, BookID, and Comments fields for the second GridView (GridView2).

In order to connect between the GridView1 and GridView2, one important key is set the DataKeyNames for GridView1 to BookID and GridView2 to CommentID. Second, add the where and whereparameter property to the <asp:LinqDataSource> to become like below: