ASPWebform上JavaScript中的甜蜜警報回應呼叫服務器功能-有解無憂

我想在我的 javascript 函式中根據用戶對 sweetalert 的回應呼叫服務器端函式。我嘗試使用非 ajax 功能，使用 2 個按鈕解決方案。一個按鈕顯示甜蜜警報，第二個按鈕稱為甜蜜警報。

HTML 代碼（2 個按鈕）：

<asp:Button runat="server" ID="DelUser" Text="" style="display:none;" OnClick="DeleteEvent"/>
<asp:Button ID="DeleteUser" runat="server" Text="Delete User" Width="122px" BackColor="#FF572D" Font-Bold="True"  OnClick="DeleteUser_Click" />

JS函式和sweetalert原始碼：

<script src="https://unpkg.com/[email protected]/dist/sweetalert.min.js"></script>  
<script type="text/javascript">

function delalert() {
   
    swal({
        title: "Are you sure?",
        text: "Are you sure that you want to delete this data?",
        icon: "warning",
        buttons:true,
        dangerMode: true,
    })
        .then(willDelete => {
            if (willDelete) {
                document.getElementById("DelUser").click();

            }
            else {
                swal("Safe!", "Your imaginary file is safe!", "success");
            }
        });
  
}

在我的服務器端代碼 (aspx.cs) 中：

       protected void DeleteUser_Click(object sender, EventArgs e)
    {
        ClientScript.RegisterStartupScript(this.GetType(), "Popup", "delalert()", true);
       
    }

    protected void DeleteEvent(object sender, EventArgs e)
    {
        Response.Write("ASSSSSDASDASDASDSDSD");
    }

Else 函式作業得很好，但是當我單擊確定時，它什么也沒顯示，DeleteEvent 沒有被呼叫。我該如何解決這個問題？

uj5u.com熱心網友回復：

根據我在這里找到的答案：參考鏈接

問題似乎在我的

document.getElementById("DelUser").click();

還有我參考的 HTML。所以解決方案是：

參考動態名稱

document.getElementById("<%= DelUser.ClientID %>").click();
在.NET4中我們可以使用 ClientIDMode="Static"

HTML代碼然后變成：

<asp:Button runat="server" ClientIDMode="Static" ID="DelUser" Text="" style="display:none;" OnClick="DeleteEvent"/>

并像以前的方法一樣呼叫： document.getElementById("DelUser").click();

無論哪種方式，它都會作業得很好。

uj5u.com熱心網友回復：

除了隱藏的按鈕選擇器之外，您所擁有的看起來還不錯。只需添加標簽 ClientIDMode="static"。

或者，你當然可以使用這個：

getElementById('<%= DelUser.ClientID %>');

但是，這倒退了。用戶沒有點擊服務器按鈕，然后你在后面的代碼中嘗試注入運行 js 對話框。

您不需要后面的代碼中的那部分 - 洗掉腳本暫存器。

但是，您可以在這里使用一個很好的技巧，因此只需要一個按鈕。

更好的是，您沒有對按鈕進行硬編碼。因此，理論上，您可以創建一個通用例程，甚至可以從背后的代碼中觸發。（但是，作為該設定的一部分，您必須傳遞按鈕才能單擊）。但是，讓我們一次處理一個問題。

我們知道，大多數 jQuery/js 對話框當然不會等待。所以，那么你就不能真正回傳真/假，因為js代碼運行，回傳值然后彈出對話框。所以，一個常見的解決方案當然是你的決斗按鈕和隱藏按鈕技巧。

但是，您實際上只需一個按鈕就可以完成這項作業，而且這里沒有太多的代碼更改。如前所述，獎勵積分，因為這還允許您使用/獲取/傳遞按鈕單擊的位置。

所以，假設這個按鈕點擊：

        <asp:Button ID="Button1" runat="server" Height="31px" Text="Button" Width="159px"
            OnClientClick="return delalert(this);"                
            />

請注意我如何不隱藏按鈕。您只需要一個按鈕。

但是，您的警報代碼現在變為：

    <script>
        var delalertok = false
        function delalert(btn) {

            if (delalertok) {
                delalertok = false
                return true
            }
            
            swal({
                title: "Are you sure?",
                text: "Are you sure that you want to delete this data?",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            })
                .then(willDelete => {
                    if (willDelete) {
                        delalertok = true;
                        btn.click();
                    }
                    else {
                        swal("Safe!", "Your imaginary file is safe!", "success");
                    }
                });
            return false;
        }

    </script>

請注意我們如何添加全域 delalertok。js 代碼的初始化僅在頁面加載時第一次運行。因此，我們設定該值 = false。

請注意我們如何傳遞按鈕 - 因此我們不需要更改同一頁面上不同按鈕的警報代碼。

還要注意例程的最后一行如何回傳 false。

還要注意如何通過傳遞按鈕，我們可以再次“單擊”它。

所以，你點擊你的按鈕。js 代碼運行，彈出對話框 - 回傳 false。服務器端按鈕未運行。

Note the dialog is popped up. If user hits ok, then your code stub runs, clicks the button, but BEFORE we click, we set that value = true. So now the click button runs again, it sees true in the first lines of the jscode, and thus your button will "now" get a return true - and will run the server side event.