Using the GridView Control in ASP.NET

This tutorial provides an introduction into using the GridView control to display data.

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:

<form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server"> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server"></asp:SqlDataSource> </div> </form>

Try Server Intellect for Windows Server Hosting. Quality and Quantity!

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:

<connectionStrings> <add name="ConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient" /> </connectionStrings>

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

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:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"> <Columns> <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" /> <asp:BoundField DataField="city" HeaderText="city" SortExpression="city" /> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Table1]"></asp:SqlDataSource>

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

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:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" AllowPaging="True" AllowSorting="True" Width="401px"> <Columns> <asp:CommandField ShowSelectButton="True" /> <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" /> <asp:BoundField DataField="city" HeaderText="city" SortExpression="city" /> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Table1]"></asp:SqlDataSource>

Looking for more ASP.NET Tutorials? Click Here!