Microsoft Expression Web - Gridview


The GridView control is used to display the values of a data source in a table. Each column represents a field, while each row represents a record. In this chapter, we will learn a very simple process to display data from a database on a webpage in a GridView.

Step 1 − Let’s create a new ASPX page in SQLDataSource project and call it gridview.aspx


Step 2 − In the Toolbox, you will see the ASP.NET Controls. Drag the GridView control and drop it over the form section.

ASP.NET Controls

You can see that the GridView context menu is open. Now select the <New data source…> from the Choose Data Source dropdown list. It will display the Data Source Configuration Wizard.

Step 3 − Select the Database as we will get the data from SQL database and specify the data source ID. Click OK.

DataSource ID

Step 4 − Select the existing connection string, which we have created in SQL DataSource chapter, as we will be using the same database in this chapter. Click Next.

Existing Connection String

Step 5 − For the purpose of understanding, let’s select the Student table and click the * checkbox which will retrieve all the columns from the student table. Click Next.

Select Student Table

Step 6 − In the following wizard, you can test the query, so let’s click the Test Query button.

Test Query Button

Upon clicking Next, it will display the following screen −

Click Next

The Design View of gridview.aspx looks as follows −


Step 7 − Let us preview the webpage in a browser. It will appear as follows −


This is a simple table without any formatting.

Step 8 − You can format the GridView from the GridView Context menu.

GridView Context

Click the Auto Format… link. In the Auto Format dialog box, there are many predefined schemes. Select a scheme as per your requirement and click OK.

Auto Format

Let’s preview the webpage in a browser again. It will look like the following screenshot.