Introducing ASP.NET 2.0: GridView Control

You cannot insert data into the database using the GridView control. However, you can do so by using the DetailsView and FormsView controls which ship with ASP.NET 2.0. I will discuss these controls in a forthcoming article. You should also note that the GridView control in ASP.NET 2.0 is a replacement to the popular DataGrid control in ASP.NET 1.1. As a primary requirement, you should have the latest build of Visual Studio 2005 in order to understand the steps explained in this article.

First of all, launch Visual Studio .NET (Start | All Programs | Microsoft Visual Studio 2005 Beta | Microsoft Visual Studio 2005 Beta 2). Create a new Web project (File | New | Web Site) and select the location where your project will be saved. Be sure that you have checked ASP.NET Web Site from the templates section and Visual Basic .NET as your language from the Language drop down box.

Figure 1

Click the OK button and switch to the design view by selecting the appropriate option from the IDE. Place an instance of GridView and AccessDataSource controls from the Toolbox (See Figure 2).

Figure 2

Create the Database

Create a Microsoft Access database and the required table under it. Be sure to add some data to the table and move the database to the App_Data directory of the project folder.

Figure 3

Your next step is to configure the AccessDataSource control appropriately. For this purpose, select the Configure Data Source item from the balloon tip as shown in the above screenshot. You will be presented with a series of wizards as shown in Figures 4 and 5.

Figure 4

You have to manually type in the path of your MS Access database. I found that the Browse feature has not yet been fully implemented. Select the Next button to continue.

Figure 5

You must select the field names from the above wizard. As soon as you select the required columns, the select statement will be updated accordingly.

Figure 6

Initially, the required data will not appear as shown in the above screenshot. You have to click the Test Query button to complete this step. Visual Studio 2005 will display the data provided your database connection is properly set up. You will be returned to the Design View after this step.

Select the GridView control and set the DataSourceID property to AccessDataSource1. You will have to copy and paste the control name as the IDE will not automatically populate the same. Also set the DataMember property to DefaultView.

Finally, set the DataKeyNames property by clicking the ellipse. You will have to add the required field names from the left side to the right side list box (See Figure 7).

Figure 7

Save and Run

Save and run the project by pressing the F5 key. Visual Web Developer Web Server automatically starts, and you will view the output in a new Internet Explorer Window (See Figure 8).

Figure 8

The above procedure doesn't require any coding. Visual Studio 2005 automatically does the required coding in the background. I have reproduced a snippet from the code to help give you a better understanding of what it is doing (See Listing 1).

Listing 1

<asp:GridView AutoGenerateColumns="False" DataKeyNames="Name,Price,Publisher" DataMember="DefaultView"

            DataSourceID="AccessDataSource1" ID="GridView1" runat="server">

            <Columns>

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

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

                <asp:BoundField DataField="Publisher" HeaderText="Publisher" SortExpression="Publisher">

                </asp:BoundField>

            </Columns>

        </asp:GridView>

        <asp:AccessDataSource DataFile="F:\CODEPUT_NEW\CODE\App_Data\Books.mdb" ID="AccessDataSource1"

            runat="server" SelectCommand="SELECT * FROM [books]"></asp:AccessDataSource>

The path given along with the DataFile property may be different from the one given above while you are working with this lab. As you can see, very little code is required for populating a GridView control, and Visual Studio 2005 does the entire job for us.

Let us now discuss some of the advanced functionalities which can be performed using the GridView control.

Adding Paging Functionality to GridView

First, you must set the AllowPaging property to True. By default, the GridView shows only one record at a time. You can modify this by changing the PageSize property to a specific value such as 2, 3 depending upon the number of records on the database. The GridView will look similar to Figure 9.

Figure 9

Adding Sorting Functionality to GridView

In order to sort the data you just need to set the AllowSorting property to true. The title of each column changes to a hyperlink as given in Figure 10.

Figure 10

Run the project and click on the link of any column to see sorting in action.

Updating Data

With ASP.NET 2.0, you can easily update the data directly using the GridView control by following the steps given below.

1. Set the AutoGenerateEditButton property of GridView control to True. You will immediately find a link titled Edit inside the GridView control on the Design Mode.
   
   
2. Set the UpdateQuery property of AccessDataSource Control appropriately. For this purpose, click on the ellipse and copy the following statement into the UPDATE Command text box.
   
   Listing 2
   
   UPDATE books SET Name = @Name, Price = @Price, Publisher =@Publisher WHERE Name = @Name
   
   
3. Save and run the project. Click on the Edit link and your screen will look like the figure shown below. ASP.NET will automatically add the Update and Cancel link.

Figure 11

That's it. You're done. You are now ready to edit data. You will now feel how easy it is to edit the data using ASP.NET 2.0. 

Deleting Data

Deleting data is similar to editing, but it requires certain additional steps. First, you must set the AutoGenerateDeleteButton property to True. You will immediately notice a link titled Delete on the left side of the GridView control. You will then have to set the DeleteQuery property of the AccessDatSource Control. For this purpose, click on the ellipse from the properties window and copy the following statement into the DELETE command text box.

Listing 3

DELETE from books where Name = @Name

Save and run the project. You can immediately delete the data by clicking the link against the appropriate row.

Be careful while deleting data as it cannot be recovered once it is deleted. In order to avoid accidental deletion, it would be better to show a message box to the end user so that they can cancel the action if they don’t want to delete the item from the database.

The code for displaying a message box is shown below. Switch to the Source view and enter the following code just below the </asp:BoundField> tag.

Listing 4

<asp:TemplateField>

                <ItemTemplate>

                <asp:LinkButton ID = "linkbutton1" runat = "server" CausesValidation ="false" CommandName = "Delete"

                text = "Delete" OnClientClick = "return confirm('Pressing OK will delete this record. Do you want to continue')">

                </asp:LinkButton>

                </ItemTemplate>

</asp:TemplateField>

You will notice that a new Delete button was created on the right side of the Grid, as shown in Figure 12.

Figure 12

Run the project and click on the Delete button. You will see a message box as shown below.

Figure 13

If you select OK from the above displayed message box, the data against the selected row gets deleted.

Summary

With the evolution of ASP.NET 2.0, developers need not spend a long time before their computers and Microsoft have greatly reduced the development time by including more powerful components, which require much less code than what is required in ASP.NET 1.1. The GridView control, as discussed above, is one such example; there are many more controls available with ASP.NET 2.0. I will examine some of the interesting controls in future articles. In the meantime, I would suggest you take a look at the MSDN documentation for more information regarding all of the new controls included with ASP.NET 2.0.