Home » jQuery » jQuery, JSON, and ASP.NET

jQuery, JSON, and ASP.NET

G03A0003 A few months ago, I demonstrated how to use ASP.NET’s JSON capabilities.  Lately, I’ve been demonstrating how to use jQuery.  Both use a considerable amount of JavaScript so if there is some way we could eliminate or reduce the amount of code we had to load, performance would naturally increase.

Fortunately, there is.

What stays the same
You are still going to create a JSON enabled web service just like you did in the earlier article by giving the web service class the attribute, “ScriptService.”  You remember, this is what enables the web service to return JSON.

What is different
You will not, however, be including this block in your ASPX file:

      <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
          <asp:ServiceReference path="~/WebService.asmx" />
        </Services>
      </asp:ScriptManager>

You might still need the ScriptManager if you are using MS-AJAX on your page, but if you don’t have any other MS-AJAX on your page, you can remove the entire block of code.

In the jQuery for your page, your code will look something like this:

$.ajax({
    type: "POST",
    url: "WebService.asmx/Add",
    data: "{a:1,b:4}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(result) {
        alert(result.d);
    }
});

You can get the full documentation for the $.ajax() global method here:

http://docs.jquery.com/Ajax/jQuery.ajax

A few things that need to be pointed out here:

  1. For this to work, type must be “POST.”
  2. url: is the name of the asmx file followed by a slash followed by the name of the web service method you want to call.
  3. data: is a JSON name/value pair list of all the parameters in the form of {parametername: parameterValue[,…]} if there are no parameter just use “{}”.  Don’t use “” or your code will not work.
  4. contentType and dataType tell jQuery we are working with JSON.
  5. The function pointed to by success will be called when the request has finished successfully, it will pass in a variable of type json.  The d property holds the return value.
  6. If the return value is a structure or class d will have properties hanging off of it specifying
  1. type information of the structure or class
  2. property for each property/variable in the structure or class.

You could take most of that AJAX call and turn it into some sort of helper function, but even if you don’t the amount of code you will end up loading using this method is significantly less than what you would load using both together.

 

Other post in jQuery

Related Post

  • ASP.NET JSON  and ViewStateASP.NET JSON and ViewState I received the following question recently about my article "ASP.NET AJAX using JSON - Here’s how." If we update the value of a textbox or label via a JSON web service call - will the […]
  • ASP.NET AJAX using JSON – Here’s how.ASP.NET AJAX using JSON – Here’s how. Last week I wrote a post about how simple JSON is. In it I explained the main differences between using JSON and using the update panel. I really started out thinking I'd get to how to […]
  • jQuery – Retrieving HTML FragmentsjQuery – Retrieving HTML Fragments A couple of weeks ago I mentioned that I had built a tooltip using jQuery.  We focused mostly on the positioning of the tooltip at the time because, historically, that's where most of the […]
  • jQuery Dialog – With Validation ControlsjQuery Dialog – With Validation Controls Chances are, you’ll eventually want to use a dialog box in combination with some form elements, and when you do, you’ll probably want to implement some validation. True, there are some […]
  • jQuery – Date PickerjQuery – Date Picker Today we’ll start taking a look at the final control in the jQuery UI suite.  The Date Picker. This control, as with all the other controls we’ve looked at, is relatively simple […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer focusing on ASP.NET, C#, Node.js, JavaScript, HTML, CSS, BootStrap, and Angular.JS.Does your team need additional help in any of the above? Contact Dave today.

2 Pingbacks/Trackbacks