This tutorial introduces you to ASP.NET's GridView control, showing how easy it is now to display data from a database.
We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
Looking for more ASP.NET Tutorials? Click Here!
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> |
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> |
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
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:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Table1]"></asp:SqlDataSource> |
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:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Table1]"></asp:SqlDataSource> |
Looking for more ASP.NET Tutorials? Click Here!
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!