Building data aware Web apps Visual Studio 2005

By: Anand Narayanaswamy, Microsoft MVP




Nowadays, databases form part and parcel of each and every web application. With classic ASP, you have to write long lines of code to perform each task associated with the manipulation of database. ASP.NET 1.1 automated this task by providing an easy approach. But with the advent of ASP.NET 2.0, the whole process has become much more simplified. In this article, we will examine how to work with different kind of Data controls. This article assumes that you have access to Visual Studio 2005. An interesting point to note with regard to Visual Studio 2005 is that you can perform all the required tasks without any need to write a single line of code.

The .NET Framework 2.0 ships with a set of controls such as GridView, DataList, DetailsView and FormView with which you can manipulate databases in a simplified manner. The framework also comes with set of controls like SqlDataSource, AccessDataSource, ObjectDataSource, XmlDataSource and SiteMapDataSource, which enables you to manipulate databases using the above mentioned controls. Each of the above controls can be used for specific database. For instance, while SqlDataSource can be used to manipulate Microsoft SQL Server 2000/2005 Databases, AccessDataSource control can be used to access Microsoft Access Databases. Let us now examine the usage of each one of the above controls in detail.

GridView

This control is a new addition to .NET Framework 2.0. It is nothing but an enhanced version of DataGrid control which you worked with ASP.NET 1.1. You can edit, update, sort data using GridView. You can also perform search operations. You should note that you cannot add new data using this control. You can make use of FormView control for adding data. I will discuss about FormView in the later part of this article.

In order to begin with, let us add a GridView control to the Design area of the Integrated Development Environment (IDE). You can either double click or drag and drop the control (See Figure 1)

The next step is to make the SmartTag visible by clicking on the upper right hand side arrow (See Figure 2)

Figure 2 — GridView's Smart Tag

The next process is to setup the appropriate data source for binding with the GridView and for this purpose, select the option New data source to connect to a MS Access database (See Figure 3)

Figure 3 — Selecting a Data Control for a Database

Leave the options as it is and click on the OK button. The next step is to select the database file name. You can either type in the path or use the browse button to locate the file. You will then need to configure the select statement by selecting the appropriate column names (See Figure 4). For this example, I have selected all columns. If you fail to select a particular column name here then the data from that column will not be displayed in the GridView.

After finishing the above steps, your screen will look like as shown in Figure 5

Figure 5 — GridView after Configuration

You can enable paging and sorting by selecting the appropriate options from the smart tag. Paging enables you to separate your data into various pages of GridView. This will be useful if you have lot of data. This was achieved in ASP.NET 1.1 through complex code but now with ASP.NET 2.0 this is made possible without writing a single line of code. In the similar way, you can enable sorting. Once you enabled it, you can sort any column by selecting the top link from the GridView control (See Figure 6)

By default, the page size is set to 10. This means that the 11'th record will be displayed in Page 2. We can modify this to 2 by using the PageSize property so that our 3'rd record will be displayed in Page 2 as shown in Figure 7

Figure 7 — Paging Records

Figure 8 — Decorate GridView

That's all there is to it. You can now run the application to view the final output. If you switch to the Source view you can be able to see the code for the above mentioned steps. You should note that Visual Studio 2005 automatically does the coding on the backend.

Listing 1

Searching Records

You can easily implement search functionality into your ASP.NET pages by configuring the WHERE option while setting up the data source (See Figure 4). Firstly, add a Textbox control above the GridView control and supply the required properties. Now click on the AccessDataSource control and select Configure Data Source from the smart tag. Press Next button and click on WHERE button. The Add WHERE clause dialog box is displayed on the screen. Select the Column name with which you want to perform search for the data. As you go on selecting each option the other options are automatically enabled. Select the option Control from the Source DropDownList and set its parameters. Set ControlID property to TextBox1 and click on the Add button to complete the process (See Figure 9). Finally, click on the Finish button to exit from the dialog. Run the application and enter an ID into the Textbox control. GridView will automatically display the specific record which matches the ID. You should note that search functionality will work only if you had set primary key for a column during the creation of database.

In the previous section, you have seen the working of GridView control with the help of an MS Access database. In this section, we will show you how to work with DataList, DetailsView and FormView controls using Microsoft SQL Server 2005 database.

Firstly, let us create a SQL Server 2005 database. Login to the SQL Server Management Studio and right click the section titled Databases from the Object Explorer on the left side pane and select the item New Database. Enter a meaningful name for the database and click on the OK button (See Figure 10)

The management studio will create the database and it will be visible on the Databases tree. The next process is to create a table inside the database. Navigate to the database, expand the tree and expand the tree titled Tables. Right click on it and select New Table as shown in the Figure 11

Figure 11 — Creating new Table

You will now view an option to give the required field names. Enter the required names as shown in the Figure 12. We have given only two names for the sake of simplicity. The Allow Nulls column is optional and if you uncheck it then you have to give some value to the specified field while entering data. We are also going to set Primary Key for the Field ID. This means that you have to give different values for the field ID as it will not accept same data. Right click the Column titled ID and select the menu item titled Set Primary Key. The column is now enabled with Primary Key. Save the table by giving a meaningful and easily recognizable name. For this example, we have given a name - dotnet

Figure 12 — Adding Columns

We are now going to show you how to add data to the created table. Right click the section titled dbo.dotnet under the tree Tables of the above database and select the menu item Open Table. Enter the required values and close the Management Studio.

You have now successfully created a database and a table under it. Let us now examine how to work with the ASP.NET 2.0 data controls such as DataList, DetailsView and FormView by using the above database.

Working with DataList

DataList is one of the simplest controls used for manipulating a database. As usual your initial task is to configure the SQL Data Source. The entire process is same as explained previously. The only difference is that you need to pick up the appropriate provider for SQL Server 2005 database

Create a new Visual Studio 2005 project and rename the Default.aspx to DataList.aspx. Drag and drop a DataList control onto the WebForm and configure the data source appropriately from the DataList Tasks smart tag. By default, the smart tag is enabled for the provider for SQL Server 2005 Express edition. You have to change it to Microsoft SQL Server if you use full blown version of SQL Server 2005. The final output will look like as shown in Figure 13

Figure 13 — DataList in Action

As you can see from the above screenshot, DataList displays all records in a list fashion. You can format the control as you wish using the Property Builder option from the Smart tag. You can also edit the template using Edit Template option. We would suggest you to play with the control as you like so that you will be fully aware about what each option does.

Working with DetailsView control

The DetailsView control has more options than the DataList control. You can display records by separating them in pages using the Paging functionality. You can not only insert records to the database but also can edit and update data using this control. You need to enable the option Generate INSERT, UPDATE and DELETE statements while configuring data source to manipulate the database (Select Advanced button from Figure 4 to set this option). As soon as you enable the above mentioned option, the appropriate entries will be listed on the control's smart tag. You will have to check mark each one of them as required. The final output will look like as shown in the Figure 14

Figure 14 — DetailsView at run time

Working with FormView control

FormView is similar to DetailsView but the only difference is that you have more options available over how to display data and also about the look and feel of the control. It comes with 7 built-in templates such as ItemTemplate, FooterTemplate, EditItemTemplate, InsertItemTemplate, HeaderTemplate, EmptyDataTemplate and PagerTemplate. A complete discussion regarding the above templates is out of scope for this article. If you select each one of them the appropriate interface will display and you can modify it as you wish. For instance, if you select InsertItemTemplate, FormView will display the appropriate controls and links as shown in Figure 15.

Figure 15 — FormView's Template in Action

You can now change the default text (Insert to Enter Data) using the properties window and also format the text as you require. Finally, you should click the link End Template Editing to return to the Design view. You can also format FormView using AutoFormat option (See Figure 8) from the smart tag as explained while discussing GridView control.

Conclusion

In this article, you have seen how to work with the various Data controls shipped with ASP.NET 2.0 with the help of step-by-step instructions and supported screenshots. You should notice that we have not used a single line of code to demonstrate each one of the controls. Visual Studio 2005 automatically does the complete coding for us and you need not have to bother about them while working with ASP.NET. This is the power of ASP.NET 2.0 and that is why the
framework is becoming popular by the day. We would suggest you to explore all the controls one by one so that you will learn about the potential of ASP.NET 2.0.

About the Author

Anand Narayanaswamy, a Microsoft Most Valuable Professional (MVP), works as an independent consultant and runs NetAns Technologies (www.netans.com) which provides web hosting services based in Trivandrum, India. Anand also works as a technical editor lead for ASPAlliance.com. Find out more about him at www.visualanand.net or e-mail him at anandnswamy@gmail.com