Dave Bush is a .NET programmer and Certified ScrumMaster who is passionate about managing risk as it relates to developing software. When he is not writing or speaking about topics related to Application Lifecycle Risk Management (ALRM), he is an example to his peers as he develops web sites in the ASP.NET environment using industry best practices. Specific topics Dave can address include: • Project management, with an emphasis on Scrum • Test Driven Development (TDD) • Behavioral Driven Development (BDD) • Unit testing and Integration testing using NUnit, Jasmine and SpecFlow • Web Application testing using Selenium • Continuous Integration • Extreme programming (XP) • Coding best practices • Architecture • Code Reviews Dave has "an insatiable curiosity and is always learning." He has been called "the miracle worker" and "hard to replace" by clients he has worked for recently. Contact Dave via LinkedIn (http://www.linkedin.com/in/davembush/) to find out more about how he can help your organization reduce software development risk Dave is a DZone MVB and is not an employee of DZone and has posted 55 posts at DZone. You can read more from them at their website. View Full User Profile

jQuery, JSON and ASP.NET

01.22.2009
| 14939 views |
  • submit to reddit
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.

 

References
Published at DZone with permission of Dave Bush, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)