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