Developing an application with ASP.NET 2.0 – Part 2
Continuing the ASP.NET mini course begun in the previous edition, we present in this article the pages to managed products and categories. You will see the creation of two complete pages, without the necessity of a single code line!
We will begin the creation of the application’s folders for the development. Three folders will be created: “Manage”, “Budget” and “Search”, which will receive the security policies for access. To begin creating the folders, right-click over the project and point to New Folder. A new folder is created, name it “Manage”; repeat the same operation for the folders mentioned previously.
Once the folders are already created, we will begin the construction of the categories’ page. Right-click over the “Manage” folder and select the Add New Item option, point to the Web Form template and type “Category.aspx” in the Name field.
In Language select Visual C#. Keep the Place code in a separate file option enabled, check Select master page and confirm with the Add button. In the editor, select Minicourse.master (Figure 1) and confirm with the OK button.
Figure 1. Selecting the Master Page for the new WebForm
After the creation of the Category.aspx, we will design the page with the fields already defined in the database. For this, we will use the new data access controls available in the ASP.NET 2.0 to facilitate the development. One of these controls is the DetailsView; drag it from the ToolBox (Figure 2).
Figure 2. DetailsView Control in Visual Studio 2005’s ToolBox
The DetailsView is used to create forms with the basic operations: insertion, update and deletion of records. The layout of the default form created by the control can be modified, maintaining the same operations’ functionality with the database. After dragging the control, it is possible to define a standard formatting through the Format option of the Smart Tag.
We will access the database through the Choose Data Source option, present in the Smart Tag. Select New data source and a new setup window is opened (Figure 3).
Figure 3. Selecting the DataSource
Then choose Database, type “SqlCategory” in Specify an ID for the data source and click OK. Since this connection with the database will be the first in the project, Visual Studio maps the database located in the App_Data folder. Select MyDatabase.mdf (SQL Express file) in the Choose Your Data Connection screen and click on Next.
We can then store this connection’s configurations in the web.config (configuration file), in this window. Change the name of the connection string to: “DBConnection” and click Next. The last window is opened, where we select the object from the database that we are going to use, in this case select the Category table (Figure 4).
Figure 4. Selecting the Category table from the database
Click the Advanced button (Figure 5) and enable the Generate INSERT, UPDATE and DELETE statements option. Thus the control itself (in this example the DetailsView) uses the SQL commands, automatically. Click on OK, Next and Finish.
Figure 5. Creation of the SQL commands for insertion, update and deletion
With the DataSource defined, we can use the DetailsView features. Select the Smart Tag from the DetailsView already inserted and select EnableInserting (Figure 6).
Figure 6. Configuring the DetailsView control for insertion
For our example, we will use the DetailsView only to insert new categories, but we could also use the Update and Delete (Enable Editing and Enable Deleting options respectively).
Select the control and modify the Default Mode property to Insert. With this, the control is already displayed in the data insertion visualization and is ready to be used. Below the form we will add a GridView.
In the ToolBox select the GridView, located in the Data category. Since we have already created a SqlDataSource for the Category table, we can share the use of the SqlDataSource with the GridView. In the Smart Tag of the GridView, in Choose Data Source (Figure 7), select SqlCategory.
Figure 7. Configuring the GridView control to use the same SQLDataSource
In the Smart Tag itself, enable the following options: Enable Paging, Enable Sorting, Enable Editing and Enable Deleting; thus being, the control is ready to edit, to delete, to organize values and number pages. To run a test, in the Solution Explorer, right-click over the page and select View in Browser. Type and save some categories at your choice.
The products’ page follows the same layout characteristic as that of the categories’ page, with only DetailsView and GridView. Add to the project a new page called “Product.aspx” linking to the Master Page (similar to the technique used in the previous Web Form).
Add the DetailsView to the form and let us configure the products’ DataSource. In the control’s Smart Tag, choose the Choose Data Source option and select New Data Source. Once again the DataSource configuration window is opened; select DataBase, type “SqlProduct” for the ID and click OK.
In the database connection choice, we can choose the connection string, by selecting the last key entered in the web.config file. Select DBConnection and click on Next. Choose the Product table (Figure 8) and click on Advanced.
Figure 8. Selecting the data of the Product table
In the Advanced window, check the option to generate the SQL instructions of insertion, update and deletion. Click on OK, Next and Finish. In the Smart Tag, select Enabled Inserting. Change the DefaultMode property to Insert.
In this case we have a new necessity, a TextBox is created for the CategoryID field, however the necessity is for a DropDownList linked to the Category table, for the user will not have to type the category code, but, choose it. For that, in the Smart Tag, select the Edit Fields option. In Selected Fields select the CategoryID column and click on the Convert this field into a TemplateField option (Figure 9).
Figure 9. Configuring the DetailsView columns
With this we have a column with the editable templates, and for this scenario, we will edit the column in the insert template, called InsertItemTemplate. Click on OK to close the editor. Right-click over the DetailsView, choose the EditTemplate>Field-CategoryID option. The editor will be opened for addition of controls in templates fields (Figure 10).
Figure 10. Configuring the DetailsView templates columns
At this moment we have the DetailsView displayed with all sorts of templates. We will modify only the InsertItemTemplate, which is the exhibition at the time when the control is in insertion state.
Delete the TextBox that is in InsertItemTemplate and in its place, add a DropDownList. The first task is to fill in the control with all the existing categories, for that, select the Smart Tag and in Choose Data Source choose New DataSource. Select DataBase and click on OK. Select, once again, the connection string and the fields in the Category table and click on Finish (in this case, we do not have to add the SQL instructions of insertion, update and deletion). You will again be returned to the DropDownList editor.
In the fields’ configuration, we have the Select a data field to display in the DropDownList option, where we configure the column responsible for the data that will be visible to the user (in this case Description) and the Select a data field for the value of the DropDownList, where we configure the key column, which will be CategoryID (Figure 11).
Figure 11. Selecting the display fields and the key column in the DropDownList
With the DropDownList filled in, we must link the control to the products’ DataSource, via DataBinding. Select again the Smart Tag and choose Edit DataBinding. Configure the Selected Value event with the CategoryID field (Figure 12).
Figure 12. Linking the DataSources
Right-click over DetailsView and choose End Template Editing. At this moment we finalize the form for data insertion. Following the categories’ page, we must add the GridView to display the table’s values, adding it below the DetailsView. Since we have already created a SqlDataSource for the products’ table, we can share the SqlDataSource.
In the Smart Tag of the GridView, in Choose Data Source, select the created SqlDataSource (SqlProduct). Select the paging and sorting options as we have done in the categories’ page. In the Solution Explorer, right-click over the products’ form and choose View in Browser (Figure 13).
Figure 13. Finalization of the pages
The new ASP.NET 2.0 controls facilitate the development of Web applications along with Visual Studio 2005 or Visual Web Developer Express. Do not miss in the next edition the finalization of the application with many other ASP.NET 2.0 features. Stay tuned!