Calling .NET functions from JavaScript


Download full code from here.

Introduction

Javascript/Jquery is the client side language and it runs on the browser. It is fast because it doesn’t depend on the server for the response. Nowadays, jQuery is being used in the web development very much. It is fast and can really creates a cool and attractive web site. Jquery has a functionality to call the web service ($.ajax()). In this method we call the web service which is running on some server and this method gets the response which can be used as the developer wants to do. One important thing in ASP.NET is if you need to call the .NET function and you are not using that function in other pages, then it is not justifiable to create a web service and call the function. ASP.NET provides you a cool mechanism to utilize your server side function from your client side without officially creating the web service.

PageMethods and WebMethod attribute

Every method that you want to call from the client side code must be public and static .NET function and as web service method it must have System.Web.Services.WebMethod attribute. Then in your aspx page you can call your .NET function using PageMethods.MethodName. And you need to have ScriptManager control in your page with EnablePageMethods true.

WebMethodCall.aspx.cs

        [System.Web.Services.WebMethod]
        public static string GetName(string name)
        {
            return "Hello <strong>" + name + "</strong>";
        }

For example we have a GetName method in our code behind. So for this method to enable to call from client code, we need to add WebMethod attribute on it.

And its corresponding aspx page will have following javascript code to call the .NET function and display it in a div.

WebMethodCall.aspx


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

</asp:ScriptManager>

<div>

<script language="javascript" type="text/javascript">

function Clicked() {

//PageMethods.set_path('WebMethodCall.aspx');

PageMethods.GetName('Pradip', Success, Failure);

}

function Success(result, userContext, methodName) {

$('#content').html(result);

}

function Failure(error, userContext, methodName) {

$('#content').text(error.get_message());

}

</script>

</div>

<a onclick="Clicked()" href="#">GetName call</a>

<br/>

<br/>

<div id="content" style="background-color: #B0B0B0; width: 500px; height: 500px;">

</div>

The code above is straightforward. In above code we called the .NET function ‘GetName’ using PageMethods.GetName which has three parameters: name parameter, success callback function and failure callback function. On Success we get the result object (in our case string) which is displayed as html in content div.

Even though the code above is very simple, you can call a complex database call and calculation from your client code. You just need to extend your server side function.

Download full code from here.

Issue when using with URL Routing

When you use the URL routing, the method of calling .NET function from javascript that I described above will not work as expected because if you look into the page source you can see the form action to ‘HomePage’ and when you debug javascript you can see service path as ‘HomePage’. So, for this we need to do some correction on this path. We need to call PageMethods.set_path(url) method to set the service path. You can just uncomment the code inside the Clicked() function. Now, you can see our code works for both ASPX page and page using URL routing.

Conclusion

Even web service is used very much while it is required to call .NET functions from client side code (Javascript/JQuery), when the function is used just in one page and it is not justifiable to build web service as it costs performance and separate service, it is good to use this method when you need to call .NET functions from client code.