C# ПІДРУЧНИКИ / c# / Hungry Minds - ASP.NET Bible VB.NET & C#
.pdf
}
</script>
</head>
<body>
<img src="logo.gif">
<br>
<font face="verdana" size="5">DataGrid Grid Body Formatting Example...</font>
<hr>
<form method="post" runat="server">
<asp:DataGrid
ID="simple"
BorderColor="#6699cc"
BorderWidth="1"
CellPadding="1"
Font-Name="verdana"
Font-Size="10pt"
HeaderStyle-BackColor="#6699cc"
AutoGenerateColumns="true"
Runat="server">
</asp:DataGrid>
</form>
</body>
</html>
At this point, all you need to focus on are the page load event and the DataGrid control itself. First, take a look at the line that starts with asp:DataGrid located within the body element. All that has to be done is to specify the ID of the control, set the
AutoGenerateColumns property to true, and set the RunAt attribute to server. Next, in the Page_Load event, the data source is created as a simple one-dimensional array, and then the BindData method of the DataGrid control is called. That's it! The output in Figure 10-1 is displayed when this ASPX page is executed.
Figure 10-1: SimpleDataGrid.aspx, as displayed in Internet Explorer
The following HTML fragment is the source code generated from the DataGrid control after it is executed on the server and returned to the client browser:
<table cellspacing="0" cellpadding="1" rules="all"
bordercolor="#6699CC" border="1" id="simple" style="border-color:
#6699CC;border-width:1px;border-style:solid;font-family:verdana;
font-size:10pt;border-collapse:collapse;">
<tr style="background-color:#6699CC;">
<td>
Item
</td>
</tr><tr>
<td>
Rick
</td>
</tr><tr>
<td>
Billy
</td>
</tr><tr>
<td>
Ed
</td>
</tr><tr>
<td>
Steve
</td>
</tr>
</table>
For each item in this simple array, the DataGrid control generated a tr and td tag within the table tag. This may seem trivial, but it saves you from writing and maintaining a loop in the script that would need to iterate through each item in the array and generate the appropriate HTML output. Also, you don't need to be concerned with the number of items in the array or setting up the table, because the DataGrid controls handle this for you.
Additional Capabilities when Designing ASPX Pages
Now that you have seen a simple example of using the DataGrid control, you are ready to learn about some of the other capabilities that are available to you when designing ASPX pages:
§Controlling the header and footer
§Determining the "look and feel" of the grid
§Controlling the columns in the grid and specifying what type of column you want to use
§Paging
§Sorting
As you can see, you have quite a bit of flexibility with the DataGrid control — not only where you get the data, but also how you display that data within your Web pages. Each of these points will be discussed in the sections that follow, with examples of how they work.
Header and Footer
To change the style of the header and footer when the grid output is written to the page, you control the various properties of the HeaderStyle and FooterStyle. If you want to set the header background to gray and the header font to Verdana, you only need to insert the following HeaderStyle code:
<asp:DataGrid
ID="simple"
BorderWidth="1"
CellPadding="1"
HeaderStyle-BackColor="#6699cc"
HeaderStyle-Font-Name="verdana"
HeaderStyle-Font-Size="10pt"
FooterStyle-BackColor="#6699cc"
FooterStyle-Font-Name="verdana"
FooterStyle-Font-Size="10pt"
AutoGenerateColumns="true"
Runat="server">
</asp:DataGrid>
When you launch your browser and navigate to HeaderFooter.aspx, the screen should look like Figure 10-2.
Figure 10-2: HeaderFooter.aspx, as displayed in Internet Explorer
The table heading should now have a steelblue background with a bold Verdana font. The same technique is used when formatting the footer for the DataGrid.
Instead of specifying HeaderStyle properties, take a look at the following code from HeaderFooter.aspx:
FooterStyle-BackColor="#6699cc"
FooterStyle-Font-Name="verdana"
FooterStyle-Font-Size="10pt"
You can also enclose the Header and Footer sections of the DataGrid as elements within the <ASP:DataGrid> tags. You can then specify the properties for each section and control whether or not to display the header and footer (see Figure 10-3).
Figure 10-3: SimpleStyles.aspx, as displayed in Internet Explorer
The following code shows how to use the DataGrid with the HeaderStyle and
FooterStyle properties: <html>
<head>
<title>Hungry Minds Chapter 9...</title> <script language="C#" runat="server">
void Page_Load(Object sender, EventArgs e) {
String[] items = {"Rick", "Billy", "Ed", "Steve"};
simple.DataSource = items; simple.DataBind();
}
</script>
</head>
<body>
<img src="logo.gif"> <br>
<font face="verdana" size="5">DataGrid with Header/Footer Styles Example...</font> <hr>
<form method="post" runat="server"> <asp:DataGrid
ID="simple"
BorderColor="#6699cc"
BorderWidth="1"
CellPadding="1"
AutoGenerateColumns="true"
ShowHeader=True
Runat="server">
<HeaderStyle
BackColor="#6699cc"
Font-Name="verdana">
</HeaderStyle>
<FooterStyle
BackColor="#6699cc"
Font-Name="verdana">
</FooterStyle>
</asp:DataGrid>
<hr>
</form>
</body>
</html>
Remember when using the style sections that they are elements within the DataGrid, not attributes. When using the Header or Footer style, make sure that you set the
ShowHeader and ShowFooter properties to true. The HeaderStyle property is inherited from the ControlStyle property. Why is this important? If you can define your "look and feel" in the ControlStyle property and then inherit from it, this will provide you a common appearance for your page.
Controlling the appearance of the Grid Body
If you want to format the body of the grid so that your Web page has a specific look and feel, you need to set the properties of the asp:DataGrid element. To change how the grid is displayed, take a look at the following code:
<html>
<head>
<title>Hungry Minds Chapter 9...</title>
<script language="C#" runat="server">
void Page_Load(Object sender, EventArgs e) {
//-- create a data source
String[] items = {"Rick", "Billy", "Ed", "Steve"};
//-- bind the data source
simple.DataSource = items;
simple.DataBind();
}
</script>
</head>
<body>
<img src="logo.gif">
<br>
<font face="verdana" size="5">DataGrid Grid Body Formatting Example...</font>
<hr>
<form method="post" runat="server">
<asp:DataGrid
ID="simple"
AutoGenerateColumns="true"
BorderColor="#6699cc"
BorderWidth="2"
GridLines="Both"
CellPadding="2"
CellSpacing="2"
Font-Name="verdana"
Font-Size="10pt"
Runat="server">
</asp:DataGrid>
</form>
</body>
</html>
When you launch your browser and navigate to SimpleBody.aspx, the screen should look like Figure 10-4.
Figure 10-4: SimpleBody.aspx, as displayed in Internet Explorer
The following code is a fragment of the HTML source generated on the server and returned to the browser when SimpleBody.aspx is executed:
<table cellspacing="2" cellpadding="2" rules="all"
bordercolor="SteelBlue" border="2" id="simple" style="border-color:
SteelBlue;border-width:2px;border-style:solid;font-family:verdana;font-size:8pt;">
<tr>
<td>
Item
</td>
</tr><tr>
<td>
Rick
</td>
</tr><tr>
<td>
Billy
</td>
</tr><tr>
<td>
Ed
</td>
</tr><tr>
<td>
Steve
</td>
</tr>
</table>
Notice how the property settings are generated into HTML code. The appropriate attributes of the table element are set and the rest of the properties are transformed into the style element tag. The point here is that the .NET Framework runtime will recognize the level of the browser requesting the page and generate the supported level of HTML required by the browser. This architecture frees the Web page developer to determine the look and feel of the Web page and not be concerned with the version of the browser that requested the page.
Using the Columns Property
The discussion up until this point has addressed how to control the appearance of the grid by setting the various style properties. Also, the examples thus far have let the DataGrid control determine how the columns are generated and in what order. This section looks at how to control what columns are displayed and the type of columns displayed.
When the AutoGenerate property is set to True, the DataGrid control automatically reads the fields from the data source and generates a BoundColumn type for each field. This is useful if you only want to have a quick display of the data; however, to gain control over what fields are displayed and what type of column to display, you need to set the AutoGenerate property to False. Then, you need to define the type of columns to display within the Columns property. The Columns property is in the following format:
<columns>
...
</columns>
This property is contained within the <asp:DataGrid> </asp:DataGrid> elements. The following are the column classes that can be defined in the Columns property:
§BoundColumn: Displays a column bound to a field in a data source; each item from the data source is displayed in the grid as text. The BoundColumn is the default column type for the DataGrid control.
§ButtonColumn: Displays a command button for each item in the column; this control will let you create a column of custom button controls, such as the OK or Cancel button.
§EditColumn: For each item in the grid, displays a column that contains editing commands.
§HyperLinkColumn: Each item in the column is displayed as a hyperlink; the
column contents can be bound to a field in a data source or static text.
§TemplateColumn: Each item in the column can be displayed with a specified template; this will allow you to provide custom controls in the column.
The sections that follow look at the first four column types.
BoundColumn Class
The following code shows the syntax required to use the BoundColumn column type in the DataGrid control:
<form method="post" runat="server">
<asp:DataGrid
ID="Custom"
AutoGenerateColumns="false"
ShowHeader="True"
RunAt="server">
<HeaderStyle
BackColor="#6699cc" />
<Columns>
<asp:BoundColumn
HeaderText="String"
DataField="String" />
</Columns>
</asp:DataGrid>
</form>
To use the BoundColumn type, you first need to set the AutoGenerate property to False and then specify asp:BoundColumn as the type. Next, you need to set the HeaderText, but only if you wish to display a header, and then set the DataField property. The DataField must be set to a field defined in the data source. When the above code is executed in the browser the screen shown in Figure 10-5 is displayed.
Figure 10-5: BoundColumn.aspx, as displayed in Internet Explorer
You can also specify the style formatting and the format for the data field when it is displayed in the grid. If the data field that you are binding to is a currency or number field, you can use the DataFormatString property to set the display format. For instance, in the BoundColumn2.aspx shown in Figure 10-6, the HeaderText and DataField
properties have been changed to "Integer", which is the second field defined in your data source. Also, the DataFormatString has been added with the following value:
Figure 10-6: BoundColumn2.aspx, as displayed in Internet Explorer
DataFormatString="{0:d2}"
Execute BoundColumn2.aspx, and this time the Integer data field is displayed with a leading zero, as shown in Figure 10-6.
Before moving on to the HyperLink column type, one more property is worth mentioning: the ReadOnly property of the BoundColumn type. This is set to False by default when using the BoundColumn type; editing of the data is allowed when set to True.
ButtonColumn Class
The following code shows the syntax required to use the ButtonColumn column type in the DataGrid control:
<%@ Import NameSpace="System.Web.UI.WebControls" %>
<%@ Import NameSpace="System.Data" %>
<html>
<head>
<title>Hungry Minds Chapter 9...</title>
<script language="C#" runat="server">
void Page_Load(Object sender, EventArgs e) {
//-- create a data source
DataTable dt = new DataTable();
DataRow dr;
//-- randomly generate some test data
dt.Columns.Add(new DataColumn("String", typeof(string)));
dt.Columns.Add(new DataColumn("Integer", typeof(Int32)));
for (Int32 i = 0; i < 10; i++) { dr = dt.NewRow();
dr[0] = "Button " + i.ToString(); dr[1] = i;
dt.Rows.Add(dr);
}
//-- bind the data source Custom.DataSource = dt; Custom.DataBind();
}
</script>
</head>
<body>
<img src="logo.gif">
<br>
<font face="verdana" size="5">DataGrid Example with the Button Column...</font>
<hr>
<form method="post" runat="server">
<asp:DataGrid
ID="Custom"
AutoGenerateColumns="false"
ShowHeader="True"
RunAt="server">
<HeaderStyle
BackColor="#6699cc" />
<columns>
<asp:ButtonColumn
ButtonType="PushButton"
DataTextField="String"
HeaderText="String" />
</columns>
</asp:DataGrid>
</form>
<hr>
</body>
</html>
To use the ButtonColumn type, you first need to set the AutoGenerate property to False and then specify asp:ButtonColumn as the type. You can specify the ButtonType property as one of the following:
§PushButton: A column of push buttons
§LinkButton: A column of hyperlink-buttons
In the preceding example, you set the property to PushButton, set the HeaderText if you wish to display a header, and then set the DataField property. The DataField