Using the GridView,DetailsView with Asp.net 3.5 and LinqToSql

In this post I will demonstrate how to use the Asp.net GridView and DetailsView control with LinqToSql. Let's begin by creating an Asp.net web project in Visual Studio 2010. Now that our project template is created, add a new webform to the project, call it DetailsPage or name it whatever you want.

Open up the Default.aspx page and drag a GridView control onto the design view. The Default.aspx page is where we will search the database for data. Once we get data back, the user will be able to select a record from the GridView which will redirect them to the DetailsPage.aspx where they can edit the record and submit their changes.


(Note: For to this post we'll be using the AdventureWorks database for querying data.)

Now add a LinqToSql file to your project. Right-click on your web application, go to Add - NewItem - Data -  Linq to Sql Classes. Click once on the file, give it a name, (note: I kept the default) and hit enter.

Open the Server Explore panel and click on the connect to database icon. Make the connection to your database and click on.

Once the connection is setup, expand the tables node in Server Explorer and drag the Contact table onto the LinqToSql design view. Click save.

Now let's go back to the default.aspx page. Right-Click anywhere on the page and select View Code. In the Default.aspx code-behind page create a page_load event. Copy the following code below and paste inside your code-behind page. 

DataClasses1DataContext context = new DataClasses1DataContext();

        public _Default()

        {

            this.Load += new EventHandler(_Default_Load);

        }

        void _Default_Load(object sender, EventArgs e)

        {

            var results = from contact in context.Contacts

                          where contact.ContactID < 20

                          select contact;

            GridView1.DataSource = results;

            GridView1.DataBind();

        }

If you use a different name for your default.aspx page, just copy this line

this.Load += new EventHandler(_Default_Load);

and paste into your constructor.

Double click the on the button we created earlier to create a click event. Inside this event copy and paste the following code:

            GridViewRow row = GridView1.SelectedRow;

            Response.Redirect("DetailsPage.aspx?SelectedItem=" + row.Cells[1].Text);

This code perform three important action that we are concern with:

1. Get the row that was selected.
2. Store the record ID into a QueryString called SelectedItem.
3. Navigate to the DetailsPage with the selected Record ID. 

Now open up DetailsPage.aspx if it's not already open.

Drag a Hyperlink button onto the design view and make the following changes:

1. Change the text to say Return to Search
2. Locate the NavigateUrl property and set the url to point to Default.aspx

Drag a SqlDataSource located in the toolbox under the Data node onto the design view.

Next, copy and paste the following code in the DetailsPage.aspx source view. If you are using a master page file then paste in between the <asp:content></asp:content> tags or if no master page file paste in between the the form tags <form></form>

<h2>

        <asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px" DataSourceID="SqlDataSource1" 

            AutoGenerateRows="False" DataKeyNames="ContactID">

            <Fields>

                <asp:BoundField DataField="ContactID" HeaderText="ContactID" ReadOnly="True" SortExpression="ContactID" />

                <asp:CheckBoxField DataField="NameStyle" HeaderText="NameStyle" SortExpression="NameStyle" />

                <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />

                <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />

                <asp:BoundField DataField="MiddleName" HeaderText="MiddleName" SortExpression="MiddleName" />

                <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />

                <asp:BoundField DataField="Suffix" HeaderText="Suffix" SortExpression="Suffix" />

                <asp:BoundField DataField="EmailAddress" HeaderText="EmailAddress" SortExpression="EmailAddress" />

                <asp:BoundField DataField="EmailPromotion" HeaderText="EmailPromotion" SortExpression="EmailPromotion" />

                <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />

                <asp:BoundField DataField="PasswordHash" HeaderText="PasswordHash" SortExpression="PasswordHash" />

                <asp:BoundField DataField="PasswordSalt" HeaderText="PasswordSalt" SortExpression="PasswordSalt" />

                <asp:BoundField DataField="rowguid" HeaderText="rowguid" SortExpression="rowguid" />

                <asp:BoundField DataField="ModifiedDate" HeaderText="ModifiedDate" SortExpression="ModifiedDate" />

                <asp:CommandField ShowEditButton="true" />

            </Fields>

        </asp:DetailsView>

    </h2>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>" 

        SelectCommand="SELECT * FROM Person.Contact WHERE ([ContactID] = @ContactID)" 

        UpdateCommand="UPDATE Person.Contact SET NameStyle = @NameStyle, ModifiedDate = @ModifiedDate, PasswordSalt = @PasswordSalt, PasswordHash = @PasswordHash, Phone = @Phone, EmailPromotion = @EmailPromotion, EmailAddress = @EmailAddress, Suffix = @Suffix, LastName = @LastName, MiddleName = @MiddleName, FirstName = @FirstName, Title = @TitleWhere ContactID = @qryContactID">

        <SelectParameters>

            <asp:QueryStringParameter Name="ContactID" QueryStringField="SelectedItem" Type="Int32" />

        </SelectParameters>

    <UpdateParameters>

        <asp:Parameter Name="NameStyle" Type="Boolean" />

        <asp:Parameter Name="Title" Type="String" />

        <asp:Parameter Name="FirstName" Type="String" />

        <asp:Parameter Name="MiddleName" Type="String" />

        <asp:Parameter Name="LastName" Type="String" />

        <asp:Parameter Name="Suffix" Type="String" />

        <asp:Parameter Name="EmailAddress" Type="String" />

        <asp:Parameter Name="EmailPromotion" Type="String" />

        <asp:Parameter Name="Phone" Type="String" />

        <asp:Parameter Name="PasswordHash" Type="String" />

        <asp:Parameter Name="PasswordSalt" Type="String" />

        <%--<asp:Parameter Name="rowguid" Type="String" />--%>

        <asp:Parameter Name="ModifiedDate" Type="String" />

        <asp:QueryStringParameter Name="qryContactID" QueryStringField="SelectedItem" Type="Int32" />

     </UpdateParameters>

 </asp:SqlDataSource>

Press F5 to build and run the project.

Enjoy!