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

  • Mixing ASP.NET, jQuery and JSONMixing ASP.NET, jQuery and JSON I received the following question last week: I am building a web application... I have a form with asp.net server control textbox and dropdownlist... how can I send this to the server witho...
  • 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 value of tha...
  • 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 write JSO...
  • Using JSON in ASP.NETUsing JSON in ASP.NET If you've been avoiding using JSON in your ASP.NET application because you think it's hard, you're an idiot. I can say that, because I've been avoiding it for exactly that reason. I've been an idi...
  • 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 work has...
  • http://techmonkeydesign.com Sean O’Steen

    Is the post requirement a limitation of the jQuery instance or the ASMX?

    If you were to add:

    Could a GET request work?

  • http://techmonkeydesign.com Sean O’Steen

    Oops, Hopefully this snippet will work better:

    If you add:
    <webServices>
    <protocols>
    <add name=”HttpGet” />
    <add name=”HttpPost” />
    </protocols>
    </webServices>

    to the web.config file, will a GET request work in this case?

  • Dave

    limitation of asmx.. security reasons.

  • Pingback: Dew Drop – January 17, 2009 | Alvin Ashcraft's Morning Dew

  • Pingback: Maxim’s blog » links for 2009-01-18

  • nick b-w

    you can configure your webservice to allow “get’s” but switched off by default as stated for security reasons

  • Pingback: Dew Drop – September 5, 2013 (#1,618) | Morning Dew