inicio mail me! sindicaci;ón

Archive for AJAX

.NET Custom HTTP Handlers

ASP.NET provides a nice way to avoid it’s full web control lifecycle. Why would you want to do this? Well, I found it most useful for doing AJAX work. For example, I have a javascript function I need to have ansynchronously call ASP.NET and return some data to update a HTML elements. In ASP Classic, PHP, Coldfusion, whatever, this is straightforward, the page gets called and some data is outputed. Using Prototypes Ajax.Request I would write the following,

function getSomeData(parameter1) {
  var url = '/file_path/file_name.php';
  var pars = 'param='+parameter1;
  var myAjax = new Ajax.Request(
     url, {
       method: 'get',
       parameters: pars,
       onComplete: doSomethingWithData
       }
     );
}

With ASP.NET I could do the same with an ASPX page, but the request would go through the web control model, which adds overhead. So writing a custom HTTP Handler is one solution. Now there are a few ways to get this setup, but I will use the way I think is most straight-forward.

The first thing you’ll do is create a new class and place that class in the App_Code folder. Below is an example of a very simple class that returns data that will be consumed by the javascript function above. Within Visual Studio add a new class to your App_Code directory and call it, myhttphandler.cs.

using System;
using System.Web;

namespace MyHttpExtensions
{
  public class HandlerExample : IHttpHandler
  {
    public void ProcessRequest(System.Web.HttpContext context)
    {
      HttpResponse response = context.Response;
      response.write("Data to be use by javascript..data...data..");
    }
    public bool IsReusable
    {
      get {return true;}
    }
  }
}

After you have the class created, within Visual Studio you can create a file called a Generic Handler (file extension .ASHX), which you can put in your application directory. This file looks like,

  < %@ WebHandler Language = "C#"
           Class="MyHttpExtensions.HandlerExample" %>

The class name corresponds to the class you created in your App_Code folder. And there it is, you can now request a ASP.NET page which is very light-weight and avoids normal web control processing.

Prototype library examples

The Prototype library, including script.aculo.us and a few others are a critical part of my development toolbox. These Javascript frameworks provide the foundation for creating interactive, usuable, fast and light-weight web-applications. Below are just a few examples of functions I use all the time.

  1. Ajax.Request
    Take a look at the two functions below. Using the Ajax.Request method you can call a processing file, all that processing file needs to do is output some text who response is passed to the onComplete function, displayProcessIt() and from there, you can generate a complete page of data, hide/show lists elements, divs, whatever you need.

    function processIt(){
      var url = '/path/processing_file.aspx';
      var pars = 'param1='+param1Val;
      var myAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: displayProcessIt });
    }
    function displayProcessIt(strData){
      var strResponse = strData.responseText
      // Do whatever you want with this data on the client
    }
    

    All I know is after I learned how to use this one piece of functionality, my development become that much easier. That’s not to say this technique is ground-breaking or new, I know I’ve written enough “kind-of-does-this” code over the years.

  2. Element.show(), Element.hide(), Element.toggle()

    Yes, I know these are very self-explanatory, but these are three sweet gems. All you do is create a pointer to an element by it’s ID and there you go, hide, show, toggle, beautiful…

    function doSomething(e1){
      Element.toggle($(e1));
    }
    

    Using $ creates a reference to that object by id and toggle…well, it toggles the display of the referenced element.