ASP.Net GridView 按钮上的 JqueryUI 确认对话框

Question

我有一个带有用于删除数据行的按钮的 Gridview。我正在尝试通过 jQueryUI 对话框实现模式弹出窗口，以便在单击“删除数据”后提示用户，如果他们单击是，则该行将被删除，如果否，则没有任何反应。似乎如果我不向 onClientClick 添加“return false”，则无论单击按钮，该行都会被删除。如果我包含 return false，我不确定如何让 gridviewrow 命令实际发生。以下是一些当前的 sn-ps：

在脚本标签中：

function ShowPopup() {
        $(function () {
            var message = "Are you sure you want to Remove Data?";
            $("#dialog").html(message);
            $("#dialog").dialog(
                {
                    title: "Data Removal Confirmation",
                    buttons: {
                        Yes: function () {
                            return true;
                        },
                        No: function () {
                            $(this).dialog('close');
                            
                        }
                    },
                    modal: true
                });
        });
    }

对话区：

<div id="dialog" style="display: none">

Gridview 按钮：

<asp:TemplateField HeaderText="Reject">
                        <ItemTemplate>
                            <asp:Button
                                ID="btnRemove"
                                runat="server"
                                Text="Remove Data"
                                CssClass="inherited, RemoveData"
                                CommandName="RemoveData"
                                Style="white-space: normal;"
                                 OnClientClick="javascript: ShowPopup();return false;"
                                CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" />
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center"></ItemStyle>
                    </asp:TemplateField>

代码隐藏：

else if (e.CommandName == "RemoveData")
                        {
                            
                            
                            int affected = 0;
                            affected = DAL.RemoveFileUploadItem((Guid)Session["UserId"], UploadId.ToString());
                            BindAll();
                            gv_PostUpload.DataSource = null;
string FileName = UploadId.ToString() + "-" + gvDashboard.DataKeys[index]["FileName"].ToString();
                            string mypath = Path.Combine(Global.data_directory, @"Watch"); // Server.MapPath("~/Data/Watch/");
                            string totalfn = Path.Combine(mypath, FileName);
                            if (File.Exists(totalfn))
                                File.Delete(totalfn);
DAL.LogActivity("Attempt removing file " + gvDashboard.DataKeys[index]["FileName"].ToString(), Utilities.GetCurrentPageFromURL(), Session["UserId"].ToString());
                            int affected = 0;
                            affected = DAL.RemoveFileUploadItem((Guid)Session["UserId"], UploadId.ToString());                                        
                            if (affected != 0)
                            {
                                DAL.LogActivity(gvDashboard.DataKeys[index]["FileName"].ToString() + " removed ", Utilities.GetCurrentPageFromURL(), Session["UserId"].ToString());
                            }
                            BindAll();
                            gv_PostUploadZ.DataSource = null;
                            plnView.Visible = false;
                            plnViewZ.Visible = false;
                            plnErrorView.Visible = false;
                        }

以下是根据@albert-d-kallal 的回答修改后的按钮：

<asp:TemplateField HeaderText="Reject">
                        <ItemTemplate>
                            <asp:Button
                                ID="btnRemove"
                                runat="server"
                                Text="Remove Data"
                                CssClass="inherited, RemoveData"
                                CommandName="RemoveData"
                                
                                CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" />
                        </ItemTemplate>
                        <ItemTemplate>
                        <asp:Button
                        ID="btnRemove2" ClientIDMode="Predictable"
                        runat="server"
                        Text="Remove Data"
                        CssClass="inherited, RemoveData"
                        Style="white-space: normal;"
                        OnClientClick='<%# "ShowPopUp(" + ((GridViewRow) Container).RowIndex + ");return false;" %>' />
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center"></ItemStyle>
                    </asp:TemplateField>

经过上述修改，这是我现在在检查按钮时看到的 n 个浏览器工具：

<input type="submit" name="ctl00$mainContent$gvDashboard$ctl02$btnRemove2" value="Remove Data" onclick="ShowPopUp(0);return false;" id="ctl00_mainContent_gvDashboard_ctl02_btnRemove2" class="inherited, RemoveData" style="white-space: normal;">

Answer 1

好的，首先？ 这些天 jQuery.ui 和 MOST Web 代码是非阻塞的。这意味着 jQuery.UI 对话框不会停止代码。几乎所有代码都运行 - 并且运行时没有阻塞（异步）。

所以，如果你使用除了 alert() 对话框之外的任何东西，你就不能阻止代码，并返回 true 或 false。

那么，该怎么办？

嗯，这意味着我们必须显示对话框，然后在用户做出选择之后，我们必须触发/触发/单击/运行代码来执行删除。

因此，我建议您的删除按钮不运行更改的行索引，并执行该代码。理论上，您会说通过单击将一些 PK 行值传递给 js。使用 jQuery 对话框获取是/否，然后调用一些代码进行删除。

因此，该按钮不能真正返回真/假，然后允许按钮代码（服务器端）运行。

我可以想到很多方法来做到这一点。但是，您可以欺骗网格，并在您确定是（确定）或取消之后让 jQuery “单击”按钮。

这在很大程度上意味着我们需要一个“不同”按钮。但是，我们可以“隐藏”现有的删除按钮（但将其保留在原处），并将我们的 javascrip 按钮放在该按钮的正下方。

所以，让我们用 style="display:none" 隐藏你的按钮（仅供参考 - 不能使用可见，因为这意味着浏览器永远不会呈现按钮）。

那么，让我们这样做：

<asp:TemplateField>
<ItemTemplate>
    <asp:Button
    ID="btnRemove"
    runat="server"
    Text="Remove Data"
    style="Display:none"
    CommandName="RemoveData"
    CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" />
</ItemTemplate>
</asp:TemplateField>

所以我们设置了 button = none 的样式（它不会显示）。我还删除了 CssClass - 再次因为按钮是“隐藏的”，我们不在乎。

现在，让我们点击我们真正点击的按钮！

让我们把它放在标记的正下方：

<asp:TemplateField>
<ItemTemplate>
<asp:Button
ID="btnRemove2"
runat="server"
Text="Remove Data"
CssClass="inherited, RemoveData"
Style="white-space: normal;"
OnClientClick='<%# "ShowPopUp(" + Container.DisplayIndex.ToString + ");return false;" %>'
</ItemTemplate>
</asp:TemplateField>

所以，上面是一个虚拟按钮 - 注意 return = false;我们不希望它运行任何服务器端代码 - return = false 意味着不会发生回发。

但是，请注意一件大事？我们将行索引传递给该点击事件。

所以，我们的 jQuery.ui 对话框现在看起来像这样：

      function ShowPopUp(ix) {
            var message = "Are you sure you want to Remove Data?";
            var mydiv = $('#dialog');
            mydiv.html(message);
            mydiv.dialog({
                autoOpen: false, modal: true, title: 'Data Removal Confirmation', width: '30%',
                position: { my: 'top', at: 'top+150' },
                buttons: {
                    'Yes': function () {
                        // first, close the dialog
                        $('#dialog').dialog('close');
                        btn = $('#GridView1_btnRemove_' + ix.toString());
                        btn.click();
                    },
                    'No': function () {
                        $('#dialog').dialog('close');
                    }
                }
            });
            // Open the dialog
            mydiv.dialog('open');
        }

Note how now we have code for the ok, and cancel buttons.
Note how we have to close the dialog.

请注意最后一个大人物 - 我们根据行选择按钮，然后单击它。

现在，我不确定以上是否是最好的。我可能会考虑不使用假按钮单击 - 可能已经完成了 js 回发并使用回发参数传递行索引。 （这意味着在页面加载事件中，您将选择此帖子备份 - 您可以 google _dopostback()。

还要注意 OnClickClick 前面不需要“脚本”。

但是，以上应该可以。

所以，请记住：

jQuery.ui 代码是非阻塞的——它不会等待。当您调用它时，它会正常运行，然后显示对话框 - 代码不会停止，也不会被阻塞。因此，我们无法返回 true 或 false（以允许服务器端代码运行）。

如果 jQuery.ui 对话框被阻塞，则可以使用 true/false 的返回 - 但该代码不会阻塞/等待。

但是，通过传递行索引，我们可以选择隐藏按钮，然后 click() 触发它。如前所述，在这里“接近一个kluge”的想法有点好。然而，既然你知道现有的代码可以工作，这就是我在这里使用按钮点击技巧的原因。

我使用 GridView1 作为网格名称 - 将其更改为您正在使用的名称。

Answer 2

好的，这有点老套，但我可以使用上面@albert-d-kallal 的一些建议，但必须想出一些其他代码，将正确的 rowindex 值锚定到实际连接的按钮上到 .Net 事件处理程序。我只是通过使“假/隐藏”按钮具有行索引的文本值来做到这一点。为了隐藏 .Net 为该按钮创建的列，我不得不使用一些自定义 CSS。这是最终的代码sn-ps：

JS：

function ShowPopUp(ix) {
        $(function () {
            var message = "Are you sure you want to Remove Data?";
            var mydiv = $('#dialog');
            mydiv.html(message);
            mydiv.dialog(
                {
                    //autoOpen: false,
                    title: "Data Removal Confirmation",
                    modal: true,
                    width: '30 %',
                    position: { my: 'top', at: 'top+150' },

                    buttons: {
                        Yes: function () {
                            // first, close the dialog
                            $('#dialog').dialog('close');
                            btn = $("[id$=btnRemove]")[ix.toString()];
                            btn.click();
                        },
                        No: function () {
                            $('#dialog').dialog('close');
                        }
                    },
                    
                });
        });
    }

按钮的项目模板：

<asp:TemplateField ControlStyle-CssClass="visiblyHidden" FooterStyle-CssClass="visiblyHidden" HeaderStyle-CssClass="visiblyHidden" ItemStyle-CssClass="visiblyHidden" HeaderText="">
                        <ItemTemplate>
                            <asp:Button
                                ID="btnRemove"
                                runat="server"
                                Text='<%#  ((GridViewRow) Container).RowIndex + "" %>'
                                CssClass="inherited, RemoveData"
                                CommandName="RemoveData" 
                                
                                CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" />
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center"></ItemStyle>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Reject" FooterStyle-CssClass="rejectHideLeftBorder" HeaderStyle-CssClass="rejectHideLeftBorder" ItemStyle-CssClass="rejectHideLeftBorder">
                        
                        <ItemTemplate>
                        <asp:Button
                        ID="btnRemove2" 
                        runat="server"
                        Text="Remove Data"
                        ClientIDMode="Static"
                        Style="white-space: normal;"
                        OnClientClick='<%# "ShowPopUp(" + ((GridViewRow) Container).RowIndex + ");return false;" %>' />
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center"></ItemStyle>
                    </asp:TemplateField>

CSS：

.visiblyHidden {
width: 0 !important;
padding: 0 !important;
border: 0 !important;
}
 .rejectHideLeftBorder {
border-left: 0 !important;
}