组合ASP.NET 2.0数据控件构建强大用户接口

2022-07-15 80酷酷网 80kuku.com

　　asp.net|接口|控件|数据

在前面的几个专栏中，我们分别介绍了ASP.NET 2.0中的几个数据控件：, , 和。本文，我将结合这几个数据控件对GridView控件做一个详细的介绍，使用户能够对每个数据行获得一个详细的了解。

主要控件

DetailsView 和 FormView控件在显示后端数据源中的单个记录时功能强大，但是强迫用户在一页中显示无数条记录这很不现实。为此，我们可以将GridView控件和DetailsView或FormView控件结合在一起，来让用户从GridView控件中选择单个列，然后利用DetailsView或FormView控件来浏览或操纵其中的内容。因此，GridView是主要控件，而细节则是通过其他控件显示的。

这种方法的第一步是设法可以选择GridView控件中的单个行（例如，可以允许用户选择一行显示在其它控件中）。此外，GridView控件的SelecterStyle属性可以显式的设定所选行的风格，从而用户知道或可以很容易的记住当前选择的是哪一行。

可以使用一个命令域来辅助行选择。CommandField对象的ShowSelectButton属性使得该对象成为行选择的对象。CommandField的ButtonType属性允许你控制如何进行选择，当选定一行时，GridView控件的DataKeyName属性指名分配给选定项的值，该值可能通过选择事件传递给其他控件。

当单击GridView中某行的选择按钮时，随即发生返回且更新GridView的SelectedRow属性。除了SelectedRow属性外，GridView控件还提供了SelectedIndex、SelectedValue、和SelectedDataKey属性。SelectedIndex属性返回选定行的索引，而SelectedValue和SelectedDatakey属性返回基于GridView的DataKeyNames属性的值。

细节

既然已经设定好主要的GridView控件，下一步就可以添加一个DetailsView或FormView控件来显示选定行中的数据。在我们的例子中，DetailsView控件将被添加到GridView所在的页面中。此外，DetailsView需要一个数据源，因此要求另外一个SQL Server数据源。我们想显示GridView控件中选定行中的数据，所以需要传递所选行的ID。

演示GridView控件与其它数据控件相结合应用的最好方式就是利用实例代码。下面的GridView控件连接到SQL Servcer，显示Northwind数据库中数据。这里使用了三个控件：DropDownList、GridView和DetailsView。

用户可以使用DropDownList控件指定加载到GridView控件中的数据。用户选择某个“城市”，响应员工的数据就被加载。因此，当在GridView控件中通过显示为链接标签的命令按钮选择了某个记录后，指定员工的详细信息将会显示在DetailsView控件中。同时，选定行呈黄色高亮状态，从而用户可以容易的识别选择的是哪一行。

代码中使用了三个SqlDataSource对象用于为每个控件加载数据。GridView控件使用了来自DropDownList控件的SQL中的选定值，这是通过将来自DropDownList控件的值利用SqlDataSource控件的SelectParameters属性传递给SQL的。见如下所示。

<asp:SqlDataSource ID="ds" runat="server" SelectCommand="SELECT EmployeeID, LastName, FirstName, Region FROM Employees WHERE (City=City)" ConnectionString="Server=localhost;Database=Northwind;Trusted_Connection=true">

<SelectParameters>

<asp:ControlParameterControlID="DropDownList1" Name="City" PropertyName="SelectedValue" Type="String" />

</SelectParameters>

</asp:SqlDataSource>

你可以使用ControlParameter对象通过指定你想使用的数据的ID和属性来获得表单上其它控件中的数据。同时，当传递SelectedValue属性时，键值也通过ControlParameter对象从GridView传递到DetailView控件。GridView中选定行的SelectedValue使用指定给GridView控件的DataKeyNames值被赋值。此外，为了从控件获得数据，你还可以使用来自QuerySring，cookies和很多其它选项的数据。

<% Page Language="C#" %>

<html>

<head id="Head1" runat="server">

<title>Master-Detail Page Example</title>

</head><body>
<form id="frmMasterDetail" runat="server">

<b>Select a city:</b>

<asp:DropDownList ID="DropDownList1" DataSourceID="SqlDataSource2" AutoPostBack="true"
DataTextField="City" runat="server" />

<asp:SqlDataSource ID="SqlDataSource2" runat="server" SelectCommand="SELECT DISTINCT City FROM Employees"

ConnectionString="Server=localhost;Database=Northwind;Trusted_Connection=true" />

<asp:GridView ID="GridView1" AllowSorting="True" AllowPaging="True" runat="server"
DataSourceID="SqlDataSource1" DataKeyNames="EmployeeID"
AutoGenerateColumns="False" Width="427px" PageSize="10" BackColor="#c0c0c0"
BorderColor="black" Border BorderWidth="5" Caption="GridView Example">

<SelectedRowStyleBackColor="yellow" />

<Columns>

<asp:CommandFieldShowSelectButton="True" />

<asp:BoundFieldDataField="EmployeeID" HeaderText="ID" ReadOnly="True" SortExpression="EmployeeID" />

<asp:BoundFieldDataField="LastName" HeaderText="Last" SortExpression="LastName" />

<asp:BoundFieldDataField="FirstName" HeaderText="First" SortExpression="FirstName" />

<asp:BoundFieldDataField="Region" HeaderText="Region" SortExpression="Region" />

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" SelectCommand="SELECT EmployeeID, LastName, FirstName, Region FROM Employees WHERE (City=City)"

ConnectionString="Server=localhost;Database=Northwind;Trusted_Connection=true">
<SelectParameters>
<asp:ControlParameterControlID="DropDownList1" Name="City" PropertyName="SelectedValue" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
<asp:DetailsViewAutoGenerateRows="False" DataKeyNames="EmployeeID" 
DataSourceID="SqlDataSource3"
HeaderText="Employee Details" ID="DetailsView1" runat="server" Width="275px">
<Fields>
<asp:BoundFieldDataField="EmployeeID" HeaderText="ID" ReadOnly="True" />
<asp:BoundFieldDataField="LastName" HeaderText="Last" />
<asp:BoundFieldDataField="FirstName" HeaderText="First" />
<asp:BoundFieldDataField="Region" HeaderText="Region" />
</Fields>
</asp:DetailsView>
<asp:SqlDataSource ConnectionString="Server=localhost;Database=Northwind;Trusted_Connection=true" ID="SqlDataSource3"

runat="server" SelectCommand="SELECT EmployeeID, LastName, FirstName, Region FROM Employees WHERE (EmployeeID = EmployeeID)">
<SelectParameters>
<asp:ControlParameterControlID="GridView1" Name="EmployeeID" PropertyName="SelectedValue" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</form></body></html>

中包括了拥有三个控件和用于数据加载的对象全部源代码，本例演示了使用数据控件操纵数据而不用编写任何代码。每个控件提供了大量的事件可用来为这些事件编写代码实现本文的同样任务和更多其它任务。

更多强大接口

ASP.NET 2.0包括大量以GridView为代表的数据控件，我们使用这些控件可以很容易地显示来自后端数据源中的数据。你还可以将GridView控件和其它的像DetailsView或FormView控件结合起来使用来操纵更多的数据对象，以及在一个表单域或单独一个表单中显示要编辑或浏览的数据。