在ASP.NET WebForms中使用jQuery調用'WebMethod'

Question

我在下面的WebMethod設置了一個斷點，但我從來沒有遇到斷點。

CS：

[WebMethod]
public static string search()
{
    return "worked";
}

ASPX：

  function search() {
    $.ajax({
        type: "POST",
        url: "ProcessAudit/req_brws.aspx/search",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            alert(msg)
        }
    });
}

<button id = "btnSearch" onclick = "search()" >Search</button>

Answer 1

確保在ScriptManager元素中啟用了頁面方法：

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

並且您已通過在onclick處理程序中返回false取消了該按鈕的默認操作，否則該頁面將執行完整的回發，並且您的AJAX調用可能永遠沒有時間完成。 這是一個完整的工作示例：

<%@ Page Language="C#" %>
<script type="text/c#" runat="server">
[System.Web.Services.WebMethod]
public static string search()
{
    return "worked";
}
</script>

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="Form1" runat="server">
        <asp:ScriptManager ID="scm" runat="server" EnablePageMethods="true" />
        <button id="btnSearch" onclick="search(); return false;" >Search</button>
    </form>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        function search() {
            $.ajax({
                type: 'POST',
                url: '<%= ResolveUrl("~/default.aspx/search") %>',
                data: '{ }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                    alert(msg.d)
                }
            });
        }
    </script>
</body>
</html>

另一種可能性是不引人注意地訂閱點擊處理程序：

<button id="btnSearch">Search</button>

然后在一個單獨的javascript文件中：

$('#btnSearch').click(function() {
    $.ajax({
        type: 'POST',
        url: '<%= ResolveUrl("~/default.aspx/search") %>',
        data: '{ }',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
            alert(msg.d)
        }
    });
    return false;
});

您可能還會注意到成功回調中msg.d屬性的使用，ASP.NET使用它來包裝整個響應，以及使用ResolveUrl方法正確生成頁面方法的URL而不是硬編碼。

Answer 2

更優化的呼叫將是

function search() {
    $.ajax({
        type: "POST",
        url: '<%= ResolveUrl("~/ProcessAudit/req_brws.aspx/search") %>',
        data: "{}",
        contentType: "application/json",
        success: function (msg) {
            msg = msg.hasOwnProperty("d") ? msg.d : msg;
            alert(msg);
        }
    });
}

根本不需要提供asp:ScriptManager 。

資源： http ： //encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Answer 3

您當前的按鈕正在導致完整的回發。 只需在按鈕上添加一個type =“button”即可避免這種情況。

 <button id = "btnSearch" type="button" onclick = "search()" >Search</button>

-Shazzam喲

Answer 4

如何使用JQuery AJAX實現ASP.Net Web方法？

HTML頁面：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title></title>
    <script src="js/jquery.min.js"></script>
    <script>
        function SubmitData() {

            var name = 'Ram';
            var gender = 'Male';
            var age = '30';           

            $.ajax({
                type: "POST",
                url: "ajaxcall.aspx/SaveData",
                data: '{"name":"' + name + '", "gender":"' + gender + '", "age":"' + age + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                beforeSend: function () {
                    $('#loader').show();
                },
                success: function (data) {

                    alert(data.d);
                    $('#loader').hide();
                },
                error: function (msg) {
                    //alert('3');
                    msg = "There is an error";
                    alert(msg);
                    $('#loader').hide();
                }
            });

        }
    </script>
</head>
<body>
    <div id="loader" style="display: none;">
        <img src="ajax-loader.gif" />
    </div>
    <a href="#" onclick="SubmitData();">Submit</a>
</body>
</html>

代碼背后：

[WebMethod]
    public static string SaveData(string name, string gender, string age) {
    try {
        return "OK";
    } catch (Exception ex) {
        return ex.Message;
    } finally { }
}

資源： http ： //www.sharepointcafe.net/2016/10/how-to-call-aspnet-web-method-using-jquery-ajax.html

在ASP.NET WebForms中使用jQuery調用'WebMethod'

問題描述

4 個解決方案

解決方案1
28 已采納 2011-08-03 15:03:31

解決方案2
6 2011-08-03 15:40:29

解決方案3
2 2016-02-01 00:14:10

解決方案4
0 2017-08-12 16:43:44

在ASP.NET WebForms中使用jQuery調用&#39;WebMethod&#39;

問題描述

4 個解決方案

解決方案1 28 已采納 2011-08-03 15:03:31

解決方案2 6 2011-08-03 15:40:29

解決方案3 2 2016-02-01 00:14:10

解決方案4 0 2017-08-12 16:43:44

在ASP.NET WebForms中使用jQuery調用'WebMethod'

解決方案1
28 已采納 2011-08-03 15:03:31

解決方案2
6 2011-08-03 15:40:29

解決方案3
2 2016-02-01 00:14:10

解決方案4
0 2017-08-12 16:43:44