|
AJAX-enable an Existing ASP.NET Web Page
|
by Brian Finnerty
Feedback
|
Average Rating:
Views (Total / Last 10 Days):
39746/
70
|
|
|
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 are 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 is needed to update the current page.
Although the technologies that support AJAX-style web apps
have been around for years, they were not 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 have understood the basics, you will use an InnerWorkings coding challenge that
provides a sample AJAX-enabled bug tracking website to help you really
understand how to use the AJAX Extensions.
Figure 1
|
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 not 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 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 AJAX
Control Toolkit contains prewritten components like panels that can be
dragged around the page and rating controls to enable users to submit feedback.
|
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 not 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 is sent however, another bit of AJAX magic kicks in. Everything that is not 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
could not be simpler. There is 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 <script> tags to tell the browser what to download.
This process is mostly automatic, although you can also configure the control
to include your own scripts or to generate JavaScript for calling web services
hosted on your server. To add a ScriptManager to your page, just add a
ScriptManager tag to any server-side form within the page.
Listing 1
<form runat="server">
<asp:ScriptManager runat="server" />
<!-- rest of form continues… -->
</form>
The UpdatePanel is used to define the section of the page
that should update without a full page refresh. To use the default features,
just enclose the part of the page you want to AJAX-enable in a matching pair of
UpdatePanel and ContentTemplate tags. In the example below, the SubmitButton
and ResponseLabel tags are inside the UpdatePanel – when the SubmitButton is
clicked, a message appears without the page refreshing. To see how the page
updates without using AJAX, you can comment out the UpdatePanel and
ContentTemplate tags, leaving the Button and Label tags in place.
Listing 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Ajax test page</title>
</head>
<body>
<form id="AjaxTestForm" runat="server">
<asp:ScriptManager runat="server" />
<p>
What's your name?<br />
<asp:TextBox ID="NameText" runat="server" />
</p>
<p>
When's your birthday?<br />
<asp:TextBox ID="BirthdayText" runat="server" /><br />
</p>
<span class=Bold><asp:UpdatePanel runat="server"></span>
<span class=Bold> <ContentTemplate></span>
<asp:Button ID="SubmitButton" runat="server" Text="Submit"
OnClick="SubmitButton_Click" /><br />
<asp:Label ID="ResponseLabel" runat="server" />
<span class=Bold></ContentTemplate></span>
<span class=Bold> </asp:UpdatePanel></span>
</form>
<script runat="server" language="csharp">
private void SubmitButton_Click(object sender, EventArgs e)
{
DateTime birthday = DateTime.Parse(BirthdayText.Text);
if (birthday.Date < DateTime.Today.Date)
ResponseLabel.Text = string.Format(
"Sorry {0}, looks like I missed your birthday!", NameText.Text);
else if (birthday.Date > DateTime.Today.Date)
ResponseLabel.Text = string.Format(
"Thanks {0}, I'll put that date in my diary!", NameText.Text);
else
ResponseLabel.Text = string.Format("Happy Birthday {0}!", NameText.Text);
}
</script>
</body>
</html>
Figure 2
|
Try It Out |
As you can see, adding the UpdatePanel to an existing page
could not be much simpler, but there is a lot more to the AJAX extensions than
just the UpdatePanel. A great place to start if you want to see what is
possible is the ASP.NET
AJAX showcase.
|
What is 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 are finished, InnerWorkings Developer automatically checks your code
so you can be sure you have solved the challenge correctly and that you really
understand what you have 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 catalog.
|
Conclusion |
Download the free ASP.NET
AJAX Drill from InnerWorkings and see how to use the Update Panel in a real
application. Once you have solved the challenges it contains, you will know you
are ready to start using AJAX in your next project.
|
References |
|
About the Author |
Michael O'Brien lives in Dublin, Ireland where he works for
InnerWorkings. He currently concentrates on the software that allows
InnerWorkings Developer to check code solutions submitted to the InnerWorkings
code judging engine. When he is not knee-deep in System.Reflection, he likes to
play with ASP.NET and a little bit of Ruby.
|
|
|
|
|
|
|