Filters:

  • Technologies

  • Instructors

  • Getting Data in and out of ASP.NET Applications using Ajax and jQuery – Using a Custom HttpHandler by Dan Wahlin

    In my previous post I discussed how ASP.NET MVC controllers could be used to serve up JSON data to applications. Examples of additional technologies that can be used are shown next:

    1. ASP.NET Web Services (.asmx)
    2. Windows Communication Foundation
    3. ASP.NET MVC Controller/Action
    4. Custom HttpHandler
    5. Web API

    With ASP.NET MVC you can use a controller action to serve up JSON easily by using the built-in Json() method. An example of a JSON-enabled controller action is shown next:

    In this post I'll discuss how ASP.NET HttpHandlers can be used to serve up JSON data to Ajax clients.

    Creating an ASP.NET HttpHandler

    Regular ASP.NET pages are a special type of object referred to as an HttpHandler. As users hit a page the handler is invoked and used to serve data to the browser. In cases where JSON data needs to be served to Ajax-enabled clients, a simple HttpHandler can be created and used without much effort on your part. The handler has an .ashx extension and can be hit directly in the browser or called from an Ajax client.

    To add an HttpHandler into an ASP.NET Web Forms project right-click on the project and select Generic Handler from the available items as shown next:

    HttpHandler ASP.NET Generic Handler
    After adding the Generic Handler into the project you'll see the following code:

    Since JSON data will be served from the HttpHandler the first order of business is to reference the System.Web.Script.Serialization namespace:

    using System.Web.Script.Serialization;

    This namespace has the JavaScriptSerializer class in it which can be used to convert a Customer type to JSON. Once the namespace is included, the ContentType property needs to be changed to a value of text/json:

    context.Response.ContentType = "text/json";

    At this point the type of object to serialize to JSON can be created, serialized, and returned. The following code contains the complete ProcessRequest method in the HttpHandler. It's used to serialize a Customer object to JSON and then return the string data using the Response.Write() method.

    To call the custom HttpHandler the following jQuery code can be used:

    You may also like:  JavaScript for C# Developers – Differences between JavaScript Dynamic Syntax and C#

    This code uses jQuery's getJSON() function to call the HttpHandler on the serve and process the resulting data in a callback function. If data values need to be passed to the service the null parameter value in getJSON() can be replaced with an object literal containing the parameter(s):

    {MyDataKey: MyDataValue}

    The server can access the parameter value (or values) using the context variables Request property:

    string val = context.Request[“MyDataKey”];

    Conclusion

    In this post you've seen how an ASP.NET HttpHandler can be used to serve JSON data to an Ajax-enabled client. Although using a custom HttpHandler to serve JSON data isn't my preferred approach given the other options available, it's a simple choice that can be used as needed. In the next post I'll discuss how the new Web API functionality available in .NET 4.5 can be used to serve JSON.

    Enjoy!
    Dan Wahlin
    .NET Developer Instructor
    Interface Technical Training

    See what people are saying...

    1. Jacky M

      1. JsonConvert.SerializeObject = better //using JavaScriptSerializer() is verbose
      2. $.ajax = more flexible //using getJSON() will cause inflexibility down the road.
      ***$.ajax is the mother of all ajax in jquery. ie: .post, .get, .getscript, etc
      3. Using Option for before and after processing for ajax (with this, progressbar is possible)
      var options = {};
      options.url = “myhandler.ashx”;
      options.type = “GET”;
      options.contentType = “application/json; charset=utf-8”;
      options.beforeSend = function ()
      {
      $(“#progress”).show();
      };
      options.success = function (result)
      {

      $.ajax(options);
      evt.preventDefault();

      Reply here if you want.
      I think you can do better than above.

    2. Pingback: How to add Help Pages to ASP.NET Web API Services – Dan Wahlin | Interface Technical Training

    3. Norwil D.

      Hi Lauren, your post really made my day.

      Keep it up.

    4. Lauren

      Will this method work across domains?

    Share your thoughts...

    Please fill out the comment form below to post a reply.