Generating a Data-Driven Web Page

Learning Resources
 

Generating a Data-Driven Web Page

Create a new Web site and page by following these steps.

To create a file system Web site

  1. Open Visual Web Developer.

  2. On the File menu, click New Web Site.

    The New Web Site dialog box appears.

  3. Under Visual Studio installed templates, click ASP.NET Web Site.

  4. In the right-most Location box, enter the name of the folder where you want to keep the pages of the Web site.

    For example, type the folder name C:\WebSites.

  5. In the Language list, click the programming language that you prefer to work in.

  6. Click OK.

    Visual Web Developer creates the folder and a new page named Default.aspx.

 

Adding a GridView Control to Display Data

To display data on an ASP.NET Web page, you need the following:

  • A connection to a data source (such as a database).

    In the following procedure, you will create a connection to the SQL Server Northwind database.

  • A data source control on the page, which executes queries and manages the results of the queries.

  • A control on the page to actually display the data.

    In the following procedure, you will display data in a GridView control. The GridView control will get its data from the SqlDataSource control.

You can add these elements to the Web site separately. However, it is easiest to start by visualizing the data display using GridView control, and then using wizards to create the connection and data source control. The following procedure explains how to create all three of the elements that you must have to display data on the page.

To add and configure a GridView control for displaying data

  1. In Visual Web Developer, switch to Design view.

  2. From the Data folder in the Toolbox, drag a GridView control onto the page.

  3. If the GridView Tasks shortcut menu does not appear, right-click the GridView control, and then click Show Smart Tag.

  4. On the GridView Tasks menu, in the Choose Data Source list, click .

    The Data Source Configuration dialog box appears.

    Data Source Configuration wizard

  5. Click Database.

    This specifies that you want to obtain data from a database that supports SQL statements. This includes SQL Server and other OLE-DB–compatible databases.

    In the Specify an ID for the data source box, a default data source control name appears (SqlDataSource1). You can leave this name.

  6. Click OK.

    The Configure Data Source Wizard appears, displaying a page on which you can choose a connection.

    Choose Connection dialog box

  7. Click New Connection.

  8. In the Choose Data Source dialog box, under Data source, click Microsoft SQL Server, and then click Continue.

    The Add Connection dialog box appears.

  9. In the Server name box, enter the name of the SQL Server that you want to use.

    Add Connection dialog box

  10. For the logon credentials, select the option that is appropriate for accessing the SQL Server database (integrated security or specific ID and password) and if it is required, enter a user name and password.

  11. Click Select or enter a database name, and then enter Northwind.

  12. Click Test connection, and when you are sure that it works, click OK.

    The Configure Data Source - Wizard appears and the connection information is filled in.

  13. Click Next.

    The wizard appears, displaying a page on which you can choose to store the connection string in the configuration file. Storing the connection string in the configuration file has two advantages:

    1. It is more secure than storing the connection string in the page.

    2. You can reuse the same connection string in multiple pages.

  14. Make sure that the Yes, save this connection as check box is selected, and then click Next. (You can leave the default connection string name of NorthwindConnectionString.)

    The wizard appears, displaying a page on which you can specify the data that you want to fetch from the database.

  15. Under Specify columns from a table or view, in the Name list, click Customers.

  16. Under Columns, select the CustomerID, CompanyName, and City check boxes.

    The wizard appears, displaying the SQL statement that you are creating in a box at the bottom of the page.

    Configure Select Statement pane
    Note Note:

    The wizard lets you specify selection criteria (a WHERE clause) and other SQL query options. For this part of the walkthrough, you will create a simple statement without selection or sort options.

  17. Click Next.

  18. Click Test Query to make sure that you are fetching the data you want.

  19. Click Finish.

    The wizard closes and you are returned to the page. Running the wizard has accomplished two tasks:

    • The wizard created and configured a SqlDataSource control (named SqlDataSource1), which incorporates the connection and query information that you specified.

    • The wizard bound the GridView control to the SqlDataSource. Therefore, the GridView control will display data that is returned by the SqlDataSource control.

    If you view the properties for the SqlDataSource control, you can see that the wizard has created values for the ConnectionString and SelectQuery properties.

    Note Note:

    You can easily change the look of the GridView control. In Design view, right-click the GridView control, and then click Show Smart Tag. On the GridView Tasks menu, click Auto Format, and then apply a scheme.
--MSDN
 For Support