DataGrid Web 控件深度历险

    这篇文章是一系列关于使用DataGrid Web控件文章的第一部分。ASP.Net DataGrid Web控件可将数据库信息显示在HTML表格中，并且功能强大。在最简单的情形下DataGrid显示HTML表格框架，但是它可被增强以显示丰富的用户界面，可根据数据库的列进行排序，甚至允许对数据库结果进行分页！所有这些有趣的主题将在今后一系列文章中涉及。

    从数据库中获取表格信息并将其显示在一个HTML表格中是传统ASP编程中最普通的任务之一。在传统ASP编程中需要通过多行交织的HTML和代码实现上述功能。下面的原形代码显示了这些代码通常的形式。

Create Database Connection
Populate a recordset based on some SQL query
Output the HTML table header (〈table ...〉)
Loop through the recordset
  Emit the HTML for a table row
  ...
Emit the HTML table footer (〈/table〉)

    如果你是一个ASP开发人员，你也许多次编写了上述代码。ASP.Net的优点之一就是它包含很多Web控件。这些产生HTML的Web控件提供了一个可编程的接口，它允许开发人员将代码和内容分离，并在代码中将产生HTML的实体作为对象使用。也就是说，如果我们需要通过ASP.Net显示一些HTML内容,将编写如下的代码：

〈script language=“vb“ runat=“server“〉
  sub Page_Load(sender as Object, e as EventArgs)
    lblMessage.Text = “Hello, World!“
  end sub
〈/script〉

〈asp:label runat=“server“ id=“lblMessage“ /〉

    这里带有runat=”server”属性(类似于HTML标记)的lblMessage Web控件被放置在HTML中。然后，在Page_Load事件处理程序中（该事件处理程序在每次页面装载时被调用）lblMessage的Text属性被设置为”Hello World”。此处对于Web控件的使用，实现了代码和内容的分离。在传统的ASP中，需要将〈%=“Hello, World!“%〉放置在HTML中合适的位置才能达到同样的效果。

DataGrid基础

要在ASP.Net Web页面中加入DataGrid,只需执行如下代码：

〈asp:datagrid runat=“server“ id=“ID_of_DataGrid“ /〉
这里的id值将作为在服务器端代码中使用DataGrid的名称，我们通过将上述语法放置在HTML中来使用DataGrid。但是为了让DataGrid显示任何有用的信息，我们需要将DataGrid绑定到一些信息的集合。这些信息的集合可以是任何支持IEnumerable接口的对象。它包括Arrays,集合类(ArrayList ,Hashtable等)，Datasets和其它很多对象。由于希望集中精力显示数据库信息，因此在本文中我们仅关注将DataGrid绑定至Datareader。Datareader类似于传统ADO/ASP中顺序的(forward-only)记录集。(如需了解在ADO.Net中读取数据库结果至Datareaders中，请阅读Efficiently Iterating Through Results from a Database Query using ADO.NET )

    那么如何将数据绑定至DataGrid?其实出奇的简单。第一件事是提取数据库数据至datareader.对于本例，我使用ASPFAQs.com数据库，并且提取最受欢迎的10个问题。一旦将数据提取至datareader,将datareader绑定至DataGrid只需两行代码。第一行将DataGrid的Datasource属性设置为Datareader；第二行调用DataGrid的DataBind方法，代码如下所示：

〈% @Import Namespace=“System.Data“ %〉
〈% @Import Namespace=“System.Data.SqlClient“ %〉
〈script language=“vb“ runat=“server“〉
  Sub Page_Load(sender as Object, e as EventArgs)
    BindData()
  End Sub

  Sub BindData()
    ’1. Create a connection
    Dim myConnection as New SqlConnection(
          ConfigurationSettings.AppSettings(“connectionString“))

    ’2. Create the command object, passing in the SQL string
    Const strSQL as String = “sp_Popularity“
    Dim myCommand as New SqlCommand(strSQL, myConnection)

    ’Set the datagrid’s datasource to the datareader and databind
    myConnection.Open()
    dgPopularFAQs.DataSource = myCommand.ExecuteReader(
                              CommandBehavior.CloseConnection)
    dgPopularFAQs.DataBind()
  End Sub
〈/script〉

〈asp:datagrid id=“dgPopularFAQs“ runat=“server“ /〉

运行结果如下：

Simple DataGrid Demo
This demo shows how to bind the results of a query to an unformatted DataGrid.

FAQID
Description
ViewCount
SubmittedByName
Submitted

ByEmail
Date

Entered
CatName

144
Where can I host my ASP Web site for free (similar to GeoCities or Tripod or any of the many other free Web site sites)?
161056
Scott Mitchell
mitchell@4guysfromrolla.com
3/20/2001 2:53:45 AM
Getting Started

181
How can I format numbers and date/times using ASP.NET? For example, I want to format a number as a currency.
123888
Scott Mitchell
mitchell@4guysfromrolla.com
1/19/2002 3:12:07 PM
ASP.NET

…

    首先注意用于编写数据绑定的代码数量不多。我们创建一个连接，指定一个SQL命令(这里使用一个存储过程，sp_Popularity)，打开数据库连接，设定DataGrid的DataSource属性为Datareader，最后调用DataGrid的DataBind方法。这种做法完全将代码从内容分离，没有像在传统ASP中混合HTML表格和DataReader输出的语法。

    花些时间看一下运行结果。你会发现DataGrid使用HTML表格显示数据库内容，尽管并不美观。虽然我们完成了显示数据这一主要工作，但用户界面方面还有很多工作。幸运的是美化DataGrid的结果出奇的简单。遗憾的是需要等到下一篇文章中作介绍。

总结

    这是一系列关于DataGrid使用文章的一部分，我们研究了DataGrid最基本的功能:熟悉ASP.Net Web页面和显示绑定数据库结果。遗憾的是DataGrid的输出并不美观。但是我们不久会看到美化DataGrid的结果很简单。另外我们还将会在接下来的文章中看到更多用户界面的高级选项，如数据库结果的分页显示，DataGrid结果的排序和其它功能。

    在本文的第一部分，我们研究了如何设定DataGrid Web控件的显示属性以及如何通过样式设定DataGrid的页眉、页脚、行和交替行的显示。所有这些技术或是用于设定整个DataGrid的显示，或是用于设定DataGrid中行的显示。但是如何设定DataGrid中列的显示属性？其实并不难，接着读你就知道了。

设定哪些列应该显示

    缺省情况下DataGrid在生成的HTML表格中为SQL查询返回的每一列生成一个对应的列。但是在一些情况下仅希望在DataGrid中显示这些列中的一部分列。例如，在我正在进行的示例中，通过调用sp_Popularity存储过程显示了ASPFAQs.com最受欢迎的10个问题。它包含FAQID列，或许我并不希望显示该列。

    如果不想在DataGrid中显示数据库查询返回的所有列，必须显式地声明所有希望显示的列。第一步是将DataGrid的AutoGenerateColumns属性设为False。一旦执行完这个操作，就需要通过BoundColumn Web控件设定需显示的列，如下所示：

〈asp:DataGrid runat=“server“ AutoGenerateColumns=“False“〉
  〈Columns〉
    〈asp:BoundColumn DataField=“DatabaseColumnName1“ ... /〉
    〈asp:BoundColumn DataField=“DatabaseColumnName2“ ... /〉
    ...
    〈asp:BoundColumn DataField=“DatabaseColumnNameN“ ... /〉
  〈/Columns〉
〈/asp:datagrid〉
    对于每一个希望显示的列，需要通过一个包含DataField属性的〈asp:BoundColumn ... /〉标记来指定数据库中需要显示的列。所有这些BoundColumn标记必须包含在Column标记内。(也可通过编程的方式指定这些绑定列，但是它的可读性差，并且需要很多代码!)请注意只有通过BoundColumn标记指定的列才会在DataGrid中显示，你必须指定需要显示的列!

BoundColumn控件的优点在于它包含一些设定格式的属性，包括：

l        HeaderText — 设定列标题的文字。

l        FooterText — 设定列尾的文字(记住若要在DataGrid中显示页脚，应将ShowFooter设为True)。

l        HeaderStyle/FooterStyle/ItemStyle — 包含与DataGrid样式相同的属性。对设定列居中、前景色、背景色等很有用。

l        DataFormatString — 设置格式命令。(参考下面的示例；参考文档以获得全部的格式化规范)

    让我们看一下如何通过使用BoundColumn标记来进一步增强前面的示例。正如前面所提到的，我们不想显示FAQID或FAQCategoryID列，并且我们希望对数字列(ViewCount)和日期/时间列(DateEntered)设定格式。另外，我们希望数字列的值居中。这些均可通过几行易于阅读易于理解的代码完成：

〈asp:DataGrid runat=“server“ id=“dgPopularFAQs“
                BackColor=“#eeeeee“ Width=“85%“
                HorizontalAlign=“Center“
                Font-Name=“Verdana“ CellPadding=“4“
                Font-Size=“10pt“ AutoGenerateColumns=“False“〉
  〈HeaderStyle BackColor=“Black“ ForeColor=“White“
             Font-Bold=“True“ HorizontalAlign=“Center“ /〉
  〈AlternatingItemStyle BackColor=“White“ /〉

  〈Columns〉
    〈asp:BoundColumn DataField=“CatName“ HeaderText=“Category Name“  /〉
    〈asp:BoundColumn DataField=“Description“ HeaderText=“FAQ Description“ /〉
    〈asp:BoundColumn DataField=“ViewCount“ DataFormatString=“{0:#,###}“
           HeaderText=“Views“ ItemStyle-HorizontalAlign=“Center“ /〉
    〈asp:BoundColumn DataField=“SubmittedByName“ HeaderText=“Author“  /〉
    〈asp:BoundColumn DataField=“SubmittedByEmail“ HeaderText=“Author’s Email“  /〉
    〈asp:BoundColumn DataField=“DateEntered“ HeaderText=“Date Added“
                                              DataFormatString=“{0:MM-dd-yyyy}“  /〉
  〈/Columns〉
〈/asp:datagrid〉

实际运行结果如下：

Category Name
FAQ Description

Views
Date Added

Getting Started
Where can I host my ASP Web site for free (similar to GeoCities or Tripod or any of the many other free Web site sites)?
…
161,316
03-20-2001

ASP.NET
How can I format numbers and date/times using ASP.NET? For example, I want to format a number as a currency.

124,391
01-19-2002

Databases, Errors
I am using Access and getting a 80004005 error (or a [Microsoft][ODBC Microsoft Access Driver] The Microsoft Jet database engine cannot open the file ’(unknown)’ error) when trying to open a connection! How can I fix this problem?

108,374
01-17-2001

…

    如上例所示，上述代码指定了需要显示的特定列并且应用了特定的格式。请注意DataFormateString看上去很有趣。它的格式始终是{0:format string}。{0: …}指定通过格式化字符串(由…指定的)来格式化第一个参数(第一个参数指由DataReader返回的那个特定列的值)。在示例中我使用了格式化字符串#,###，它在每3个数字前加上一个逗号；格式化字符串MM-dd-yyyy指定通过月、日和年的格式显示日期/时间字段。

结论

    花一些时间看一下第一个示例(见DataGrid Web控件深度历险(1))和现在的示例。改进确实很大!请注意所有这些样式和用户界面的改进不需要写一行代码就可实现。我们只是在Web控件的标记中设定了一些属性！事实上如果你正在使用类似Visual Studio .Net的编辑器，你可通过点击一些按钮、选中一些复选框、选择列表框的一些项来设定格式化选项。想象一下在传统ASP中实现同样效果需要编写的那些冗长代码，那会使你爱上ASP.Net，如果你现在还没有的话。