1. In this chapter, you’ll concentrate on three
more advanced controls that allow you to
bind entire tables of data.
• GridView
• Details View
• FormView

2. GridView: The GridView is an all-purpose grid control for
showing large tables of information. it comes equipped
with the most ready-made functionality like sorting,
paging, selecting, editing and deleting.
DetailsView: The DetailsView is ideal for showing a
single record at a time. The DetailsView also supports
editing.
FormView: Like the DetailsView, the FormView shows a
single record at a time and supports editing. The
difference is that the FormView is based on templates,
which allow you to combine fields in a flexible layout that
doesn’t need to be table-based.
•

3. protected void Page_Load(object sender, EventArgs e)
{
string connectionString =
WebConfigurationManager.ConnectionStrings["Northwind"].Connectio
nString;
string selectSQL = "SELECT ProductID, ProductName, UnitPrice
FROM Products";
SqlConnection con = new SqlConnection(connectionString);
SqlCommand cmd = new SqlCommand(selectSQL, con);
SqlDataAdapter adapter = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
adapter.Fill(ds, "Products");
GridView1.DataSource = ds;
GridView1.DataBind();
}

4. Of course, you don’t need to write this data access code by hand.
Define a SqlDataSource to perform the query shown in the previous
example:
<asp:SqlDataSource ID="sourceProducts" runat="server"
ConnectionString="<%$ ConnectionStrings:Northwind %>"
SelectCommand="SELECT ProductID, ProductName, UnitPrice
FROM Products" />
Next, set the GridView.DataSourceID property to link the data source
to your grid:
<asp:GridView ID="GridView1" runat="server"
DataSourceID="sourceProducts" />

5. By default, the GridView.AutoGenerateColumns property
is true, and the GridView creates a column for each field
in the bound DataTable.
This automatic column generation is good for creating
quick test pages, but it doesn’t give you the flexibility you’ll
usually want. For example, what if you want to hide
columns, change their order, or configure some aspect of
their display, such as the formatting or heading text?
In all these cases, you need to set AutoGenerateColumns
to false and define the columns in the <Columns> section
of the GridView control tag.

7. Now that you understand the underpinnings of the GridView,
you’ve still only started to explore its higher-level features.
Formatting: How to format rows and data values
Selecting: How to let users select a row in the GridView and
respond accordingly
Editing: How to let users commit record updates, inserts,
and deletes
Sorting: How to dynamically reorder the GridView in
response to clicks on a column header
Paging: How to divide a large result set into multiple pages
of data
Templates: How to take complete control of designing,
formatting, and editing by defining templates

8. You handle this job with the DataFormatString property.
Each BoundField column provides a DataFormatString
property you can use to configure the appearance of
numbers and dates using a format string.
<asp:BoundField DataField="UnitPrice"
HeaderText="Price"
DataFormatString="{0:C}" />
<asp:BoundField DataField="BirthDate"
HeaderText="Birth Date"
DataFormatString="{0:MM/dd/yy}" />

10. protected void GridView1_RowDataBound(object
sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// Get the price for this row.
decimal price =
(decimal)DataBinder.Eval(e.Row.DataItem, "UnitPrice");
if (price > 50)
{
e.Row.BackColor = System.Drawing.Color.Maroon;
e.Row.ForeColor = System.Drawing.Color.White;
e.Row.Font.Bold = true;
}
}
}

11. The GridView provides built-in support for selection. You
simply need to add a CommandField column with the
ShowSelectButton property set to true.
ASP.NET can render the CommandField as a hyperlink, a
button, or a fixed image.
<asp:CommandField ShowSelectButton="True"
ButtonType="Button“ SelectText="Select" />
<asp:CommandField ShowSelectButton="True"
ButtonType="Image“ SelectImageUrl="select.gif" />

12. You don’t need to create a new column to support
row selection. Instead, you can turn an existing
column into a link.
<asp:ButtonField CommandName="Select"
ButtonType="Button"
DataTextField="ProductID" />

13. A typical master-details page has two GridView controls.
The first GridView shows the master (or parent) table.
When a user selects an item in the first GridView, the
second GridView is filled with related records from the
details (or parent) table.

14. Use the CommandField column, set ShowEditButton to true.
To enable sorting, you must set the GridView.AllowSorting
property to true. Next, you need to define a SortExpression
for each column that can be sorted.
To use automatic paging, you need to set AllowPaging to
true (which shows the page controls), and you need to set
PageSize to determine how many rows are allowed on
each page.

15. You can use each SqlDataSource control you create,
to retrieve a single query.
The SqlDataSource command logic is supplied through
four properties—SelectCommand, InsertCommand,
UpdateCommand, and DeleteCommand—each of which
takes a string.
<asp:SqlDataSource ID="sourceProducts" runat="server"
ConnectionString="<%$ ConnectionStrings:Northwind %>"
SelectCommand="SELECT ProductName, ProductID
FROM Products“ />

16. <asp:SqlDataSource ID="sourceProductDetails" runat="server"
ProviderName="System.Data.SqlClient"
ConnectionString="<%$ ConnectionStrings:Northwind %>“
SelectCommand="SELECT * FROM Products WHERE
ProductID=@ProductID"/>
<asp:SqlDataSource ID="sourceProductDetails" runat="server"
ProviderName="System.Data.SqlClient"
ConnectionString="<%$ ConnectionStrings:Northwind %>"
SelectCommand="SELECT * FROM Products WHERE
ProductID=@ProductID">
<SelectParameters>
<asp:ControlParameter ControlID="lstProduct" Name="ProductID"
PropertyName="SelectedValue" />
</SelectParameters>
</asp:SqlDataSource>

17. If bound to Rich Controls SqlDataSource can display
many fields at a time as compared to List Controls which
display only one field at a time.
Example:
Gridview
DetailsView

19. For example, you could split the earlier example into two pages. In the first
page, define a list control that shows all the available products:
<asp:SqlDataSource ID="sourceProducts" runat="server"
ProviderName="System.Data.SqlClient"
ConnectionString="<%$ ConnectionStrings:Northwind %>"
SelectCommand="SELECT ProductName, ProductID FROM Products"/>
<asp:DropDownList ID="lstProduct" runat="server" AutoPostBack="True"
DataSourceID="sourceProducts" DataTextField="ProductName"
DataValueField="ProductID" />

20. protected void cmdGo_Click(object sender, EventArgs e)
{
if (lstProduct.SelectedIndex != -1)
{
Response.Redirect(
"QueryParameter2.aspx?prodID=" + lstProduct.SelectedValue);
}
}
Finally, the second page can bind the DetailsView according to the ProductID value
that’s supplied in the query string:
<asp:SqlDataSource ID="sourceProductDetails" runat="server"
ProviderName="System.Data.SqlClient"
ConnectionString="<%$ ConnectionStrings:Northwind %>"
SelectCommand="SELECT * FROM Products WHERE ProductID=@ProductID">
<SelectParameters>
<asp:QueryStringParameter Name="ProductID" QueryStringField="prodID" />
</SelectParameters>
</asp:SqlDataSource>
<asp:DetailsView ID="detailsProduct" runat="server"
DataSourceID="sourceProductDetails" />