jquery, ajax, and .NET Web Services

Recently, I have been working on a few projects that require an ajax friendly life cycle for an ASP.NET web application. Much of the work I did is based on Rick Strahl’s post: http://www.west-wind.com/weblog/posts/896411.aspx.

Working on top of what I learned from this article, I decided to leverage the rich capabilities of .NET’s Web UI components as part of my ajax implementation using HTML injection. I used jquery to bind a standard button to make a call to my Web Service method.

The service created and populated a standard GridView object. The service would then render that object and return the HTML that was generated. This HTML, once returned by the service call, would be injected into a DIV tag that served as the container for the results table.

My initial implementation is a naive solution that renders full HTML on the server side and passes that back to the client-side. My ASP.NET page already has a script manager so I added a reference to my web service (simple .asmx in this scenario).

My service defines a method Foo:

namespace Client.Project.Services
{
///
/// Summary description for ConceptServices
///
[WebService(Namespace = “http://tempuri.org/”)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1, Name = “MyBinding”)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class ConceptServices : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod]
public String Foo()
{
return “Hello World!”;
}
}
}

To make a call to this method via client-side javascript, simple use the fully qualified name for the method:
Client.Project.Services.Foo( successMethod, failureMethod )
Assuming Foo is overloaded to take in parameters, you would pass in those parameters first:

var i = 3
var s = “bar”
Client.Project.Services.Foo( i, s, successMethod, failureMethod );
function successMethod( o ){
//o is the value returned by the web service call
}