在 GridView 中添加删除功能并使用 jQuery UI 对话框进行确认

• 下载源代码 - 537 KB

引言

您正在使用 GridView 网页控件从特定的数据源列出记录，并且您希望为每行数据实现删除功能。必须向用户显示一个对话框以确认删除。在从数据源删除记录时也可能发生错误，您希望在发生错误时向用户显示一个对话框。

解决方案

细微之处：此示例使用了（Microsoft）Northwind 数据库的 Product 表。GridView 网页控件通过 ObjectDataSource 网页控件获取数据。ObjectDataSource 通过一个强类型的中层对象获取数据 (SelectMethod)，该对象封装了一个调用存储过程的数据层对象。您不必使用 ObjectDataSource 控件来删除数据源中的项，也可以使用 SQLDataSource 等。

1. 初始化 jQuery UI 对话框插件。

$(function () {
    InitializeDeleteConfirmation();
});

function InitializeDeleteConfirmation() {
    $('#deleteConfirmationDialog').dialog({
        autoOpen: false,
        resizable: false,
        height: 140,
        modal: true,
        buttons: {
            "Delete": function () {
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
}

2. 在 GridView 中添加一个 TemplateField。在模板字段内，添加一个 ImageButton。

<asp:TemplateField>
   <ItemStyle Width="30px" HorizontalAlign="Center" />
      <ItemTemplate>
         <asp:ImageButton ID="IBtnDelete" runat="server" ToolTip="Click to delete"
        CommandArgument='<%# Eval("ProductID") %>'
        OnClientClick="javascript:return deleteItem(this.name, this.alt);"
        ImageUrl="~/Images/Delete.png" AlternateText='<%# Eval("ProductID") %>'
        CommandName="Delete" />
      </ItemTemplate>
</asp:TemplateField>

上面的代码通过 ImageButton 的 AlternateText 属性传递产品 ID。单击按钮时，它将调用一个名为 deleteItem 的客户端 JavaScript 函数。deleteItem 函数向用户显示对话框。请参见下面的截图和代码。



function deleteItem(uniqueID, itemID) {
    var dialogTitle = 'Permanently Delete Item ' + itemID + '?';
 
    $("#deleteConfirmationDialog").html('<p><span class="ui-icon " + 
      "ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>" + 
      "Please click delete to confirm deletion.</p>');
 
    $("#deleteConfirmationDialog").dialog({
        title: dialogTitle,
        buttons: {
            "Delete": function () { __doPostBack(uniqueID, ''); 
                      $(this).dialog("close"); },
            "Cancel": function () { $(this).dialog("close"); }
        }
    });
 
    $('#deleteConfirmationDialog').dialog('open');
    return false;
}

单击对话框中的删除按钮时，将执行回发，然后关闭对话框。否则，对话框将仅关闭而无需进一步操作。当单击删除 ImageButton 导致回发时，GridView 会将 Delete 命令 (CommandName="Delete") 以及产品 ID (CommandArgument='<%# Eval("ProductID") %>') 值发送到 ObjectDataSource 控件。

3. ObjectDataSource 将查找一个名为 Delete 的静态方法（C# 中的静态方法，VB.NET 中的共享函数），该方法接受一个名为 ProductID 的参数。该函数或方法位于 Northwind.BusinessObject.Products 对象中。这将删除特定记录。

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    TypeName="Northwind.BusinessObject.Products"
    SelectMethod="SelectAll" SortParameterName="sortExpression"
    DeleteMethod="Delete" ondeleted="ObjectDataSource1_Deleted">
    <DeleteParameters>
        <asp:Parameter Name="ProductID" Type="Int32" />
    </DeleteParameters>
</asp:ObjectDataSource>

以下是一个示例 Delete 函数

public static void Delete(int productID) 
{ 
    ProductsDataLayer.Delete(productID); 
}

4. 在 ObjectDataSource 调用 Deleted 方法后，将触发 ondeleted 事件。我们可以在此处检查项目删除过程中的任何错误。代码片段如下。

protected void ObjectDataSource1_Deleted(object sender, 
          System.Web.UI.WebControls.ObjectDataSourceStatusEventArgs e)
{
    Functions.ObjectDataSourceDeleted(sender, e, this.Page);
}

public static void ObjectDataSourceDeleted(object sender, 
       System.Web.UI.WebControls.ObjectDataSourceStatusEventArgs e, Page page)
{
    if (e.Exception != null)
    {
        // show delete error
        string errorMessage = 
          Functions.RemoveSpecialChars(e.Exception.InnerException.Message);
        ScriptManager.RegisterStartupScript(page, page.GetType(), "err_msg", 
             "ShowError('" + errorMessage + "');", true);
        e.ExceptionHandled = true;
    }
}

发生错误时，我们调用一个名为 ShowError 的 JavaScript 函数，并将 errorMessage 传递给它。请参见下面的截图。注意：我们删除了特殊字符，以防止我们的客户端脚本出错。

function ShowError(errorMessage) {
    $(document).ready(function () {
        $("#deleteErrorDialog").html(errorMessage);
        $("#deleteErrorDialog").dialog({
            modal: true,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
}

最后的话

要运行下载的代码，请确保下载并安装 Microsoft 的 Northwind 数据库。还要确保在 App_Code 文件夹下的 Helper 文件夹中找到的 Dbase.cs (Dbase.vb) 类文件中更改用户名和密码。下载的代码是 AspxFormsGen 4.0 生成的网页窗体的修改版本。

原始文章可以在 这里 找到。

演示

单击此处查看演示.

一如既往，代码和文章按“原样”提供，绝对没有任何保证。请自行承担使用风险。

编码愉快！！！