How to call ASP.Net page method with jQuery

In this blog post we are going to learn about how we can call asp.net page methods from jQuery.

What is ASP.Net Page Method?

Page methods are available from ASP.Net 2.0. It’s an alternative to web services in ASP.Net application. This methods are exposed at client side and you can call that page methods directly from JavaScript.It is an easy way to communicate asynchronously with the server using Ajax.

Creating a page method:

So for creating a page method let’s create a asp.net web empty web application.

Calling asp.net page methods with jquery

Now we are ready with our application let’s write a simple hello world page method.

using System;
using System.Web.Services;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static string HelloWorld()
        {
            return "Hello World";
        }
    }
}

Now our server side code is ready It’s time to write some code for html.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" 
    Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Calling Page Method with jquery</title>
    <script type="text/javascript" src="Scripts/jquery-2.0.0.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true">
    </asp:ScriptManager>
    <div id="HelloWorldContainer">
    
    </div>
    </form>
</body>
</html>

Now in the above HTML code you have seen we have included the jQuery min JavaScript file with script tag and then I have created a script manager with EnabledPageMethods as true. Please note that scriptmanager is required here to call page methods from JavaScript. Also I have created a div with Id “HelloWorldContainer” to print output of HelloWorld page method.

Calling page method from jQuery:

Now our HTML and server side code is ready. So it’s time to write some JavaScript code. Following is a code for calling a page method from JavaScript.

<script type="text/javascript">
    $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "WebForm1.aspx/HelloWorld",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    $("#HelloWorldContainer").text(msg.d);
                }
            });
    });
</script>

Here in the above code you have seen that I have written code in document ready function of jQuery which will called when page will be loaded and with jQuery Ajax function I have called page method and replace the text of div with the reply from Page method. Now when you run this in browser. It’s look like following.

You can see It’s a very easy to call a page method in jQuery. Hope you like it. Stay tuned for more..

DotNetJalps