![Microsoft Expression Web Tutorial](/microsoft_expression_web/images/microsoft-expression-web-mini-logo.jpg)
- Microsoft Expression Web Tutorial
- MS Expression Web - Home
- MS Expression Web - Overview
- Environment Setup
- MS Expression Web - New Website
- Blank Web Page
- Webpage Layout
- MS Expression Web - HTML Layout
- Horizontal Navigation
- Vertical Navigation
- MS Expression Web - Validate Pages
- Dynamic Web Template
- MS Expression Web - Search Page
- MS Expression Web - Images
- MS Expression Web - Hyperlinks
- MS Expression Web - Video
- SQL Datasource
- MS Expression Web - MS Word
- MS Expression Web - Gridview
- MS Expression Web - Master Pages
- MS Expression Web - Data Table
- MS Expression Web - Publish
- Backup Website
- MS Expression Web - Add-Ins
- MS Expression Web Resources
- MS Expression Web - Quick Guide
- MS Expression Web - Resources
- MS Expression Web - Discussion
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
![GridView](/microsoft_expression_web/images/gridview.jpg)
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](/microsoft_expression_web/images/asp_net_controls.jpg)
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](/microsoft_expression_web/images/datasource_id.jpg)
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](/microsoft_expression_web/images/existing_connection_string.jpg)
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](/microsoft_expression_web/images/select_student_table.jpg)
Step 6 − In the following wizard, you can test the query, so let’s click the Test Query button.
![Test Query Button](/microsoft_expression_web/images/test_query_button.jpg)
Upon clicking Next, it will display the following screen −
![Click Next](/microsoft_expression_web/images/click_next.jpg)
The Design View of gridview.aspx looks as follows −
![gridview.aspx](/microsoft_expression_web/images/gridview_aspx.jpg)
Step 7 − Let us preview the webpage in a browser. It will appear as follows −
![Appear](/microsoft_expression_web/images/appear.jpg)
This is a simple table without any formatting.
Step 8 − You can format the GridView from the GridView Context menu.
![GridView Context](/microsoft_expression_web/images/gridview_context.jpg)
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](/microsoft_expression_web/images/auto_format.jpg)
Let’s preview the webpage in a browser again. It will look like the following screenshot.
![Screenshot](/microsoft_expression_web/images/screenshot.jpg)