ASP.NET 2.0数据教程之四十二 为删除数据添加客户端确认

导言

如我们在综叙：在DataList里编辑和删除数据里看到的，为DataList添加删除功能可以通过以下完成：

1. 在ItemTemplate里添加Button, LinkButton, 或ImageButton 
2. 将Delete button的 CommandName 设为“Delete”
3. 在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: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

相关的代码如下:

protected void Products_DeleteCommand(object source, DataListCommandEventArgs e)
{    
    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?”，你可以按如下修改删除按钮的声明语言。

<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。

 

protected void Products_ItemDataBound(object sender, DataListItemEventArgs e)
{
    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里的删除按钮时，这个属性可以通过声明语言或编程来设置。如我们本章看到的那样。