In this article we'll introduce you to the successor to the datagrid that comes with ASP.NET 1.1. This control is called the GridView control. The GridView control provides more flexibility in displaying and working with data from your database, combined with the DetailsView, and FormView controls ASP.NET 2.0 should get your applications running in very little time.
The GridView control enables you to connect to a datasource and display data bound to the control. We first want to configure an AccessDatasource control in this example and then bind this control to our DataView control.
DataSource Controls
In order to add a control you can go to design mode within Visual Web Developer and drag and drop a datasource control. There are several datasource controls you can select from:
-
SQLDataSource
-
AccessDataSource
-
ObjectDataSource
-
XMLDataSource
-
SiteMapDataSource
In this example we will select an AccessDataSource control to place in our page. Once you drop the control into your page you can modify a couple attributes, let's look at the source of the control:
<asp:accessdatasource id="NorthwindProducts" runat="server"
selectcommand="SELECT * FROM [Customers]"
datafile="~/Data/Northwind.mdb">
</asp:accessdatasource>
You can see in our example above, we provided an ID for our control called NorthwindProducts, enabled the control to run at the server, created a query for the control, and pointed the control to our Access database which is located in the Data folder off our application root.
GridView Control
Now that we have a data source control in the page, let's bind that control to a GridView control. Again, this can be done in the IDE by dragging and dropping a GridView, and then binding the control to our AccessDataSource control we added to the page previously.
Once you add the control to the page in design mode, you'll notice a small arrow on the right upper corner of the GridView. Click on this control to view the attributes of the control. This brings up a dialog where you can specify which datasource to bind to if there is one existing in the page.
You'll also notice some great new features to the control. ASP.NET 2.0 enables you to do paging, sorting, and selection, just by specifying a couple options in the control. Now, it is much easier to specify and control the various attributes of the control. In the past, paging and sorting would have taken a lot of custom code to write, now in ASP.NET 2.0 it is provided for you.
In our example, we'll just bind the control to our AccessDataSource control. Now let's look at the resulting code:
<asp:gridview id="grdNorthwindProducts" runat="server"
datasourceid="NorthwindProducts" DataKeyNames="CustomerID" AutoGenerateColumns="False">
<Columns>
<asp:BoundField ReadOnly="True" HeaderText="CustomerID" DataField="CustomerID" SortExpression="CustomerID"></asp:BoundField>
<asp:BoundField HeaderText="CompanyName" DataField="CompanyName" SortExpression="CompanyName"></asp:BoundField>
<asp:BoundField HeaderText="ContactName" DataField="ContactName" SortExpression="ContactName"></asp:BoundField>
<asp:BoundField HeaderText="ContactTitle" DataField="ContactTitle" SortExpression="ContactTitle"></asp:BoundField>
<asp:BoundField HeaderText="Address" DataField="Address" SortExpression="Address"></asp:BoundField>
<asp:BoundField HeaderText="City" DataField="City" SortExpression="City"></asp:BoundField>
<asp:BoundField HeaderText="Region" DataField="Region" SortExpression="Region"></asp:BoundField>
<asp:BoundField HeaderText="PostalCode" DataField="PostalCode" SortExpression="PostalCode"></asp:BoundField>
<asp:BoundField HeaderText="Country" DataField="Country" SortExpression="Country"></asp:BoundField>
<asp:BoundField HeaderText="Phone" DataField="Phone" SortExpression="Phone"></asp:BoundField>
<asp:BoundField HeaderText="Fax" DataField="Fax" SortExpression="Fax"></asp:BoundField>
</Columns>
</asp:gridview>
You can see all how the IDE added the code needed to bind and display our data. Now let's save the page and view the results in the Web browser.
There you have it, instant data in a Web page. In later articles we'll cover working with the GridView in more detail.
