This tutorial introduces you to ASP.NET’s GridView control, showing how easy it is now to display data from a database.

The GridView Control is used to display data in a tabular fashion within ASP.NET.
The output is converted into a HTML table for display in a browser. The control makes it easy for us to display data from a Data Source using ASP.NET. This tutorial will show how we can use the GridView Control to display data easily, without the huge amounts of code.

In this example, we will use the GridView with a SqlDataSource and an sample database.

We can start off by dragging a GridView on to our page from the Data toolbox, in Visual Studio (or Web Developer). We can also drag on a SqlDataSource. The source code of which will look something like the snippet below:

Back in Design View of the ASPX page, we can select the Smart Tag of the SqlDataSource and choose Configure Data Source. From the dropdown menu, we choose the database we wish to connect to, and then press Next. If the database is not in the list, we can choose New Connection and configure it from there.

The next screen will ask what we want to select from the database. For this example, we’re going to select all. When done, a connection string will be added to the Web.config file, which will look similar to the following:

Now we can go back to the Design View of the ASPX page and choose the Smart Tag of the GridView Control, and choose ‘Choose Data Source’. Set it to your SqlDataSource you have just configured. Once done, the GridView will display data from this source. The code will have changed slightly:

The GridView also has several built-in features such as Paging and Sorting. To enable these, we can simply click the Smart Tag of the GridView control and check the box for the features we want to implement: Paging, Sorting, or Selection.
These changes are reflected in the code as follows:

Download Source Files