Generic Jquery Ajax Call in Asp.net

 

 

 

 

                                                              

As we there are many ways to make Ajax calls in Asp.net using Jquery. While developing and using the ajax methods in the Web application, we can find it looks so messy and sometime difficult to find the problem.

Simple Example of using Jquery Ajax:

           

<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode">

$.ajax({
            type: "POST",
            url: "http://Abc.com/JqueryAjax.aspx/LoadCountries",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                return msg;
            }
        });            
</pre>

 

Most of the problems in Jquery Ajax we  can find it is from Parameter name. Some time it is difficult to format it, if even we manage it, it is a repeatable task. So why not post the parameter in a single defined format, so we should not have problem.

So here is the possible solution to make our code compact, reusable and easier to handle any issues in the code.

Generic Jquery Ajax Calls.

Code 1 : Calling Ajax Generic method

var Result = CallGenericAjax(http://Abc.com/JqueryAjax.aspx/SaveComment, MultiPara).d;

• CallGenericAjax is a method which has to be callled from any pages which requires ajax call.



• This method has two parameters to pass a. Link to fetch Ajax method, b. Parameter Array “MultiPara” which is 2D array for "’key” and “value”.

 

 

Code 2 : To be place in in MasterPage or a Global.Js file.where this code can be re-used.

function CallGenericAjax(VarUrl, para) {


                                     var dataPara = "{";


                                     for (var i = 0; i < para.length; i++) {


                                         dataPara += "'" + para[i][0] + "':'" + para[i][1] + "'";


                                        if (i < para.length - 1)


                                                      dataPara += ",";


                                         }


                                 dataPara+="}";


                                var returnObj ="";


                             $.ajax({


                                         type: "POST",


                                          url: VarUrl, 
                                          data: dataPara,


                                         contentType: "application/json; charset=utf-8",


                                         dataType: "json", 
                                         success: function (msg) { 
                                          return msg;


                                        }

                                    });

                                }

• Here the Parameters in an array will be seperated to construct the proper formatted data for Ajax call.

Code 3: Extension of Code 1 Part

function Save(MasterCommentId, ParentId, Comment) {           
            var MultiPara = new Array();
            MultiPara[0] = new Array(2);
            MultiPara[0][0] = "MasterCommentId";           
            MultiPara[0][1] = MasterCommentId;
  
            MultiPara[1] = new Array(2);
            MultiPara[1][0] = "ParentId";
            MultiPara[1][1] = ParentId;
  
            MultiPara[2] = new Array(2);
            MultiPara[2][0] = "Comment";
            MultiPara[2][1] = Comment;
  
            var Result = CallGenericAjax("http://ABC.com/JqueryAjax.aspx/SaveComment", MultiPara).d;          
            if (Result > 0) {
                alert('Success to addcomment');
            }
            else
            { alert('fail to addcomment'); }
        }

• Here the Parameters are created with key and values and will be sent as a single array object.

 

Advantages :

1. Reusable code

2. More productivity.

3. Less porne to bugs and data formats.