This documentation is archived and is not being maintained.

Walkthrough: Displaying Data in a Web Forms Page

Visual Studio .NET 2003

Web Forms pages provide you with a variety of ways to work with data. This walkthrough illustrates the simplest way.

In the walkthrough, you will display information from the Northwind Categories table in a data grid on the page. You will create a dataset — an in-memory cache of data — into which you will read information from the database. You will then bind a DataGrid Web server control to the dataset in order to display data.

Note   Using a dataset is only one option for data access in Web Forms, and it is not the optimal choice in some scenarios. You will use a dataset in this walkthrough for the sake of simplicity. For more information, see Web Data Access Strategy Recommendations.

In order to complete this walkthrough, you will need:

The walkthrough is split into a number of smaller pieces:

  • Creating the Web application project and a Web Forms page.
  • Creating and configuring the dataset you will bind the grid to. This includes creating a query that populates the dataset from the database.
  • Adding the DataGrid control to the form and binding it to data.
  • Add code to fill the dataset.

Creating the Project and Form

The first step is to create a Web application and a Web Forms page.

To create the project and form

  1. On the File menu, point to New, then click Project.
  2. In the New Project dialog box, do the following:
    1. In the Project Types pane, choose either Visual Basic Projects or Visual C# Projects.
    2. In the Templates pane, choose ASP.NET Web Application.
    3. In the Location box, enter the complete URL for your application, including http://, the name of the server, and the name of your project. The Web server must have IIS version 5 or later and the .NET Framework installed on it. If you have IIS on your computer, you can specify http://localhost for the server. (If you normally use a proxy server to access the Internet, you might need to configure Internet Explorer to bypass the proxy server in order to use localhost.)

      When you click OK, a new Web Forms project is created at the root of the Web server you specified. In addition, a new Web Forms page called WebForm1.aspx is displayed in the Web Forms Designer in Design view.

      Tip   If you have trouble creating a Web application project, see Web Access Failed Dialog Box.

Creating and Configuring a Dataset

In this walkthrough, you will add a dataset to the page. The dataset will contain a single table, the Categories table. (A dataset can contain multiple tables, but in this walkthrough it will contain just one table.)

The dataset does not already exist. Instead of adding it manually to the form, you will perform the following set of steps:

  • Create a data adapter using a wizard. The adapter contains SQL statements used to read and write database information. The wizard helps you define the SQL statements you need. If necessary, the wizard also creates a connection to the database.
  • Generate the dataset schema. In this process, you will have Visual Studio create a new dataset class based on the tables and columns you are accessing. When you generate the dataset class, you will also add an instance of it to the form.

It is important that you follow all the procedures in this section. Otherwise your page will not have the dataset that you will be using in subsequent parts of the walkthrough.

For details on data adapters, see Introduction to Data Adapters. For details about datasets, see Introduction to Datasets.

Configuring a Data Connection and Data Adapter

To begin, you create a data adapter that contains the SQL statement used to populate the dataset later. As part of this process, you define a connection to access a database. You configure the data adapter using a wizard, which makes it easy to create the SQL statements you need for data access.

Note   When the wizard is done, you must continue to the next section in order to generate a dataset and complete the data access portion of your form.

To create the data connection and data adapter

  1. From the Data tab of the Toolbox, drag an OleDbDataAdapter object onto the form.
    Note   You could also use the SqlDataAdapter, which is optimized for working with SQL Server 7.0 or later. In this walkthrough, you use the OleDbDataAdapter because it is more generic, providing ADO.NET access to any OLE DB-compatible data source.

    The Data Adapter Configuration Wizard starts, which will help you create both the connection and the adapter.

  2. In the wizard, do the following:
    1. In the second pane, create or choose a connection pointing to the SQL Server Northwind database.
      Note   You need appropriate read/write permissions on the SQL Server you are using. If SQL Server is on the same computer as IIS, it is recommended that you specify Windows integrated security when creating the connection. Otherwise, you can specify a user name and password and save that information with the connection, but doing so can compromise security. For more information, see Accessing SQL Server from a Web Application.
    2. In the third pane, specify that you want to use a SQL statement to access the database.
    3. In the fourth pane, create the following SQL statement:
      SELECT CategoryID, CategoryName, Description
      FROM Categories

      For assistance building the SQL statement, click Query Builder to launch the Query Builder dialog box.

      Note   In this walkthrough, you will populate the dataset with all the rows from the categories table. In production applications, you typically optimize data access by creating a query that returns only the columns and rows you need. For an example, see Walkthrough: Displaying Data in a Windows Form Using a Parameterized Query.
    4. Click Finish.

      The wizard creates a connection (OleDbConnection1) containing information about how to access your database. You will also have a data adapter (OleDbDataAdapter1) that contains a query defining what table and columns in the database you want to access.

  3. After the wizard is complete, generate the dataset based on the SQL query that you created during this procedure. For details, see the next section.
    Note   For more information, click Help while running the wizard or see Data Adapter Configuration Wizard. For details about data adapters, see Introduction to Data Adapters.

Creating the Dataset

After you have established the means to connect to the database and specified the information you want (via the SQL command in the data adapter), you can have Visual Studio create a dataset. Visual Studio can generate the dataset automatically based on the query you specified for the data adapter. The dataset is an instance of the DataSet class based on a corresponding schema (.xsd file) that describes the class's elements (table, columns, and constraints). For details about the relationship between datasets and schemas, see Introduction to Data Access with ADO.NET.

To generate a dataset

  1. From the Data menu, choose Generate DataSet.
    Tip   If you do not see the Data menu, click the form; the form must have focus for the menu to appear.

    The Generate Dataset dialog box appears.

  2. Select the New option and name the dataset dsCategories.

    In the list under Choose which table(s) to add to the dataset, the categories table should be selected.

  3. Check Add this dataset to the designer, then click OK.

    Visual Studio generates a typed dataset class (dsCategories) and a schema that defines the dataset. You will see the new schema (dsCategories.xsd) in Solution Explorer.

    Tip   In Solution Explorer, click the Show All Files toolbar button to see the schema file's dependent .vb or .cs file, which contains the code the defines your new dataset class.

    Finally, Visual Studio adds an instance of the new dataset class (DsCategories1) to the form.

At this point you have set up everything you need in order to get information out of a database and into a dataset.

Adding a DataGrid to Display Data

In this walkthrough you will use a DataGrid Web server control to display information from the Categories table. You could also use a DataList or Repeater control to achieve the same results. However, the DataGrid control is the easiest control to configure (for example, you do not need to create any templates for it), which will allow you to concentrate on the data aspects of the walkthrough.

To add and configure the control

  1. From the Web Forms tab of the Toolbox, drag a DataGrid control onto the page.
  2. At the bottom of the Properties window, choose the AutoFormat link and select a predefined format for the grid.
  3. In the DataSource property, select DsCategories1 as the data source. This binds the grid to the dataset as a whole.
  4. In the DataMember property, select Categories. If a data source contains more than one bindable object, you can use the DataMember property to specify which object to bind to.

    Setting these two properties binds the categories data table in the DsCategories1 dataset to the grid.

Filling the Dataset and Displaying Data in the DataGrid Control

Although the grid is bound to the dataset you created, the dataset itself is not automatically filled in. Instead, you must fill the dataset yourself by calling a data-adapter method. For details about filling datasets, see Introduction to Datasets.

Even after the dataset is filled in, the DataGrid control does not automatically display the data. You must explicitly bind the grid to its data source. For more information, see Introduction to Data Binding in Web Forms Pages.

To fill the dataset and display data in the DataGrid control

  1. Double-click the page to display the page's class file in the Code Editor.
  2. In the Page_Load event handler, call the data adapter's Fill method, passing it the dataset you want to populate:
  3. Call the DataGrid control's DataBind method to bind the control to the dataset.

    You do not need to refill the dataset and bind the grid with each round trip. Once the DataGrid control has been populated with data, its values are preserved in view state each time the page is posted. Therefore, you only need to fill the dataset and bind the grid the first time the page is called. You can test for this using the page's IsPostBack property.

    The complete handler will look like the following:

    ' Visual Basic
    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
       'Put user code to initialize the page here
       If Not IsPostBack Then
       End If
    End Sub
    // C#
    private void Page_Load(object sender, System.EventArgs e)
       // Put user code to initialize the page here
       if ( !IsPostBack)


After adding the code, test data access in the Web Forms page.

To test the Web Forms page

  1. Save the page.
  2. In Solution Explorer, right-click the page and choose View in Browser.

    Confirm that a list of categories is displayed in the grid.

Next Steps

  • Format the grid by changing its color, font, and so on.
  • Display only selected information in the grid. In many instances, you will base the display on information that the user supplies at run time (for example, you might display authors only from a particular city). To do this, you create a parameterized query. For details, see Walkthrough: Displaying Data in a Windows Form Using a Parameterized Query.
  • Use a data reader instead of a dataset as the source of data for the grid. In a page such as this one, where the data is read-only, it is often more efficient to get the data directly from the database rather than first creating and filling a dataset. For an example, see Walkthrough: Creating Read-Only Data Access in a Web Forms Page.
  • Separate data access from the user interface. In this walkthrough, you have created a form that accesses the data more-or-less directly (via the dataset). A more flexible and maintainable design is to create a data-access component that handles data access. The form (that is, the user interface) could then interact with the component as needed. The same component could be used by multiple forms (and by other components), which eliminates the overhead and redundancy of redesigning data access for every form you create. For details on creating component-based data access, see Walkthrough: Creating a Distributed Application.
  • Learn about the security issues associated with Web Forms. For details, see Overview of Web Application Security Threats.

See Also

Data Access in Web Forms Pages | Introduction to Datasets