Click here to Skip to main content
13,352,408 members (38,639 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


13 bookmarked
Posted 21 Nov 2011

Calling ASP.NET WebMethods using jQuery

, 21 Nov 2011
Rate this:
Please Sign up or sign in to vote.
How to call ASP.NET WebMethods using jQuery

It's a Friday afternoon and you want to write some hot and funky code using WebMethods and AJAX but you then encounter the problems and excess baggage of Microsoft's Ajax Implementation. Why not use jQuery? Well, with this neat code snippet below, you can now call a WebMethod in an ASP.NET page without all the baggage of ASP.NET AJAX Client Script libraries! All you need is ASP.NET, JQuery and a little JSON magic supplied by the jQuery-JSON library plug in.

(function ($) {
    $.webMethod = function (options) {
        var settings = $.extend({
            'methodName': '',
            'async': false,
            'cache': false,
            timeout: 30000,
            debug: false,
            'parameters': {},
            success: function (response) { },
            error: function (response) { }
        }, options);         var parameterjson = "{}";
        var result = null;
        if (settings.parameters != null) { parameterjson = $.toJSON(settings.parameters); }
            type: "POST",
            url: location.pathname + "/" + settings.methodName,
            data: parameterjson,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: settings.async,
            cache: settings.cache,
            timeout: settings.timeout,
            success: function (value) {
                result = value.d;
            error: function (response) {
                if (settings.debug) { alert("Error Calling Method \"" + 
                   settings.methodName + "\"\n\n+" + response.responseText); }
        return result;

Simply pasting this code into a JavaScript file and referencing it after your favourite version of the jQuery Library creates a new jQuery method called "webMethod".

The following parameters are available:


Denotes the name of the Server-side method to call.


Determines if jQuery is to wait for the Server side process to finish.


Determine if jQuery will append caching headers to the request.


Timeout to wait for a server response.


When set to true, a JavaScript alert box is shown if any runtime error occurs on the server.


An Object containing any parameters to pass to the server-side method.


A Callback function which is run when the request completes successfully. The results from the server side function are passed as a parameter.


A Callback function which runs when the request fails in some way. The standard Error object is passed as a parameter.

This snippet below calls the GetDate() WebMethod shown:

$.webMethod({ 'methodName': 'GetDate', 'parameters': { 'client': 3 },
                success: function (value) { alert(value); }

And the C# Codebehind that's being called by this function:

        public static string GetDate(int client)
            return string.Format("{0} says {1}", 
            client, DateTime.Now.ToString("r"));

Note the all-important [WebMethod] declaration that tells ASP.NET to work its Server-Side ASP.NET AJAX Magic.

Simples! And all in a few lines of code - a much smaller footprint.

Thanks to the jQuery-JSON plug in here for the excellent JSON Conversion routines.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior)
United Kingdom United Kingdom
Senior Developer with over 10 years experience of Microsoft Technologies working on both Web and WinForms Client Applications.

Keeper of 3 Chickens and enjoys Archery.

You may also be interested in...


Comments and Discussions

QuestionFix for $.toJSON is not a function Pin
Member 119570733-Sep-15 7:23
memberMember 119570733-Sep-15 7:23 
QuestionWhat about async web method calls from jQuery? Pin
jportelas31-Jan-13 5:05
memberjportelas31-Jan-13 5:05 
QuestionMy Vote Of 2 Pin
Alireza_136222-Jan-13 0:17
memberAlireza_136222-Jan-13 0:17 
QuestionPassing a list of values Pin
Member 248752224-Sep-12 6:51
memberMember 248752224-Sep-12 6:51 
GeneralMy vote of 1 Pin
mahmoud elghandour22-May-12 3:49
membermahmoud elghandour22-May-12 3:49 
GeneralMy vote of 1 Pin
mhamad zarif29-Nov-11 10:16
membermhamad zarif29-Nov-11 10:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180111.1 | Last Updated 21 Nov 2011
Article Copyright 2011 by JCrocker
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid