AJAX for C#.NET/VB.NET Programming

Introduction

Over the last year or so, AJAX has taken the web development world by storm.
AJAX is short for Asynchronous JavaScript and XML and is an approach to building
dynamic web applications that behave less like the static web pages we're used
to and more like desktop applications.

At the heart of AJAX is the XmlHttpRequest object, a component
originally designed by Microsoft and used to provide the rich Outlook-like
interface of Exchange Web Access. JavaScript on a web page can use an instance
of XmlHttpRequest to send requests to the web server that generated
the page and then use the response to update part of the page, without the
browser having to reload everything. This can make the application a lot quicker
– instead of the entire page having to be transmitted and rendered, the browser
just fetches what's needed to update the current page.

Although the technologies that support AJAX-style web apps have been around
for years, they weren't widely used until the introduction of frameworks that
made dealing with the extra complexity, not to mention cross-browser
differences, possible. Microsoft's ASP.NET AJAX
framework is one of the most recent, and has just been released as version
1.0, following a year of pre-releases that used the code name "Atlas".

This article shows you how to AJAX-enable an existing ASP.NET web page by
using Microsoft's ASP.NET AJAX Extensions. The UpdatePanel control
provided by the framework makes it really easy to start with AJAX programming by
defining the areas of the page you want to update independently without a full
page reload.

Once you've understood the basics, you'll use an href="http://www.codeproject.com/redir.aspx?id=3006">InnerWorkings coding
challenge that provides a sample AJAX-enabled bug tracking website to help you
really understand how to use the AJAX Extensions.

src="Innerworkings_AJAX/image001.png" width=563 border=0>

What is Microsoft ASP.NET AJAX?

Microsoft ASP.NET AJAX is a free framework designed to make it easier to
write modern AJAX-style applications using ASP.NET. There are two parts to the
framework – a cross-browser JavaScript library and a set of server-side ASP.NET
controls. The JavaScript library goes beyond simply enabling AJAX apps and
provides object-oriented extensions to JavaScript to make it easier to write
complex applications that need to process a lot of data in the browser. On the
server-side, a set of new and enhanced ASP.NET controls make it possible to
write AJAX applications by simply adding controls to a page, just as with
non-AJAX applications. In fact, you don't have to write a single line of
JavaScript to create a fully-featured AJAX application.

As well as ASP.NET AJAX itself, there are two other downloads available to
add AJAX functionality to your site. The href="http://www.microsoft.com/downloads/details.aspx?FamilyID=4cb52ea3-9548-4064-8137-09b96af97617&displaylang=en">AJAX
Futures CTP (Community Technical Preview) is a collection of new features
which will be added to the main AJAX Extensions framework in the future. The href="http://www.codeproject.com/redir.aspx?id=3009">AJAX Control Toolkit
contains prewritten components like panels that can be dragged around the page
and rating controls to enable users to submit feedback.

What's an InnerWorkings Developer Coding Challenge?

An InnerWorkings Developer coding challenge is a sample of code in Visual
Studio that has a couple of key pieces missing. Each challenge includes selected
reference links chosen specifically so you can easily find out how to fill in
the blanks, complete the sample app, and learn about a new technology at the
same time. Once you're finished, InnerWorkings Developer automatically checks
your code so you can be sure you've solved the challenge correctly and that you
really understand what you've learned.

The coding challenges are designed to take you to the heart of the technology
you want to learn more about, focusing on the most important, practical
features. Because everything has been set up for you, you can dive straight in
and start coding.

InnerWorkings Developer has a library of hundreds of challenges on topics
from ASP.NET to Windows Communication Foundation. For more information, have a
look at our href="http://www.codeproject.com/redir.aspx?id=3008">catalog.

How Does the UpdatePanel Work?

The UpdatePanel is designed to be the easiest possible way to
AJAX-enable your site, focusing on the most important feature of AJAX:
restricting updates to an area within a page instead of requiring a full
refresh. Although it completely changes how requests are made by the browser,
the UpdatePanel is written in such a way that your pages execute normally, which
means you don't have to rewrite any controls or server-side logic.

As the browser loads the AJAX framework, a JavaScript onsubmit
handler is added to every form element on the page. When the form
submits, the handler checks whether this should be a "partial update" – one
handled by an update panel. If so, it collects all the data being sent to the
server, repackages it, and sends it, not as a regular browser request, but using
the XmlHttpRequest object. In the browser, the onsubmit
handler now returns false,
effectively telling the browser to cancel the full page refresh. Meanwhile, the
request has made its way to your web server looking just like a normal request
with one difference: an extra HTTP header lets the AJAX infrastructure know that
this is a partial update.

The page executes as normal and the output is collected ready to be sent to
the browser. Just before it's sent however, another bit of AJAX magic kicks in.
Everything that isn't needed for the UpdatePanel is stripped out
and some extra data is sent (including updated hidden fields and ViewState for
controls not included in the UpdatePanel).

When this arrives back at the browser, the JavaScript library updates
everything, including the contents of the UpdatePanel, but also all
the extra data. If your ASP.NET page updates the page title or even the page's
CSS styles, all of these are updated automatically.

Using the UpdatePanel

Despite all this automatic support, using the UpdatePanel
couldn't be simpler. There's a little install work – once the AJAX
extensions are installed, there are only a couple of additions to your
web.config file to paste in. (The easiest way to add these is simply to copy the
sample config file which should be installed to C:\Program Files\Microsoft
ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\web.config or somewhere
similar, depending on where you installed the extensions.) After that you can
AJAX-enable your website by adding just two tags to your webpage: a
ScriptManager and the UpdatePanel itself.

The ScriptManager control manages the AJAX JavaScript libraries
and writes



Labels: Ajax

# posted by Amit Patel @ 9:54 AM