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

时间:2016-07-27 23:37:04

标签: asp.net jquery-ui jquery-ui-dialog linkbutton gridviewrow

我希望有人可以帮我解决这个问题。我到处寻找还有一个可以帮助我的例子。我觉得我非常亲近......

我有一个asp:gridview,每行末尾有一个linkbutton。我需要在运行onrowcommand之前进行确认对话。这是我必须要做的代码......我错过了什么?

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。我只是不知道如何在模态对话框中获取Process按钮以触发命令...我在这里缺少什么?

提前致谢。

1 个答案:

答案 0 :(得分:2)

LinkBut​​ton的OnClientClick属性可以在GridView的RowDataBound事件处理程序中设置,按钮的UniqueID作为confirmProcessing的参数:< / p>

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的__doPostBack调用UniqueID以进行回发。

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