使用 PageMethods 時不調用 function

Question

我正在嘗試使用客戶端 function 調用服務器端 function。我到處都看到人們使用 AJAX，這看起來很簡單。 但是當我嘗試調用該方法時，它所做的只是重新加載頁面。

.aspx 代碼：

<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true"></asp:ScriptManager>

<button id="test" onClick="ButtonClick(this.id)">test</button>

<script>
function ButtonClick(id) {
    PageMethods.ButtonClickMethod(id);
}
</script>

.cs 代碼：

public partial class TestPage : System.Web.UI.Page
{
   [WebMethod]
   public static void ButtonClickMethod(string id)
   {
       System.Diagnostics.Debug.WriteLine("id = " +id);
   }
}

我在控制台中沒有得到 output。

我試圖查看幾個來源，但它們看起來都與我正在嘗試的相同。

Answer 1

好的，我們在這里混淆了兩件事。

您可以采用“頁面”方法，它們比 JavaScript 中的“ajax”調用更容易使用。

因此，讓我們以兩種方式調用您的新頁面方法（但是，它們與按鈕點擊無關）。 或者更好地說，如果您想要單擊按鈕來觸發/啟動/使用/運行頁面方法，那么該按鈕將/需要/使用/要求在客戶端 JavaScript 代碼中單擊按鈕。

所以，首先（我只是先做這個例子），因為我從來沒有抽出時間使用頁面方法。

所以，首先，你的頁面方法不是點擊按鈕，而是后面代碼中的代碼存根。

一些事情要記住：

雖然這些頁面方法相當酷，但從那時起您就沒有完整的瀏覽器回發和完整的所謂“往返”，它們有相當大的缺點。

最大的缺點是因為 web 頁面“保留”在客戶端瀏覽器（和桌面）上，所以后面的代碼不會使用 web 頁面上的控件。 這意味着如果后面的代碼需要對值進行操作，則必須將值傳遞給 web 方法。

如果您要更新 web 頁面上的控件，那么客戶端代碼必須再次更新控件。

因此，假設我們要將華氏溫度轉換為攝氏溫度。

因此，我們在文本框中輸入溫度。 下面是轉換結果的另一個文本框，當然還有一個簡單的簡按鈕來運行我們的代碼。

所以，我們有這個標記：

        <h3>Tempature Converter</h3>
        <div style="width:20%;text-align:right">
        Enter Fahrenheit: <asp:TextBox ID="txtF" runat="server" ClientIDMode="Static"></asp:TextBox>
        <br />
        Result as C:<asp:TextBox ID="txtC" runat="server" ClientIDMode="Static"></asp:TextBox>
        <br />
            <asp:Button ID="Button1" runat="server" Text="Convert" CssClass="btn"
                OnClientClick="myconvert();return false"
                />
        </div>
        
        <script>

            function myconvert() {

                var F = $('#txtF').val()
                $.ajax({
                    type: "POST",
                    url: "FtoC.aspx/FarToCel",
                    data: JSON.stringify({Fvalue : F}),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (returnstuff) {
                        $('#txtC').val(returnstuff.d)
                    },
                    error: function (xhr, status, error) {
                        var errorMessage = xhr.status + ': ' + xhr.statusText
                        alert('Error - ' + errorMessage)
                    }
                });
            }

        </script>

請注意我們是如何放入一個簡單的 jane asp.net 按鈕的。 但是，我們使用客戶端點擊事件（並返回 false，因此沒有回發頁面）。

我還假設（使用）jQuery，因為撥打這樣的 ajax 電話更容易退出。

背后的代碼是這樣的：

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static  double FarToCel(double Fvalue)
    {
        double C = (Fvalue - 32) / 1.8;
        return C;
    }

因此結果是這樣的：

所以，整個想法（這里的整個目標）是我們因此不會受苦，也不會有整個頁面回發。 因此，您不會看到任何瀏覽器“旋轉”或頁面回發 + 往返。

現在，我們當然可以使用“頁面方法”來做同樣的事情。

所以，讓我們在上面放置另一個按鈕，並使用頁面方法。

首先，我們必須放入一個腳本管理器。

所以，就在頂部（就在表單標簽之后），然后是：

    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">

    </asp:ScriptManager>

現在讓我們放在第一個按鈕下面，我們的第二個按鈕，我們的按鈕代碼如下所示：

            <asp:Button ID="Button2" runat="server" Text="Convert (page method example)" CssClass="btn"
                OnClientClick="myconvert2();return false"
                />

客戶端 js function 現在是這樣的：

            function myconvert2() {
                var F = $('#txtF').val()
                PageMethods.FarToCel(F,allgood)
            }

            function allgood(myresponse, userContext, methodName) {
                $('#txtC').val(myresponse)
            }

所以，第二種方法肯定是更少的布線。 當然我們可以跳過使用 jQuery（或者我們可能沒有），並使用純 js 代碼。 所以，頁面方法肯定更簡單一些，因為我們真的根本不需要 jQuery 代碼。

在純 js 代碼中（沒有 jQuery 快捷方式），那么我們的第二個例子就變成了這樣：

            <asp:Button ID="Button2" runat="server" Text="Convert (page method example)" CssClass="btn"
                OnClientClick="myconvert2();return false"
                />

       <script>

            function myconvert2() {
                var F = document.getElementById("txtF").value
                PageMethods.FarToCel(F,allgood)
            }

            function allgood(myresponse, userContext, methodName) {
                tBoxC = document.getElementById("txtC")
                tBoxC.value = myresponse
            }

   </script>

因此，再一次，然后是：

所以，毫無疑問，如果您沒有/使用 jQuery，那么頁面方法會更容易使用。

公平地說，即使是 jQuery，頁面方法仍然不費力。

因此，頁面方法仍然需要您在客戶端代碼中調用一些 js function，並且在某些情況下，這不一定是單擊按鈕的結果，但在大多數情況下我想它會是。