Calling a ‘WebMethod’ with jQuery in ASP.NET WebForms

by

Make sure that you have enabled page methods in your ScriptManager element:

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

and that you have canceled the default action of the button by returning false inside the onclick handler, otherwise the page performs a full postback and your AJAX call might never have the time to finish. Here’s a full working example:

<%@ 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>

Another possibility is to subscribe to the click handler unobtrusively:

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

and then inside a separate javascript file:

$('#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;
});

You might also notice the usage of the msg.d property inside the success callback which ASP.NET uses to wrap the entire response into as well as the usage of the ResolveUrl method to properly generate the url to the page method instead of hardcoding it.

More Related Contents:

  1. How to return a JSON object in standard web forms .Net
  2. Why the Ajax script is not running on IIS 7.5 Win 2008 R2 server?
  3. How do I format a Microsoft JSON date?
  4. ASP.NET Calling WebMethod with jQuery AJAX “401 (Unauthorized)”
  5. How to return JSON from a 2.0 asmx web service
  6. Using jQuery for AJAX with ASP.NET Webforms [closed]
  7. The length of the string exceeds the value set on the maxJsonLength property
  8. Calling webmethod ina aspx.cs file using jquery ajax
  9. Jquery post and unobtrusive ajax validation not working mvc 4
  10. Multiple input validation
  11. jQuery doesn’t work after content is loaded via AJAX
  12. Rotating a Div Element in jQuery
  13. CORS header ‘Access-Control-Allow-Origin’ missing
  14. How do I POST with jQuery/Ajax in Django?
  15. jQuery: Load Modal Dialog Contents via Ajax
  16. Detecting a redirect in ajax request?
  17. Unexpected Caching of AJAX results in IE8
  18. Internet Explorer 9 not rendering table cells properly
  19. What are the drawbacks of using synchronous ajax call?
  20. Basic Simple Asp.net + jQuery + JSON example
  21. How do I PUT data to Rails using JQuery
  22. jQuery Ajax request every 30 seconds
  23. Ajax Not working in IOS 9.0 Cordova
  24. HTML5 validation before ajax submit
  25. Accessing web Service from jQuery – cross domain
  26. Change textbox’s css class when ASP.NET Validation fails
  27. Simple jQuery Ajax call leaks memory in Internet Explorer
  28. JQuery .load() callback function
  29. jQuery Deferred – getting result of chained ajax calls
  30. Stop $.ajax on beforeSend

Leave a Comment