datailsview控件

DetailsView控件可以一次显示一条数据记录。当需要深入研究数据库文件中的某一条记录时，DetailsView控件就可以大显身手了。DetailsView经常在主控/详细方案中与GridView控件配合使用。用户使用GridView控件来选择列，用DetailsView控件显示相关的数据。

DetailsView控件依赖于数据源控件的功能执行诸如更新、插入和删除记录等任务。DetailsView控件不支持排序，该控件可以自动对其关联数据源中的数据进行分页，但前提是数据由支持ICollection接口的对象表示或基础数据源支持分页。DetailsView控件提供了用于在数据记录之间导航的用户界面(UI)。若要启用分页行为，需要将AllowPaging属性设置为true。多数情况下，上述操作的实现无需编写代码。

【例8-9】使用DetailsView控件和GridView控件设计主控/详细方案，实现数据绑定、对数据源数据的分页显示、选择、编辑、插入和删除操作。具体步骤如下：

(1) 创建网站DataBindControl，添加一个名为DetailsView.aspx的页面。

(2) 添加数据库文件StudentDB.mdf,创建表studentinfo，表结构如图8-42所示。

 

（点击查看大图）图8-42  表studentinfo

(3) 在Web.config中添加代码，如下：

1. <connectionStrings> 

2.   <add name="StudentDBDataContext" connectionString="Data  

3. Source=.\SQLEXPRESS;AttachDbFilename=|
DataDirectory|\StudentDB.mdf;Integrated  

4. Security=True;User Instance=True"  

5.    providerName="System.Data.SqlClient" /> 

6.  </connectionStrings> 

(4) 在DetailsView.aspx页面的【设计】视图中添加一个SqlDataSource控件SqlDataSource1，并设置其连接的数据库为StudentDB，当指定Select查询时，选择"*"来查询所有列。

(5) 在DetailsView.aspx页面的【设计】视图中添加一个GridView控件GridView1，在【GridView任务】中的【选择数据源】下拉列表中选择SqlDataSource1，在【自动套用格式】中的【选择架构】列表中选择【彩色型】架构来显示和处理数据。选中菜单中的【启用选定内容】。设置GridView控件的DataKeyNames属性为"st_id"。这样就可以把GridView控件的选择值与第二个SqlDataSource关联起来。GridView控件支持一个SelectedValue属性，该属性指示GridView中当前选择的行。SelectedValue求值为DataKeyNames属性中指定的第一个字段的值。通过将AutoGenerateSelectButton设置为true，或者通过向GridView控件的Columns集合添加ShowSelectButton设置为true的CommandField可以启用用于GridView控件上的选择用户界面。然后GridView控件的SelectedValue属性可以与数据源中的ControlParameter关联，以用于查询详细记录。自动生成的代码如下。

1. <asp:GridView ID="GridView1" runat="server" 
AutoGenerateColumns="False" DataKeyNames="st_id" 

2.         DataSourceID="SqlDataSource1" CellPadding="4" 
ForeColor="#333333" 

3.                GridLines="None" AllowPaging="True" 
PageSize="5"> 

4.            <FooterStyle BackColor="#990000" 
Font-Bold="True" ForeColor="White" /> 

5.            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" /> 

6.         <Columns> 

7.             <asp:CommandField ShowSelectButton="True" /> 

8.             <asp:BoundField DataField="st_id" 
HeaderText="学号" ReadOnly="True" 

9.                 SortExpression="st_id" /> 

10.            <asp:BoundField DataField="st_name" HeaderText="姓名" 

11.                SortExpression="st_name" /> 

12.            <asp:BoundField DataField="st_sex" HeaderText="性别" 

13.                SortExpression="st_sex" /> 

14.            <asp:BoundField DataField="st_birthday" HeaderText="生日" 

15.                SortExpression="st_birthday" /> 

16.            <asp:BoundField DataField="st_city" HeaderText="所在城市" 

17.                SortExpression="st_city" /> 

18.        </Columns> 

19.           <PagerStyle BackColor="#FFCC66" ForeColor="
#333333" HorizontalAlign="Center" /> 

20.           <SelectedRowStyle BackColor="#FFCC66" Font-
Bold="True" ForeColor="Navy" /> 

21.           <HeaderStyle BackColor="#990000" Font-Bold="
True" ForeColor="White" /> 

22.           <AlternatingRowStyle BackColor="White" /> 

23.</asp:GridView> 

(6) 在DetailsView.aspx的【设计】视图中再添加一个SqlDataSource数据源控件，其ID默认为"SqlDataSource2"，设置其连接的数据库为StudentDB，当指定Select查询时，选择"*"来查询所有的字段。单击【WHERE】按钮添加Where子句，在【添加Where子句】对话框中，将【列】、【运算符】、【源】和【控件ID】分别选择为"st_id"、"="、"Control"和"GridView1"，如图8-48所示。单击【配置Select语句】对话框中的【高级】按钮，在弹出的对话框中选中【生成INSERT、UPDATE和DELETE语句】复选框，这样就可以启用DetailsView控件的插入、更新和删除功能了。自动生成的代码如下。

1. <asp:SqlDataSource ID="SqlDataSource2" runat="server" 

2.             ConnectionString="<%$ ConnectionStrings
:StudentDBConnectionString %>" 

3.             SelectCommand="SELECT * FROM [studentinfo]
WHERE ([st_id] = @st_id)"> 

4.             <SelectParameters> 

5.                 <asp:ControlParameter ControlID=
"GridView1" Name="st_id" 

6.                     PropertyName="SelectedValue" Type="String" /> 

7.             </SelectParameters> 

8. </asp:SqlDataSource> 

(7) 在DetailsView.aspx的【设计】视图中添加一个DetailsView控件DetailsView1，在【DetailsView任务】中选择数据源为"SqlDataSource2"。在【自动套用格式】对话框中的【选择架构】列表中选择【石板】架构的样式来显示和处理数据如图8-43。

 

图8-43  【自动套用格式】对话框

自动生成的代码如下：

1. <asp:DetailsView ID="DetailsView1" runat="server" 

2.         AutoGenerateRows="False" BackColor="White" 
BorderColor="#3366CC" 

3.         BorderStyle="None" BorderWidth="1px" 
CellPadding="0" DataKeyNames="st_id" 

4.         DataSourceID="SqlDataSource2" Height="50px" Width="193px"> 

5.         <FooterStyle BackColor="#99CCCC" ForeColor="#003399" /> 

6.         <RowStyle BackColor="White" ForeColor="#003399" /> 

7.         <PagerStyle BackColor="#99CCCC" ForeColor="
#003399" HorizontalAlign="Left" /> 

8.         <Fields> 

9.             <asp:BoundField DataField="st_id" 
HeaderText="学号" ReadOnly="True" 

10.                SortExpression="st_id" /> 

11.            <asp:BoundField DataField="st_name" HeaderText="姓名" 

12.                SortExpression="st_name" /> 

13.            <asp:BoundField DataField="st_sex" HeaderText="性别" 

14.                SortExpression="st_sex" /> 

15.            <asp:BoundField DataField="st_city" HeaderText="所在城市" 

16.                SortExpression="st_city" /> 

17.            <asp:CommandField ShowDeleteButton="True" 
ShowEditButton="True" /> 

18.        </Fields> 

19.        <HeaderStyle BackColor="#003399" Font-Bold
="True" ForeColor="#CCCCFF" /> 

20.        <EditRowStyle BackColor="#009999" Font-Bold
="True" ForeColor="#CCFF99" /> 

21.    </asp:DetailsView> 

(8) 保存网站，运行程序，在运行过程中，可以单击GridView网格中的【选择】链接，此时，DetailsView控件中该显示该记录的全部数据项，如图8-44所示。单击DetailsView控件中的【编辑】按钮将显示如图8-45所示的页面。

 

图8-44  浏览器中的主控/详细方案的选择页面

 

 

图8-45  浏览器中的主控/详细方案的编辑页面

从本例可以看出，在设计主控/详细视图的网页时，并不需要编写代码，就可以实现非常复杂的数据浏览、编辑、插入、更新和删除操作。这就是ASP.NET数据控件带来的便利，使得Web数据库编程成为非常简单的任务。