一.
DetailsView 控件:
可能的各类控件字段如下所示:
- BoundField字段:把该字段绑定到下层数据源的一个数据项,并显示该数据。
- ButtonField字段:显示一个按钮。
- CheckBoxField字段:显示复选框。
- CommandField字段:显示命令按钮。
- HyperLinkField字段:显示URL链接。
- ImageField字段:以图片方式显示下层数据。
- TemplateField字段:用来为数据元素自定义显示格式。
清单 C使用了BoundField类型的字段,并通过指定的用户标签(custom label)有选择地显示来自SQL服务器数据源的数据。同时,这个示例还用到了删除、编辑,和更新按钮选项,这通过设定下面这些DetailsView对象的属性实现。
- AutoGenerateDeleteButton属性:该属性的数据类型是布尔值,指定是否显示删除按钮。关联数据连接的DeleteCommand属性用来执行选中记录的删除工作。
- AutoGenerateInsertButton属性:该属性的数据类型是布尔值,指定是否显示插入按钮。关联数据连接的InsertCommand属性用来执行新记录的插入工作。
- AutoGenerateEditButton属性:该属性的数据类型是布尔值,指定是否显示编辑按钮。选择这个按钮会把记录转入编辑模式,并且显示一个更新按钮,用来保存更改。关联数据连接的UpdateCommand属性用来保存对后端数据源所作的更改。
注意:EmployeeID字段不能编辑,因为它作为下层数据表(table)中的主关键字(primary key),其只读(ReadOnly)标记被设置成了“true”。
TemplateField类型的字段提供了更多对DetailsView数据控件中数据字段的控制方法。通过它,当数据被编辑、查看,或者添加新的数据时,你都可以控制这个字段的外观和行为。以下这些元素用来控制这些行为。
- EditItemTemplate元素:当前DetailsView记录在编辑模式时控制这个字段的外观。
- InsertItemTemplate元素:当有新记录添加到下层数据源时,确定这个字段将如何显示。
- ItemTemplate元素:在用户查看时确定字段该如何显示。
Formview 控件:你可以通过微软网站在线查看一个更加全面的FormView控件属性列表。下表列出了一些值得关注的重要属性。
- AllowPaging:一个说明用户能否对指定数据源中的记录分页的布尔值。如果设为真,则在所显示记录的底部显示默认的分页数字系统(从1到记录的数量)。分页链接可以通过各种分页属性自定义。
- DataKeyNames:数据源的键字段。
- DataSourceID:用来移植FormView控件数据源元素ID。如果使用SQL Server,它与分配给SqlDataSource元素的ID对应。
- DefaultMode:允许你指定控件的默认行为。也就是说,在用户访问时,它最初如何显示。可能的值包括:ReadOnly、Insert和Edit。
- EmptyDataText:遇到空数据值时显示的文本。
宣称FormView控件时,还必须对它的内容进行相应格式化。它的数据通过模板显示。FormView控件主要使用五个模板:
- ItemTemplate:它控制用户查看数据时的显示情况。
- EditItemTemplate:它决定用户编辑记录时的格式和数据元素的显示情况。在这个模板内,你将使用其它控件,如TextBox元素,允许用户编辑值。
- InsertItemTemplate:与编辑一条记录相似,这个模板控制允许用户在后端数据源中添加一条新记录的字段的显示。由于输入了新的值,应该根据数据的要求允许用户自由输入文本或限制某些值。
- FooterTemplate:决定FormView控件表格页脚部分显示的内容,如果有的话。
- HeaderTemplate:决定FormView控件表格标题部分显示的内容,如果有的话。
二.
DetailsView控件的替代品是FormView控件。该控件完全使用模板,因此,它可以提供更好的数据外观。
DetailsView和FormView均从CompositeDataBoundControl类继承而来。因此,它们几乎所有属性都是相同的,在表9-8中列出了这些属性(唯一差别在于FormView没有AlternatingRowStyle属性)。
为介绍FormView控件,下一个示例是显示Products表的详细信息,并根据用户从下拉列表中选择的产品来导航到指定记录。
首先,向网站添加一个名为Products的页面。
从工具箱中拖动一个DropDownList控件到页面上,将其ID设置为ddlProducts。切换到“Design”视图,将注意到打开了智能标签,选择“New Data Source”项。在这个示例中,将新数据源命名为NorthWindProductsDataSource。可以使用已有连接,选择“Product Name”(用于显示)和“Product ID”(用于识别选中了哪个产品),如图9-28所示。
图9-28:Data Source Configuration向导
在属性窗口或者智能标签中选中“Enable AutoPostBack”,这样可以保证当用户在下拉列表中选择后,页面将立即被回传给服务器处理。须运行应用程序来测试下拉列表是否被正
确填充,如图9-29所示。选择一个产品,看一看页面是否回传,以及当页面重绘时是不是用选中的产品填充下拉列表。
图9-29:测试下拉列表
当DropDownList控件工作后,将FormView控件拖动到表单上。使用智能标签创建一个新数据源,命名为NorthWindProductsDetailsDataSource。选中须显示的产品明细,如图9-30所示。
图9-30:设置产品数据源
您只须为用户选择的产品显示产品明细数据。单击“WHERE”按钮以便设置WHERE子句参数,此时将弹出“Add WHERE Clause”对话框。设置列为ProductID,源为Control。
设置ControlID为控件名称,单击“Add”来添加WHERE从句,如图9-31所示。
图9-31:添加下拉列表的WHERE从句
您需要控件支持插入、删除和更新记录。单击“Advanced”按钮,选中“Generate Insert, Update and Delete statements”(生成Insert、 Update、Delete语句),单击“OK”按钮。
与DetailsView不同,FormControl的显示完全由模板控制。可以用标准的ASP.NET和HTML控件来修改模板。在编辑模板之前编辑页面,在标题中键入:Form View Display,将其设置为一级标题。
<h1> Form View Display</h1>
下一步,打开智能标签(或者右击控件),选择“Edit Templates”。第一个需要编辑的模板是一个ItemTemplate。这可以单击模板框,抓住改变大小的句柄让它变得更宽更高。
单击顶部的“Item Template”,多按几次回车,这样可以空出一些空间,然后键入标题,例如,Product Details。选中标题,使用工具栏将其设置为二级标题,如图9-32所示。
之前所做的只不过是把控件堆在模板中,大多数web设计师会使用表格来控制布局,您也可以在模板中使用表格。
单击菜单项 “Layout”>“Insert Table”。在“Insert table”对话框中,设置“Custom Layout”为5行(分别用于显示Stock中的ProductID、ProductName、UnitPrice、Units和 Edit/Delete/New按钮),设置两列(一列用于显示,一列用于放置Label)。设置单元格的宽度为50像素,单元格高度为30像素,如图9 -33所示。
图9-32:设置ItemTemplate标题
图9-33:Insert Table对话框
为ProductID设置提示,在左上单元格中输入ID。单击并拖动ProductIDLabel控件到右上的单元格中。您已精确放置了第一行。
类似地,拖动ProductNameLabel控件到第二行右边的单元格,并在左边的单元格中放一个提示(Product:)。对剩下的label控件也做同样的事。
为了让提示右对齐,单击左侧的列使之高亮,在Properties(属性)窗口中设置Align属性。扩展右侧的列(使之高亮,然后拖动该列),这样可以为较长产品名称留出空间,如图9-34所示。
图9-34:编辑产品的ItemTemplate
当把模板设置为想要的样子之后,单击智能标签,选择“End Editing Templates”。
检查源代码,使用向导完成的一切都会在代码中反映出来,您可以直接编辑源代码:
<asp:FormView runat="server"
ID="FormView1"
DataSourceID="NorthWindProductsDetailsDataSource"
DataKeyNames="ProductID"
Width="410px">
在FormView中(在上面的开始标签中和文件后面的结束标记之间),会找到一系列的ItemTemplate。第一个ItemTemplate设定了当第一次看到它时(未编辑时)的外观:
<ItemTemplate>
<h2>Product Details</h2>
<table>
<tr>
<td style="width: 120px" align="right">
ID:
</td>
<td style="width: 391px">
<asp:Label ID="ProductIDLabel" runat="server"
Text='<%# Eval("ProductID") %>' />
</td>
</tr>
<tr>
<td style="width: 120px" align="right">
Product:
</td>
<td style="width: 391px">
<asp:Label ID="ProductNameLabel" runat="server"
Text='<%# Bind("ProductName") %>' />
</td>
</tr>
<tr>
<td style="width: 120px" align="right">
Price:
</td>
<td style="width: 391px">
<asp:Label ID="UnitPriceLabel" runat="server"
Text='<%# Bind("UnitPrice") %>' />
</td>
</tr>
<tr>
<td style="width: 120px; height: 40px" align="right">
Units in stock:
</td>
<td style="width: 391px; height: 40px">
<asp:Label ID="UnitsInStockLabel" runat="server"
Text='<%# Bind("UnitsInStock") %>' />
</td>
</tr>
<tr>
<td style="width: 120px; height: 21px" align="right">
</td>
<td style="width: 391px; height: 21px">
<asp:LinkButton ID="NewButton"
runat="server" Text="New"
CommandName="New" />
<asp:LinkButton ID="EditButton"
runat="server" Text="Edit"
CommandName="Edit" />
<asp:LinkButton ID="DeleteButton"
runat="server" Text="Delete"
CommandName="Delete" />
</td>
</tr>
</table>
</ItemTemplate>