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

原文 | 下载本教程中的编码例子 | 下载本教程的PDF版

导言

如我们在综叙：在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.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里的删除按钮时，这个属性可以通过声明语言或编程来设置。如我们本章看到的那样。

祝编程愉快!

 

posted on 2006-11-27 10:42  有些伤感  阅读(3231)  评论(14)  编辑  收藏  举报
Copyright © 2024 有些伤感
Powered by .NET 9.0 on Kubernetes Powered by: 博客园