ASP.NET 2.0数据教程之四十二 为删除数据添加客户端确认
导言
如我们在综叙:在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的声明代码看起来应该如下:
<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
相关的代码如下:
{
int productID = Convert.ToInt32(Products.DataKeys[e.Item.ItemIndex]);
ProductsBLL productsAPI = new ProductsBLL();
productsAPI.DeleteProduct(productID);
Products.DataBind();
}
第三步: 为删除按钮添加客户端确认
完成DeleteCommand事件处理后,最后的工作是为删除按钮添加客户端确认。这个可以通过声明语言或编码完成。最简单的方法是通过Button的OnClientClick
属性来指定确认的声明语言。然而如果确认的信息或逻辑在运行时才能决定,那么我们可以在ItemDataBound事件处理里引用Delete button然后编程设置它的OnClientClick属性。
我们下面将探讨这两种方法。首先是声明语言的方法。仅仅只需要设置Button的OnClientClick属性为return confirm(message).比如将确认信息指定为“Are you certain that you want to delete this product?”,你可以按如下修改删除按钮的声明语言。
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。
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Northwind.ProductsRow product = (Northwind.ProductsRow)((System.Data.DataRowView)e.Item.DataItem).Row;
Button db = (Button)e.Item.FindControl("DeleteButton");
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里的删除按钮时,这个属性可以通过声明语言或编程来设置。如我们本章看到的那样。