Displaying Data in a GridView Control

asp.net.ph

Home > Data Access in Web Forms > Displaying Information From a Database > Displaying Data in a GridView

Displaying Data in a DataGrid Control Selecting Information From a Database

The <asp:GridView> control, like the <asp:DataGrid> control, displays tabular data and optionally supports selecting, sorting, paging and editing the data.

By default, GridView generates a bound column for each field in the data source ( AutoGenerateColumns=true ).

Each field in the data is rendered in a separate column, in the order it occurs in the data. Field names appear in the grid’s column headers, and values are rendered in text labels. A default format is applied to non-string values.

You can also specify which columns appear in the GridView.

The following examples demonstrate how to access an SQL Server™ database that contains book titles and several key pieces of information about each book, and then displays the data using a GridView control, in the columns you specify.

NOTE: This sample illustrates using the SQL Server™ .NET Data Provider, though the same concepts apply to the corresponding OLEDB classes as well.

Import the proper namespaces into your page. This provides your code with access to the necessary classes.
```
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
```
NOTE: This example uses methods described in Calling Data Functions in Code Behind to connect and bind to a DataSource.
In the <head> of the Web Forms page, declare a reference to the script file which contains the data access functions.
```
<script language="C#" runat="server" src="~/shared/fetchData_sql.cs" />
```
Implement a Page_Load function within another <script runat="server"> code declaration block, essentially to do the following:
1. define the SQL query to use to fetch the data
2. fetch results of the query into a DataReader
3. bind the GridView to the DataReader
This is shown in the following steps.
```
<script language="C#" runat="server">
   void Page_Load ( object src, EventArgs e ) {
```
Define the SQL Select query to fetch the data from the Books table.
```
      string query = "SELECT * FROM Books";
```
Set the DataSource of the GridView control ( herein codenamed myGrid ) to the output of the fetchReader method, which returns the result of the query command in the form of a DataReader.
```
      myGrid.DataSource = fetchReader ( query );
```
Bind the DataGrid to the DataReader.
```
      myGrid.DataBind ( );
```
Close the script.
```
   }
</script>
```

Within the <body> of the Web Forms page, declare the opening tag of the GridView control with the following properties, setting it up to display the columns you define.

<body>
<asp:gridview id="myGrid" runat="server"
   autogeneratecolumns=false
   width="90%" cellpadding=5 cellspacing=0
   backcolor="ghostwhite"
   font-size="10pt"
   enableviewstate=false>

Set up the contents of each column using the GridView Columns property. In this case we are using an ImageField and a HyperLinkField, along with several BoundFields.

   <columns>
      <asp:imagefield headertext=""
         dataimageurlfield="titleid"
         dataimageurlformatstring="/shared/books/sm/{0}.jpg" />
      <asp:hyperlinkfield headertext="Title"
         datatextfield="title" target="amzn"
         datanavigateurlfields="url" />
      <asp:boundfield headertext="Author"
         datafield="Author" />
      <asp:boundfield headertext="Publisher"
         datafield="Publisher" />
      <asp:boundfield headertext="Price (from)"
         datafield="Price"
         dataformatstring="{0:c}" 
         itemstyle-horizontalalign="right" />
   </columns>

Declare the closing tag of the GridView control and close the page.
```
</asp:gridview>
</body>
```

Show me

The below example shows a similar example but using instead an SqlDataSource control to connect to a data source.

Within the <body> of the Web Forms page, declare an <asp:sqldatasource> control with the following properties.

<asp:sqldatasource id="titles" runat="server"
   selectcommand = "SELECT * FROM Titles"
   connectionstring = "<%$ ConnectionStrings:aspnet %>"
   datasourcemode = "DataReader" />

Set up the GridView control as in the first example above, but specify a DataSourceId to link the GridView to the <asp:sqldatasource> control, and thus bind to the database defined in the data source control.
```
<asp:gridview id="myGrid" runat="server"
   datasourceid="titles">
```
To display the data, set up the contents of each GridView item as described in the first example above.

Show me

For more information, see Working with the GridView Control.

The examples presented in this section apply several concepts and methods that are described elsewhere in this workshop. For particulars, see Data Binding in Web Forms and Web Forms Server Controls Templates.

Displaying Data in a DataGrid Control Selecting Information From a Database

Monday, January 27, 2025

Displaying Data in a GridView Control

Binding Data To a GridView Using ADO.NET Classes

To access an SQL database

To display the data

Binding Data To a GridView Using a DataSource Control

Next Section