Click here to Skip to main content
12,755,975 members (36,933 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 CPOL
Rate this:
Please Sign up or sign in to vote.
Hey there worldIts a Friday afternoon and you want to do some hot and funky code using WebMethods and AJAX but you then encounter the problems and excess baggage of Microsoft's Ajax Implementation.
Hey there world

Its a Friday afternoon and you want to do 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 a 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 plugin

(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


Determine 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.


A 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 thats 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 Plugin 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.170217.1 | Last Updated 21 Nov 2011
Article Copyright 2011 by JCrocker
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid