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

LinkButton的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;
}

单击 LinkButton 时，将显示对话框和取消初始回发的函数 returns false。如果随后通过单击 Process 关闭对话框，则使用 LinkButton 的 UniqueID 调用 __doPostBack 以引起回发。

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

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

ASP.NET GridView: Confirm button click postback with jQueryUI dialog

asp.net

jquery-ui

linkbutton

gridviewrow

jquery-ui-dialog