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

Question

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

在脚本标签中：

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">

网格视图按钮：

<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 和大多数网络代码这些天是非阻塞的。 这意味着 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 回发并使用回发参数传递行索引。 （这意味着在页面加载事件中，您将选择此后备份 - 您可以谷歌 _dopostback()。

另请注意，OnClickClick 前面不需要“脚本”。

但是，以上应该有效。

所以，请记住：

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

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

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

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

Answer 2

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

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