Creating Web Sites and Web Pages by Using Visual Web Developer and ASP.NET
- 5/12/2010
Displaying Database Records on a Web Page
For many users, one of the most exciting aspects of the World Wide Web is the ability to access large amounts of information rapidly through a Web browser. Often, of course, the quantity of information that needs to be displayed on a commercial Web site far exceeds what a developer can realistically prepare using simple text documents. In these cases, Web programmers add database objects to their Web sites to display tables, fields, and records of database information on Web pages, and they connect the objects to a secure database residing on the Web server or another location.
Visual Studio 2010 makes it easy to display simple database tables on a Web site, so as your computing needs grow, you can use Visual Studio to process orders, handle security, manage complex customer information profiles, and create new database records—all from the Web. Importantly, Visual Web Developer delivers this power very effectively. For example, by using the GridView control, you can display a database table containing dozens or thousands of records on a Web page without any program code. You’ll see how this works by completing the following exercise, which adds a Web page containing loan contact data to the Car Loan Calculator project. If you completed the database programming exercises in Chapter 18, “Getting Started with ADO.NET,” and Chapter 19, “Data Presentation Using the DataGridView Control,” be sure to notice the similarities (and a few differences) between database programming in a Windows environment and database programming on the Web.
Add a new Web page for database information
-
Click the Add New Item command on the Website menu.
Visual Web Developer displays a list of components that you can add to your Web site.
-
Click the Web Form template, type FacultyLoanLeads.aspx in the Name text box, and then click Add.
Visual Web Developer adds a new Web page to your Web site. You’ll customize it with some text and server controls.
-
Click the Design tab to switch to Design view.
-
Enter the following text at the top of the Web page:
The following grid shows instructors who want loans and their contact phone numbers:
-
Press ENTER twice to add two blank lines below the text.
Remember that Web page controls are added to Web pages at the insertion point, so it is always important to create a few blank lines when you are preparing to add a control.
Next, you’ll display two fields from the Faculty table of the Faculty2010.accdb database by adding a GridView control to the Web page. GridView is similar to the DataGridView control you used in Chapter 19, but GridView has been optimized for use on the Web. (There are also a few other differences, which you can explore by using the Properties window and Visual Studio Help documentation.) Note that I’m using the same Access database table I used in Chapters 18 and 19, so you can see how similar database programming is in Visual Web Developer. Many programmers also use SQL databases on their Web sites, and Visual Web Developer also handles that format very well.
Add a GridView control
-
With the new Web page open and the insertion point in the desired location, double-click the GridView control on the Data tab of the Visual Web Developer Toolbox.
Visual Web Developer adds a grid view object named GridView1 to the Web page. The grid view object currently contains placeholder information.
-
If the GridView Tasks list is not already displayed, click the GridView1 object’s smart tag to display the list.
-
Click the Choose Data Source arrow, and then click the <New Data Source> option.
-
Visual Web Developer displays the Data Source Configuration Wizard, a tool that you used in Chapters 18 and 19 to establish a connection to a database and select the tables and fields that will make up a dataset.
Your screen looks like this:
-
Click the Access Database icon, type Faculty2010 in the Specify An ID For The Data Source box, and then click OK.
You are now prompted to specify the location of the Access database on your system. (This dialog box is slightly different than the one you used in Chapter 18.)
-
Type C:\Vb10sbs\Chap18\Faculty2010.accdb, and then click Next.
You are now asked to configure your data source; that is, to select the table and fields that you want to display on your Web page. Here, you’ll use two fields from the Faculty table. (Remember that in Visual Studio, database fields are often referred to as columns, so you’ll see the word columns used in the IDE and the following instructions.)
-
Click the Name list box arrow, and then click Faculty. (There is probably only one or two database tables here, but if there are several, click the Name arrow to view them.)
-
Select the Last Name and Business Phone check boxes in the Columns list box.
Your screen looks like this:
Through your actions here, you are creating an SQL SELECT statement that configures a dataset representing a portion of the Faculty2010.accdb database. You can see the SELECT statement at the bottom of this dialog box.
-
Click Next to see the Test Query screen.
-
Click the Test Query button to see a preview of your data.
You’ll see a preview of actual Last Name and Business Phone fields from the database. This data looks as expected, although if we were preparing this Web site for wider distribution, we would take the extra step of formatting the Business Phone column so that it contains standard spacing and phone number formatting.
-
Click Finish.
Visual Web Developer closes the wizard and adjusts the number of columns and column headers in the grid view object to match the selections that you have made. However, it continues to display placeholder information (“abc”) in the grid view cells.
-
With the GridView Tasks list still open, click the Auto Format command.
-
Click the Professional scheme.
The AutoFormat dialog box looks like this:
The ability to format, adjust, and preview formatting options quickly is a great feature of the GridView control.
-
Click OK, and then close the GridView Tasks list.
The FacultyLoanLeads.aspx Web page is complete now, and looks like the screen shot on the following page. (My GridView control is within a <div> tag, but yours might be within a <p> tag.)
)
)
)
Now, you’ll add a hyperlink on the first Web page (or home page) that will display this Web page when the user wants to see the database table. You’ll create the hyperlink with the HyperLink control, which has been designed to allow users to jump from the current Web page to a new one with a simple mouse click.
How does the HyperLink control work? The HyperLink control is located in the Standard Toolbox. When you add a HyperLink control to your Web page, you set the text that will be displayed on the page by using the Text property, and then you specify the desired Web page or resource to jump to (either a URL or a local path) by using the NavigateUrl property. That’s all there is to it.
Add a hyperlink to the home page
-
Click the Default.aspx tab at the top of the Designer.
The home page for your Web site opens in the Designer.
-
Click to the right of the Calculate button object to place the insertion point after that object.
-
Press ENTER to create space for the hyperlink object.
-
Double-click the HyperLink control on the Standard tab of the Toolbox to create a hyperlink object at the insertion point.
-
Select the hyperlink object, and then set the Text property of the object to “Display Loan Prospects.”
We’ll pretend that your users are bank loan officers (or well-informed car salespeople) looking to sell auto loans to university professors. Display Loan Prospects will be the link that they click to view the selected database records.
-
Set the ID property of the hyperlink object to “lnkProspects.”
-
Click the NavigateUrl property, and then click the ellipsis button in the second column.
The Select URL dialog box opens.
-
Click the FacultyLoanLeads.aspx file in the Contents Of Folder list box, and then click OK.
-
Click Save All to save your changes.
Your link is finished, and you’re ready to test the Web site and GridView control in your browser.
Test the final Car Loan Calculator Web site
-
Click the Start Debugging button.
Visual Studio builds the Web site and displays it in Internet Explorer.
-
Enter 8000 for the loan amount and 0.08 for the interest rate, and then click Calculate.
The result is $250.69. Whenever you add to a project, it is always good to go back and test the original features to verify that they have not been modified inadvertently. Your screen looks like the screen shot on the following page.
The new hyperlink (Display Loan Prospects) is visible at the bottom of the Web page.
-
Click Display Loan Prospects to load the database table.
Internet Explorer loads the Last Name and Business Phone fields from the Faculty2010. accdb database into the grid view object. Your Web page looks something like this:
The information is nicely formatted and appears useful. By default, you’ll find that the data in this table cannot be sorted, but you can change this option by selecting the Enable Sorting check box in GridView Tasks. If your database contains many rows (records) of information, you can select the Enable Paging check box in GridView Tasks to display a list of page numbers at the bottom of the Web page (like a list that you might see in a search engine that displays many pages of “hits” for your search).
-
Click the Back and Forward buttons in Internet Explorer.
As you learned earlier, you can jump back and forth between Web pages in your Web site, just as you would in any professional Web site.
-
When you’re finished experimenting, close Internet Explorer to close the Web site.
)
)
You’ve added a table of custom database information without adding any program code!