ASP.NET - What is the correct approach to JSON based web services with jQuery?

Question

What is the correct way to convert ASP.NET SOAP-based web services to JSON-based responses? ...And then call these from jQuery?

What are "best practices" when integrating jQuery based AJAX and ASP.NET? Articles? Books?

Answer 1

JSON conversion to .Net classes can be done with System.Runtime.Serialization and System.Runtime.Serialization.JSON. I suspect though you're more interested in setting up function calls from client to server. I think its worth trying this tutorial: http://asp.net/AJAX/Documentation/Live/tutorials/ASPNETAJAXWebServicesTutorials.aspx.

In this tutorial, you'll need to add a webservice '.asmx' file. In the asmx file you will be able to create functions callable from client script. Your ASP.NET pages can also reference client script generated to make calling the .asmx functions.

If you actually want to do JSON serialization though, you could also use the following:

    using System.Runtime.Serialization;
    using System.Runtime.Serialization.Json;

    public class JsonSerializer
    {
        // To make a type serializeable, mark it with DataContractAttribute
        // To make a member of such types serializeable, mark them with DataMemberAttribute
        // All types marked for serialization then need to be passed to JsonSerialize as
        // parameter 'types'

        static public string JsonSerialize(object objectToSerialize, params Type[] types)
        {
            DataContractJsonSerializer serializer = new DataContractJsonSerializer(
                types[0], types.Skip(1));

            MemoryStream ms = new MemoryStream();

            serializer.WriteObject(ms, objectToSerialize);

            ms.Seek(0, SeekOrigin.Begin);

            StreamReader sr = new StreamReader(ms);

            return sr.ReadToEnd();
        }
    }

Answer 2

The following article Extending an existing ASP.NET Web Service to support JSON by Bobby Soares on codproject.com talks about using custom method attributes to achieve desired result.

Answer 3

I've used ASP.Net Ajax for a while, but without ever worrying about JSON or XML communication. Instead, I've used Web services to directly return content that you can set using innerHTML.

This is very easy to implement. Just create a web service (ASMX) file, and declare your methods as WebMethods (set the WebMethod attribute).

Now you can call your web service from your Javascript code pretty much like a regular function.

The results of the function will be returned to a call-back function. This is the structure

//Webmethod returns some HTML content
Myservice.DoSomething(myParam, callBackFunction);

//Content is set on the webpage
function callBackFunction(result){
  document.getElementById('myElemID').innerHTML = result;
}