Creating the ASP.NET application
In this section you will learn how to create an ASP.NET Web application that connects to a DB2 database, allowing users to view different store locations, and allowing administrators to manage these locations. First, you will open a new ASP.NET Web Site project in Microsoft Visual Studio. Next, you will add a reference to the IBM DB2 Data Adapter, so you can work with DB2 databases in your code. Finally, you will create a Master Page, which will frame each and every page that you create with a header and navigation.
Let's get started. Open Microsoft Visual Studio 200. To create a new Web Site, select File>New Web Site from the application menu. This will open the New Web Site dialog box , which looks like the screen capture in Figure 4.
Figure 4. New Web Site dialog
Keep the default option selected (ASP.NET Web Site) and make sure that File System is selected in the Location drop-down list and that Visual C# is selected from the list of languages. Finally, change the WebSite1 at the end of the location text box to Stores. Press OK to open the project.
To communicate with DB2 in C#, you will need to add a reference to the DB2 Data Adapter to your ASP.NET project. There are two ways of doing this:
- Manually add the reference to the <assemblies> section of your project's web.config file.
- Navigate to Website>Add Reference from the Visual Studio application menu. This will open the Add Reference dialog box, as in Figure 5.
Figure 5. Add Reference dialog
Scroll down to find the component IBM.Data.DB2 and click it to select it. Now press OK to add the reference to your project. Before you move on to create the application's Master Page, take a moment to verify that the DB2 Data Adapter was added to your project. From Solution Explorer (see Figure 6), double-click on the web.config file to open it.
Figure 6. Solution Explorer
This XML file contains a host of important properties for your ASP.NET project. Find the <compilation> element, which should have a child node <assemblies>. One of the <add> child nodes beneath this element should read like the following:
<add assembly="IBM.Data.DB2, Version=188.8.131.52, Culture=neutral, PublicKeyToken=7C307B91AA13D208" />.
If this line is in your web.config file, the DB2 Data Adapter reference assembly has been added to your ASP.NET project. In the next section, you will create the Master Page for the project, which will house the header and navigation for the Store Locator application.
A Master Page is a feature of ASP.NET applications that allows you to define a layout for use by one or more of the pages in your application. A Master Page will often contain a header, navigation, and footer, which will stay the same in each content page that inherits the Master Page. Using Master Pages allows you to avoid repetitive code for laying out your Web application, while facilitating the definition of a standard look and feel that will be used by your pages.
In Visual Studio, right click on your Project in Solution Explorer, and choose Add New Item from the context menu. This will open the Add New Item dialog box, as in Figure 7.
Figure 7. Add New Item dialog
From this dialog, select Master Page from the Templates box, ensure that the Language selected is Visual C#, and that Place code in a separate file is checked. You can leave the default name (MasterPage.master) as is. When you are ready, press Add to create the Master Page. The MasterPage.master will open in the code editor window.
Your first change is to the title of the page, found between the opening and closing
<title> tags, to
Store Locator. Next, you need to add some attributes to the <body> tag, which will remove the page margin and facilitate the loading of Bing Maps later in this tutorial. Change the text of the <body> tag so that it looks as follows:
<body id="pageBody" runat="server" style="margin: 0px; padding: 0px">.
Next, find the opening <div> tag (on the line beneath the <form> tag) and add a style attribute:
<div style="margin: 0px; padding: 0px; font-family: Arial">.
Beneath this line (and above the <asp:ContentPlaceHolder> tag), add the following <div> tag to create the main heading for the application (see Listing 6).
Listing 6. Store Locator heading
<div style="background-color: #999966; font-weight: bold; font-size: xx-large; padding: 5px, 15px; border-bottom: 2px solid #000"> <a href="ListStores.aspx" style="color: #fff; text-decoration: none;"> Store Locator </a> </div>
Next, create the navigation bar. Directly beneath the code you added from Listing 6 above, add the code in Listing 7 to create a bar with two sections, one which you will use to create a Search by State feature in just a moment, and the other which will house the links to the administration pages.
Listing 7. Navigation Bar
<div style="background-color: #333300; color: #fff; padding: 5px 15px; border-bottom: 1px solid #000"> <div style="width: 47%; float: left"> Search by State: </div> <div style="width: 50%; float: left; padding-top: 5px; text-align: right;"> <a href="AddNewStore.aspx" style="color: #fff"> Add New Store </a> | <a href="ManageStores.aspx" style="color: #fff"> Manage Stores </a> </div> <div style="clear: both; font-size: 1px;"> </div> </div>
Next, switch to Design view. Your Master Page should look something like the one in Figure 8 at this point.
Figure 8. Unfinished Master Page
From the Visual Studio Toolbox, drag a DropDownList control to your form and drop it to
the right of the Search by State text in your Master Page. From the Properties window, find the
ID property and change it from
ddlStates. Next, drag a Button component onto your form, this time dropping it to the right of the DropDownList you just added. Change the ID property for this button to
btnSearch, and change the
Text property to
At present, the DropDownList component on the Master Page is Unbound, meaning that it has no data source and as a result, will not display any items. Let's rectify that by binding it to a data source. Right-click on the DropDownList and select Show Smart Tag. From this list, select Choose Data Source, which will open the Data Source Configuration Wizard. In this dialog, from the Select a data source options choose <New data source>. You will be asked where the application will get data from. Select Database and press OK.
On the next screen, press the New Connection button to open the bAdd Connectionb dialog. Next to Data Source, press Change and select IBM DB2, IDS and U2 Servers from the popup window. Back on the Add Connection page, enter your IBM DB2 connection credentials and select the STORELOC database. Press Test Connection to ensure that the application can connect to DB2, and press OK to add the connection. You should now be back at the Choose Your Data Connection window, where you should see your STORELOC database connection in the drop-down list, as in Figure 9.
Figure 9. Choose Your Data Connection dialog
Press Next to move on, and on the Save the Connection string screen, leave the default selections and press Next to go ahead to the Configure the Select Statement screen. Select Specify a custom SQL statement or stored procedure and press Next. In the SQL statement box under the SELECT tab, enter the following statement:
select distinct(address_state) from store_view.
Press Next to go to the next screen and press Test Query to ensure that your statement returns rows. When you are ready, press Finish. You should now be back at the Choose a Data Source screen, and ADDRESS_STATE should be preselected in the two drop-down lists that you enabled (Figure 10). Press OK to close this dialog, and your DropDownList control should now have the text Databound.
Figure 10. Choose a Data Source dialog
Your Master Page is complete. The Design view of the final version should look like the screen capture in Figure 11.
Figure 11. Final Master Page view
Before you move on, however, you need to define the action that will occur when you press the Go button next to the Search by State drop-down list. To do so, in Design View double-click the Go button. This will open the code file (MasterPage.master.cs) with the cursor inside the function
btnSearch_Click. Inside this function, enter the following code:
This code will redirect the user to the SearchResults.aspx page, passing the Query String parameter state, with the value set to the currently selected state in the drop down list.
With the Master Page created and the project set up, you are now ready to develop the main Store Locator application. In the next section you will concentrate on producing the Client Interface, where a Web site visitor might come to browse through your company's stores.