在ASP.NET WebForms中使用jQuery调用“WebMethod”

28
我在下面的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>
5个回答

36

请确保在您的ScriptManager元素中启用了页面方法:

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

假设你在onclick处理程序中返回false取消了按钮的默认操作,否则页面将执行完整的提交(postback),你的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 而不是硬编码。


7
嗯... Darin 有点错了...根本不需要使用ScriptManager。字符集和数据类型为JSON也是不必要的 :) - naveen
谢谢,URL 错误了。使用 '<%=ResolveUrl("~/default.aspx/search") %>'。 - marknery
我按照相同的方式设置,但我的响应未定义。有任何想法为什么?我在控制台中收到以下错误:Failed to load resource: the server responded with a status of 500 (Internal Server Error) - Si8

7
更优化的调用将会是:
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/

3
因为疑似恶意软件,Chrome似乎不喜欢这个链接,但我不想删除它,因为我没有发布过它。https://www.virustotal.com/en/url/ba8f2c409307ec010ef80629f518aabb85e846e88881a113ba7c2d4259d62cfe/analysis/1485793115/ - KSib

4

您当前的按钮会导致完整的页面刷新。只需在按钮中添加 type="button" 即可避免这种情况。

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

-嘿!

0
如何使用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 { }
}

Resource: http://www.sharepointcafe.net/2016/10/how-to-call-aspnet-web-method-using-jquery-ajax.html


0

在 App_Start/RouteConfig.js 文件中,将此行注释掉:

settings.AutoRedirectMode = RedirectMode.Permanent;

此外,请确保在 asp:ScriptManager 的开放标签中启用 EnablePageMethods="true",正如 Darin Dimitrov 所说的那样:
<asp:ScriptManager runat="server" EnablePageMethods="true">

最后,请确保webmethod是公共静态的,并且传递的参数具有正确的数据类型。这些都可能是导致webmethod未被调用的问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接