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.

You can see that the GridView context menu is open. Now select the <New data source…> from the Choose Data Source dropdown pst. 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. Cpck OK.

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. Cpck Next.

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

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

Upon cpcking Next, it will display the following screen −

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.

Cpck the Auto Format… pnk. In the Auto Format dialog box, there are many predefined schemes. Select a scheme as per your requirement and cpck OK.

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