ASP.NET GridView：使用 jQueryUI 对话框确认按钮单击回发

Question

我希望有人能帮我解决这个问题。我环顾四周，还没有找到对我有帮助的例子。我有一种感觉，我在这方面非常接近......

我有一个 asp:gridview，每行末尾都有一个链接按钮。在运行 onrow 命令之前，我需要做一个确认对话框。这是我必须做的代码......我错过了什么？

function confirmProcessing(event) {
    event.preventDefault();

    $("#dialog")
        .dialog({
            title: "Confirm Transaction",
            buttons: {
                "Process": function () {                                        
                    $("#dialog").dialog('close');

                },
                Cancel: function() {
                    $("#dialog").dialog('close');
                    return false;
                }
            },
            close: function() {                            
                return false;
            },
            modal: true,
            appendTo: "form"

        })
        .parent()
        .css('z-index', '1005');

}

aspx 代码

<div class="row">
    <asp:GridView runat="server" ID="ccList" CssClass="table table-striped table-responsive" ShowHeader="True" AutoGenerateColumns="False" OnRowDataBound="ccList_OnRowDataBound" OnRowCommand="ccList_OnRowCommand">
        <Columns>
            <asp:BoundField DataField="Street" ItemStyle-CssClass="Street" HeaderText="Street"/>
            <asp:BoundField DataField="ZipCode" ItemStyle-CssClass="ZipCode" HeaderText="Zip"/>
            <asp:BoundField DataField="MB4P" ItemStyle-CssClass="MB4P" HeaderText="MB4P"/>
            <asp:BoundField DataField="MB4S" ItemStyle-CssClass="MB4S" HeaderText="MB4S"/>
            <asp:BoundField DataField="BAL" ItemStyle-CssClass="BAL" HeaderText="BAL"/>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton runat="server" ID="btnProcess" OnClientClick="confirmProcessing(event);" Text="Process Payment" CommandName="Process" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>"/>    
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

<div id="dialog" style="display:none">        
    <b>Are you sure you want to process this record?</b>
</div>

OnRowCommand 代码

protected void ccList_OnRowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "Process")
    {
        //Do the processing stuff here after confirm dialog.
    }        
}

如果我删除了 preventDefault，它会触发到预期的 OnRowCommand。我只是不知道如何让模式对话框中的“进程”按钮触发命令......我在这里错过了什么？

提前致谢。

Answer 1

LinkBut​​ton的OnClientClick属性可以在GridView的RowDataBound事件处理函数中设置，按钮的UniqueID作为confirmProcessing的参数：

protected void ccList_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        LinkButton btnProcess = e.Row.FindControl("btnProcess") as LinkButton;
        btnProcess.OnClientClick = string.Format("return confirmProcessing('{0}');", btnProcess.UniqueID);
        ...
    }
}

然后可以如下修改 Javascript 事件处理程序：

function confirmProcessing(btnUniqueID) {
    $("#dialog").dialog({
        title: "Confirm Transaction",
        buttons: {
            "Process": function () {
                $("#dialog").dialog('close');
                __doPostBack(btnUniqueID, '');
            },
            Cancel: function () {
                $("#dialog").dialog('close');
                return false;
            }
        },
        close: function () {
            return false;
        },
        modal: true,
        appendTo: "form"

    }).parent().css('z-index', '1005');

    return false;
}

当点击 LinkBut​​ton 时，将显示对话框并且函数返回false 以取消初始回发。如果随后通过单击 Process 关闭对话框，则使用 LinkBut​​ton 的 UniqueID 调用 __doPostBack 以导致回发。

注意：我认为UniqueID 可以在name 属性的帮助下在客户端代码中检索。它适用于 Button 控件，但不适用于 LinkBut​​ton。这就是为什么我建议在代码隐藏中设置OnClientClick 属性。