9.5 DetailsView控件
DetailsView控件主要用来从与它联系的数据源中一次显示、编辑、插入或删除一条记录。通常,它将与GridView控件一起使用在主/详细方案中,GridView控件用来显示主要的数据目录,而DetailsView控件显示每条数据的详细信息。
DetailsView控件提供了如表9-7所示的属性。
表9-7 DetailsView控件的常用属性
(续表)
默认情况下,在DetailsView控件中一次只能显示一行数据,如果有很多行数据的话,就需要使用GridView控件一次或分页显示。不过,DetailsView控件也支持分页显示数据,即,把来自数据源的控件利用分页的方式一次一行地显示出来,有时一行数据的信息过多的话,利用这种方式显示数据的效果可能会更好。
如果要启用DetailsView控件的分页行为,则需要把属性AllowPaging设置为true,而其页面大小则是固定的,始终都是一行。当启用DetailsView控件的分页行为时,则可以通过PagerSettings属性来设置控件的分页界面。
DetailsView控件提供了如表9-8所示的常用方法。
表9-8 DetailsView控件的方法
DetailsView控件提供的常用事件如表9-9所示。
表9-9 DetailsView控件的事件
(续表)
DetailsView控件本身自带了编辑数据的功能,只要把属性AutoGenerateDeleteButton、AutoGenerateInsertButton和AutoGenerateEditButton设置为true就可以启用DetailsView控件的编辑数据的功能,当然实际的数据操作过程还是在数据源控件中进行。
【实例9-4】DetailsView的使用
本实例通过SqlDataSource控件、GridView控件和DetailsView控件的结合使用,实现主从表查询,并且在DetailsView控件完成编辑和删除数据的操作。
01 启动Visual Studio 2012,创建一个ASP.NET Web空应用程序,命名为“实例9-4”。
02 在“实例9-4”中创建一个名为Default.aspx的窗体。
03 单击网站的目录下的Default.aspx文件,进入“视图编辑”界面,打开“设计视图”,从工具箱中拖动一个DetailsView控件、一个GridView控件和一个SqlDataSource数据源控件。
04 配置SqlDataSource1控件的数据源绑定tb_News数据表。
05 在DetailsView控件控件右上方有一个向右的黑色小三角,单击这个小按钮打开“DetailsView任务”列表,展开“选择数据源”下拉列表,从中选择SqlDataSource1选项。
06 这时DetailsView1控件的外观会根据SqlDataSource1控件中设置的属性发生如图9-21所示相应的变化。接着选中“DetailsView任务”列表中的“启用编辑”、“启用分页”、和“启用删除”4个复选按钮。
图9-21 DetailsView任务列表
07 在“DetailsView任务”列表中选择“自动套用格式”。弹出自动套用格式对话框。单击“选择架构”列表中的“蓝黑2”选项,然后单击“确定”按钮。
08 在“DetailsView任务”列表中选择“编辑字段”选项,进入“字段”对话框,设置DetailsView控件中4个列字段新闻编号、新闻标题、新闻类别和发布时间以及要绑定的数据库表字段的值。最后设计好DetailsView控件界面如图9-22所示。
图9-22 DetailsView控件界面
09 在GridView控件右上方有一个向右的黑色小三角,单击这个小按钮打开“GridView任务”列表,展开“选择数据源”下拉列表,从中选择SqlDataSource1选项。然后单击“GridView任务”列表中“编辑列”,进入图9-23所示的“字段”对话框。展开“可用字段”列表中的CommandField,在选项中单击“选择”选项,单击“添加”按钮。在“选定的字段”列表中单击“选择”选项,在右边的“CommandField属性”列表中显示可以设置的相关的属性。这里设置ShowSelectButton属性为True。最后单击“确定”按钮。
图9-23 “字段”对话框
10 在GridView控件的“属性”窗口中设置AllowPaging属性为true、PageSize属性为3、AutoGenerateColumns属性为false。
11 单击网站根目录下的【Default.aspx.cs】,在打开【Default.aspx.cs】文件的中添加如下代码:
上面的代码中第1行处理GridView1控件的SelectedIndexChanged1事件。第2行将控件中选择行数据项的索引作为DetailsView1的页面索引。
12 按快捷键Ctrl+F5运行程序,如图9-24所示。页面中上面的主列表是GridView1控件,下面的是从列表DetailsView1控件。
图9-24 运行结果1
13 单击图9-24所示主表数据行中第三条数据后的“选择”按钮,从表显示相关数据行的详细信息,然后,单击从表下的“编辑”按钮,每一列可编辑的数据都以文本框的形式出现,这样用户就可以修改其中的数据。输入如图9-25所示更新内容。如果想取消更新操作可以单击“取消”按钮,回到图9-24所示的界面。如果确认要进行修改数据的操作,就单击“更新”按钮,更新数据后的结果如图9-26所示。
图9-25 运行结果3
图9-26 运行结果3