Scott Mitchell 的ASP.NET 2.0数据教程之四十二::为删除数据添加客户端确认
原文 | 下载本教程中的编码例子 | 下载本教程的PDF版
导言
如我们在综叙：在DataList里编辑和删除数据 里看到的，为DataList添加删除功能可以通过以下完成：
- 在ItemTemplate里添加Button, LinkButton, 或ImageButton
- 将Delete button的
CommandName设为“Delete” - 在DeleteCommand事件处理里调用合适的BLL delete 方法 (然后重新绑定数据，来让刚删除的项不再在DataList里显示).
对用户而言，上面的过程是点一个项的删除按钮，引起postback，然后删除选顶的项并从DataList里移除它。当用户点删除按钮时，还缺少确认的步骤。如果一个用户想点编辑按钮，而不小心点到了删除，那么他原本想更新的记录会被删除掉。为了防止这样的情况发生，我们可以在删除按钮被点时添加一个客户端的确认。
JavaScrip confirm(string) function将输入参数string作为文本显示在一个包含两个按钮- OK 和Cancel - 的对话框里，见图1。confirm(string) function根据被点的button返回一个Boolean 类型的值（如果点OK则返回true，点Cancel则返回false）。
图 1: 客户端对话框
在提交form的过程中，如果客户端事件处理返回一个false，浏览器将取消提交。使用这个特性，我们可以让删除按钮的客户端onclick事件处理返回调用 confirm("Are you certain that you want to delete this product?")的值。如果用户点取消，confirm(string)会返回false，这样提交就会被取消。没有引起postback，因此被点删除按钮的product也不会被删除。如果用户点了OK按钮，postback会继续记性，product会被删除。更多的信息参考Using JavaScript’s confirm() Method to Control Form Submission
本章我们将学习如果为DataList的删除按钮加上这样的客户端确认。
注意：使用客户端确认，比如本章讨论的，需要假设你的用户使用支持js的浏览器并且开启了js支持。如果没有的话，点删除按钮会马上引起postback（不显示确认对话框）并删除记录。
第一步: 创建一个包含删除按钮的 DataList
在学习如何添加客户端确认前，我们需要一个记录可以被删除的DataList。先打开EditDeleteDataList文件夹下的ConfirmationOnDelete.aspx页，拖一个DataList进来，将ID设为Products。然后从智能标签里创建一个名为ProductsDataSource的ObjectDataSource。用ProductsBLL类的GetProducts()配置它。见图2。由于我们将在DeleteCommand事件处理里直接调用BLL来执行删除，因此在INSERT, UPDATE, 和 DELETE 标签里都选择"(None)"，见图3。
图 2: 配置 ProductsDataSource
图 3: 在INSERT, UPDATE, 和 DELETE 标签里选择“(None)”
完成了这些配置后，Visual Studio 会为DataList生成默认的ItemTemplate— 每个数据字段以Label来显示值。修改ItemTemplate让它只显示product的name，category和supplier。然后添加一个删除按钮，并将CommandName属性设为“Delete”。完成这些修改后，DataList和ObjectDataSource的声明代码看起来应该如下：
| ASP.NET | |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<asp:DataList ID="Products" runat="server" DataKeyField="ProductID" DataSourceID="ProductsDataSource"> <ItemTemplate> <h3> <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>' /> </h3> Category: <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> <br /> Supplier: <asp:Label ID="SupplierNameLabel" runat="server" Text='<%# Eval("SupplierName") %>' /> <br /> <br /> <asp:Button runat="server" ID="DeleteButton" CommandName="Delete" Text="Delete" /> <br /> <br /> </ItemTemplate> </asp:DataList> <asp:ObjectDataSource ID="ProductsDataSource" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetProducts" TypeName="ProductsBLL"> </asp:ObjectDataSource> |
图 4 是浏览该页的样子。由于还没有创建DeleteCommand事件处理，这时点删除按钮仅仅只引起postback而不会影响别的。
图 4: 显示每个Product的 Name, Supplier, Category 和Delete Button
第二步: 添加DeleteCommand Event Handler
当用户点删除按钮时，引起postback，激发ItemCommand和DeleteCommand。ItemCommand事件在每次DataList里引起Command事件时激发。DeleteCommand事件是由于引起Command事件的button的CommandName被设为“Delete”而被激发。
为了删除被点了删除按钮的记录，我们需要：
- 创建
DeleteCommand事件处理 - 获取被点删除按钮的项的
ProductID - 调用
ProductBLL类的DeleteProduct方法 - 重新绑定数据到 DataList
相关的代码如下。对代码的详细解释请参考综叙：在DataList里编辑和删除数据 。
| C# | |
1 2 3 4 5 6 7 8 9 10 11 12 |
protected void Products_DeleteCommand(object source, DataListCommandEventArgs e) { // Read in the ProductID from the DataKeys collection int productID = Convert.ToInt32(Products.DataKeys[e.Item.ItemIndex]); // Delete the data ProductsBLL productsAPI = new ProductsBLL(); productsAPI.DeleteProduct(productID); // Rebind the data to the DataList Products.DataBind(); } |
第三步: 为删除按钮添加客户端确认
完成DeleteCommand事件处理后，最后的工作是为删除按钮添加客户端确认。这个可以通过声明语言或编码完成。最简单的方法是通过Button的OnClientClick property来指定确认的声明语言。然而如果确认的信息或逻辑在运行时才能决定，那么我们可以在ItemDataBound事件处理里引用Delete button然后编程设置它的OnClientClick属性。
我们下面将探讨这两种方法。首先是声明语言的方法。仅仅只需要设置Button的OnClientClick属性为return confirm(message).比如将确认信息指定为“Are you certain that you want to delete this product?”，你可以按如下修改删除按钮的声明语言。
| ASP.NET | |
1 2 |
<asp:Button runat="server" ID="DeleteButton" CommandName="Delete" Text="Delete" OnClientClick="return confirm('Are you sure you want to delete this product?');" /> |
现在点删除按钮会显示一个确认对话框，见图5。只有在用户点OK的情况下，postback才发生并且product被删除。
图 5: 点Delete Button 会显示一个客户端对话框
注意：如果传给confirm function的字符串里有分隔符号，我们需要使用“\”来进行转义。也就是说，如果你的字符串为“You’re sure you want to do this?”你需要写成return confirm('You\'re sure you want to do this?');.
在显示静态确认对话框时声明的方式非常好。如果需要逐项的自定义确认信息，我们需要通过编程来设置这个属性。DataList的ItemDataBound事件在每条记录绑定到DataList后激发。我们需要引用删除按钮，并编程来根据绑定到DataList的项的数据来设置它的OnClientlick属性。下面的代码解释了如何在确认信息里包含product的name。
| C# | |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
protected void Products_ItemDataBound(object sender, DataListItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { // Reference the data bound to the DataListItem Northwind.ProductsRow product = (Northwind.ProductsRow)((System.Data.DataRowView)e.Item.DataItem).Row; // Reference the Delete button Button db = (Button)e.Item.FindControl("DeleteButton"); // Assign the Delete button's OnClientClick property db.OnClientClick = string.Format("return confirm('Are you sure that you want to delete" + " the product {0}?');", product.ProductName.Replace("'", @"\'")); } } |
由于ItemDataBound事件在所有行绑定到DataList时都被激发— 包括header, footer, 和separator items —所以首先保证我们处理的是item 或alternating item非常重要。然后我们获取DataListItem的DataItem属性，它包含了一个ProductsRow实例的引用。最后通过FindControl("controlID")引用删除按钮，并给确认信息赋值。注意product的name里的分隔符号都被转义了。
完成这些后，浏览页面。现在点删除按钮，确认信息里会包含product的name。图6是当点Chai Tea的删除按钮时的输出。
图 6: 确认对话框里包含Product的Name
总结
JavaScript confirm(string) function 通常被用来控制form提交的流程。当执行时，这个函数显示一个客户端的模式对话框，它包含两个button， OK 和Cancel。如果用户点OK ，confirm(string) function会返回true。点Cancel 会返回false。这个功能和浏览器在提交过程里有任何的事件处理返回false的话就取消提交的行为串联起来，可以用来在删除记录时显示确认对话框。
confirm(string) function 可以通过Button控件的OnClientClick属性和Button的客户端onclick事件处理关联。当处理DataList里的删除按钮时，这个属性可以通过声明语言或编程来设置。如我们本章看到的那样。
祝编程愉快!