Calling a Webmethod Using Jquery Ajax

Introduction

This tip explains how to call a web method using JQuery.There are so many ways we can do this requirement. Here I am explaining one.

Steps

1. We need to include:
   

   <script src="Script/jquery-1.9.1.min.js" type="text/javascript"></script>

2. After that, create an Ajax jQuery function like this:
   

   function checkUserNameAvail() {
       var userid = $("#reguser").val();
       jQuery.ajax({
           type: "POST",
           url: "Login.aspx/checkUserNameAvail", //It calls our web method
           contentType: "application/json; charset=utf-8",
           data: "{'iuser':'" + userid + "'}",
           dataType: "xml",
           success: function (msg) {
               $(msg).find("Table").each(function () {
                   var username = $(this).find('UserName').text();
                   if (username != '') {
                       //window.location.replace('/iCalendar.aspx');
                       alert('This username already taken..');
                       $("#reguser").val('');
                       $("#reguser").focus();
                   }
                   else {
                   }
               });
           },
           error: function (d) {
           }
       });
   }

3. Make sure that you have included the js file to the aspx page.
   
   
4. Create a web method in your aspx.cs file like the following:
   

   [WebMethod(enableSession: true)]
      [ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
      public static string checkUserNameAvail(string iuser)
      {
          try
          {
              //This is where i am returning my data from DB
   
              iCalendarClass iC = new iCalendarClass();
              DataSet ds = iC.checkUserNameAvail(iuser);
              return (ds.GetXml());
          }
          catch
          {
              return null;
          }
      }

Make sure that your function returns XML.

That's all. Have a happy coding :)