在一些回發之前檢查條件

在我的場景中，我在頁面中有很多 asp.net 按鈕。在客戶端呈現時，每個 asp.net 按鈕都具有如下結構：

<button onclick="__doPostBack('ctl00$...ID','')" type="button" class=".."></button>

頁面中的某些按鈕有一個特殊的類，這意味著該按鈕將導致表單驗證：

<button onclick="__doPostBack('ctl00$...ID','')" type="button" class=".. require-validation"></button>

在僅在這些按鈕上運行常規 onclick 函式之前，我想執行一個 javascript 函式來驗證表單。如果可能的話，我只想在客戶端使用 jQuery 更改這種行為（這樣服務器端我只需用適當的類標記按鈕）。

如果我嘗試使用“require-validation”類來定位（使用jQuery）所有按鈕并附加驗證功能（這將抑制提交事件），那么事情會起作用，但只是有時。

這里是驗證函式示例：

$("myOnlyPageForm").find(".require-validation").click(function (e) {
            if ( trikyValidationFail() )
                e.preventDefault();
        });

我的理解是，帶有“require-validation”的按鈕現在附加了兩個不同的事件，因此單擊會觸發它們，并且不能保證順序。所以有時它會阻止常規回發，但有時不會（在我的測驗中，總是第一次阻止回發，但即使驗證總是失敗，第二次點擊也會導致回發）。

所以到目前為止，我只能考慮完全重寫 onclick 代碼（使用 jQuery），所以它會變成：

<button onclick="trikyValidationFail() ?__doPostBack('ctl00$...ID','') : false" type="button" class=".. require-validation"></button>

但我不確定這是否可行，也不知道如何實作

uj5u.com熱心網友回復：

任何平面 jane asp.net 按鈕都可以同時具有客戶端 (JavaScript) 單擊事件和服務器端事件。

因此，假設我們有一個按鈕，并且想要確認洗掉操作。

  <asp:Button ID="cmdDelete" runat="server" Text="Server delete prompt" 
     OnClientClick="return confirm('Really delete this file?');"  />

因此，如果 ClientCick 回傳 true，則將觸發服務器端按鈕事件。如果 ClientClick 事件回傳 false，則不會觸發服務器端按鈕事件。

因此，對于每個按鈕，該函式可以簡單地回傳 true 或 false。

所以，按鈕代碼服務器端可以是這樣的：

Protected Sub cmdDelete_Click1(sender As Object, e As EventArgs) Handles cmdDelete.Click

    Response.Write("<h2> This is the server side delete run code</h2>")
    ' real delete code follows

End Sub

因此，以上將根據客戶端例程回傳 true 或 false 有條件地運行服務器端。

現在，您必須小心，因為這些天經常有一大堆 JavaScript 代碼例程異步運行。（js代碼不要等待）。

例如，我想彈出一個 jQuery.UI 對話框（代替那些看起來很糟糕的確認）。

因此，我們可能會呼叫一個 jQuery.UI 對話框，如下所示：

        <asp:Button ID="cmdTest" runat="server" Text="Server Delete Prompt" ClientIDMode="Static"
            OnClientClick="return mytest2ok(this)"/>
        <br />

        <div id="MyDialog" style="display:none">
            <h2>my cool dialog text</h2>
            <h2>This delete operation can't be undone</h2>
        </div>

    <script>

        var mytest2ok = false
        function mytest(cmdBtn) {
            if (mytest2ok) {
                return true
            }

            myDialog = $("#MyDialog")
            myDialog.dialog({
                title: "Delete the whole server system",
                modal: true,
                appendTo: "form",
                autoOpen: false,
                buttons: {
                    ok: function () {
                        myDialog.dialog('close')
                        mytest2ok = true
                        $(cmdBtn).click()
                    },
                    cancel: function () {
                        myDialog.dialog('close')
                    }
                }
            })

            myDialog.dialog('open')
            return false
        }

    </script>

現在，當我單擊按鈕時，我得到了這個：

現在，在上面，注意非常接近 - 當我單擊服務器按鈕時，客戶端代碼運行，顯示對話框，代碼失敗并回傳 false ！！！

現在，當我單擊確定時，在客戶端對話框中，我設定我的標志 = true 并再次單擊按鈕 (jquery.Click())。所以現在點擊按鈕，客戶端js再次運行，回傳true，然后我的服務器端按鈕代碼運行。

所以，雖然這是 100% 簡單的規則：

 If client click event returns true  - sever side code event runs
 if client click even returns false - server side code event does NOT run

The only real time you get in trouble, is for calling or using some js code that does not halt, and as a result, you can't even using async (await), or even say a promise in js - it will STILl fall through. So in those cases, you either have the js code run, and then call a button or server side code, or in "many" cases, you can use the above true/false flag trick, and pass the button (this) to the js routine, and if it is to return true, set a flag, and click the button again in js, and the button click runs again, and with a true return value, server side code runs.

標籤：jQuery 网 回发

上一篇：在Jquery中獲取資料屬性的值

下一篇：如何在時間選擇器中反轉范圍？