Click here to Skip to main content
Click here to Skip to main content

How to write your own partial postback in ASP.NET 2.0

By , 12 Apr 2009
Rate this:
Please Sign up or sign in to vote.

Introduction

AJAX has been around for a while now, and an important feature of the AJAX implementation in the .NET space is the partial post back functionality of web pages. This functionality has made the online experience richer and smoother while decreasing bandwidth usage between the server and browser. How this technology works is equally fascinating, and I am making an attempt to demonstrate how it works by taking a look below the hood.

Background

At the heart of the partial post back construction is the XMLHttpRequest, a DOM API. It can be used inside a web browser scripting language, such as JavaScript, to send an HTTP request directly to a web server without having to reload the entire page and handling the response from the server again within the scripting language. This data, in the form of XML, can then be used to manipulate the page elements on the client side.

On the server side, we implement an HttpHandler to handle the request and pass back data in a valid XML form.

By doing so, we are preventing page refreshes and roundtrips of static data and content in the web pages.

Essential building blocks

  1. XMLHttpRequest API
  2. HTTPHandler

How the code works

When the button on the ASPX page has been clicked, a client side HTTP request is made using the XMLHttpRequest API. This request is handled by an HttpHandler on the web server. The HttpHandler receives the request, processes it, and sends back the response to the XMLHttp object on the ASPX page. The XMLHttp object in turn consumes the response and renders the appropriate UI changes without the browser having to do a full refresh of the page.

Using the code

XMLHttpRequest API

This API makes the client side request to the handler without the need for a full postback by the ASPX page. The XML data is received by the XMLHttp object and used to populate a div element.

var xmlhttp;
function loadXMLDoc()
{
    xmlhttp=null;
    if (window.XMLHttpRequest)
    {
      // code for all new browsers
      xmlhttp=new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
      // code for IE5 and IE6
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xmlhttp!=null)
    {
      xmlhttp.onreadystatechange=state_Change;
      xmlhttp.open("GET", 
        "http://localhost:45000/.tpl",true);
      xmlhttp.send(null);
    }
    else
    {
      alert("Your browser does not support XMLHTTP.");
    }
}

function state_Change()
{
  if (xmlhttp.readyState==4)
  {
    if (xmlhttp.status==200)
    {
       document.getElementById('D').innerHTML=xmlhttp.responseText;
    }
    else
    {
      alert("Problem retrieving XML data:" + xmlhttp.statusText);
    }
  }
}

Httphandler

The HttpHandler code builds and sends a simple XML object called note, with a single element called body. You can modify and implement your own logic here to do more complex stuff.

/// <summary>
/// Summary description for $codebehindclassname$
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Handler1 : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        context.Response.Write("<note>");
        context.Response.Write("<body>Partial postbacks" + 
                               " are awesome!</body>");
        context.Response.Write("</note>");
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Points of interest

Interestingly enough, much of the functionality we see above has been due to the browser support for XMLHttpRequest. It is important to understand the various implementations of the XMLHttp object by different browsers. Below is some history on the evolution of the XMLHttp object.

"Microsoft developers were the first to include the XMLHttp object in their MSXML ActiveX control. Developers at the open source Mozilla project saw this invention, and ported their own XMLHttp, not as an ActiveX control, but as a native browser object called XMLHttpRequest. Konqueror, Opera, and Safari have since implemented similar functionality, but more along the lines of an identical XMLHttpRequest. Some AJAX developers and run-time frameworks only support one implementation of XMLHttp while others support both. Developers building AJAX functionality from scratch can provide if/else logic within their client-side JavaScript to use the appropriate XMLHttp object as well. Internet Explorer 7 added native support for the XMLHttpRequest object, but retains backward compatibility with the ActiveX implementation. To avoid excess conditionals, see the source code in the History and support section." courtesy Wikipedia.

References

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Ritesh Ramesh
Architect Infosolvex Solutions Inc
Australia Australia
Ritesh is an IT consultant with over ten years of experience in the IT industry varying from consultation, architecture, design, development to technical management. He has a strong background in solutions and applications architecture with a focus on Microsoft’s .Net platform. His area of expertise spans design and implementation of client/server, database and web-based systems. He has worked with C#, ASP.NET 1.1 and 2.0, ADO.NET, Web Services and SQL technology on several enterprise class projects.
 

 

Freedom is not worth having if it does not include the freedom to make mistakes.
Mahatma Gandhi

Comments and Discussions

 
GeneralMy vote of 1 PinmemberSyed Javed9-Nov-09 4:51 
GeneralReally premitive idea. PinmemberAbhishek Sur13-Apr-09 21:39 
GeneralRe: Really premitive idea. Pinmemberyafi14-Apr-09 6:05 
GeneralRe: Really premitive idea. PinmemberRitesh Ramesh14-Apr-09 9:13 
GeneralRe: Really premitive idea. PinmemberAbhishek Sur15-Apr-09 21:42 
GeneralRe: Really premitive idea. PinmemberRitesh Ramesh16-Apr-09 5:41 
GeneralRe: Really premitive idea. PinmemberAbhishek Sur20-Apr-09 22:16 
GeneralRe: Really premitive idea. PinmemberRitesh Ramesh21-Apr-09 3:55 
GeneralRe: Really premitive idea. PinmemberAbhishek Sur21-Apr-09 22:38 
GeneralRe: Really premitive idea. [modified] PinmemberRitesh Ramesh22-Apr-09 2:45 
GeneralRe: Really premitive idea. PinmemberAbhishek Sur22-Apr-09 21:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140421.2 | Last Updated 12 Apr 2009
Article Copyright 2009 by Ritesh Ramesh
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid