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所示。
(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。
自动生成的代码如下:
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所示的页面。
从本例可以看出,在设计主控/详细视图的网页时,并不需要编写代码,就可以实现非常复杂的数据浏览、编辑、插入、更新和删除操作。这就是ASP.NET数据控件带来的便利,使得Web数据库编程成为非常简单的任务。