4GuysFromRolla.com :: Microsoft ASP.NET AJAX Article Series

Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Rebinding Client-Side Events After a Partial Page Postback

Wed, 08 Sep 2010 00:00:00 GMT

The UpdatePanel is the workhorse of the ASP.NET Ajax library. It is responsible for defining regions of a web page that trigger partial page postbacks (as opposed to full page postbacks). Such partial page postbacks transfer less information between the client and server and have their user interfaces updated seamlessly, thereby leading to a more interactive user experience. (For more information on UpdatePanels, refer to Using the UpdatePanel.) One side-effect of a partial page postback is that the HTML elements within the UpdatePanel are replaced with the markup returned on postback. This behavior is not noticeable and is not an issue unless you have client-side event handlers wired up to the elements within the UpdatePanel. Such client-side event handlers are lost after a partial page postback.

Consider a very simple UpdatePanel that contains just a TextBox and a Button. Furthermore, assume we have JavaScript on the page that creates an event handler for the TextBox's focus and blur events, which "highlights" the TextBox when the user focuses it and unhighlights it when losing focus. Initially, this script works as expected - clicking on the TextBox will "highlight" it. However, things break down once the Button is clicked. When the Button is clicked the UpdatePanel triggers a partial page postback and submits an asynchronous HTTP request back to the server. The requested ASP.NET page then goes through its life-cycle again, but this time only the markup in the UpdatePanel (and the hidden form fields on the page) are returned to the browser. The UpdatePanel then overwrites its existing markup with the markup just returned from the server. Unfortunately, this overwriting obliterates the focus and blur client-side event handlers, meaning that selecting the TextBox no longer highlights it.

In short, if there are client-side event handlers attached to HTML elements within an UpdatePanel it is imperative that they be rebound after a partial page postback. This article looks at three different ways to accomplish this. Read on to learn more!

Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Refreshing An UpdatePanel With JavaScript

Wed, 31 Mar 2010 00:00:00 GMT

The ASP.NET AJAX UpdatePanel provides a quick and easy way to implement a snappier, AJAX-based user interface in an ASP.NET WebForm. In a nutshell, UpdatePanels allow page developers to refresh selected parts of the page (instead of refreshing the entire page). Typically, an UpdatePanel contains user interface elements that would normally trigger a full page postback - controls like Buttons or DropDownLists that have their AutoPostBack property set to True. Such controls, when placed inside an UpdatePanel, cause a partial page postback to occur. On a partial page postback only the contents of the UpdatePanel are refreshed, avoiding the "flash" of having the entire page reloaded. (For a more in-depth look at the UpdatePanel control, refer back to the Using the UpdatePanel installment in this article series.)

Triggering a partial page postback refreshes the contents within an UpdatePanel, but what if you want to refresh an UpdatePanel's contents via JavaScript? Ideally, the UpdatePanel would have a client-side function named something like Refresh that could be called from script to perform a partial page postback and refresh the UpdatePanel. Unfortunately, no such function exists. Instead, you have to write script that triggers a partial page postback for the UpdatePanel you want to refresh. This article looks at how to accomplish this using just a single line of markup/script and includes a working demo you can download and try out for yourself. Read on to learn more!

Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Triggering Full Page Postbacks From An UpdatePanel

Wed, 02 Sep 2009 00:00:00 GMT

The ASP.NET AJAX UpdatePanel provides a quick and easy way to implement a snappier, AJAX-based user interface in an ASP.NET WebForm. In a nutshell, Web controls within the UpdatePanel that would normally cause a full page postback trigger a partial page postback, instead. For example, a Button Web control, when clicked, submits the form, causing the browser to start a full page postback. However, if the Button control is within an UpdatePanel then the UpdatePanel short-circuits the full page postback and performs a partial page postback, using JavaScript to make an HTTP request to the server. The server realizes that the request is a partial page postback (and not a full page postback) and only returns the markup for the UpdatePanels on the page. When this response is returned to the browser, JavaScript code parses it and seamlessly updates the user interfaces in the UpdatePanels. (For a more in-depth look at the UpdatePanel control, refer back to the Using the UpdatePanel installment in this article series.)

While we usually want controls within the UpdatePanel to perform a partial page postback, there are scenarios where we need a full page postback. ASP.NET AJAX allows us two techniques for specifying that certain controls within the UpdatePanel should cause a full page postback. The simplest approach is to define the controls declaratively using the UpdatePanel's Triggers collection. It is also possible to programmatically specify that a particular control should perform a full page postback, which is useful when the control(s) that need to perform a full page postback are not created until runtime (such as the Buttons in a GridView).

This article looks at how to configure full page postbacks for particular controls within an UpdatePanel, exploring both the declarative and programmatic techniques. Read on to learn more!

Building Interactive User Interfaces with Microsoft ASP.NET AJAX: A Look at JSON Serialization

Wed, 08 Apr 2009 00:00:00 GMT

Web applications commonly exchange information between the client (the browser) and the server (the ASP.NET application). In traditional web applications, this communication is usually insinuated when the visitor submits a form. This prompts the browser to re-request the page, sending the values of the form's inputs through the HTTP POST header. The server then renders the page and returns the entire page's markup, which is then redisplayed. AJAX-enabled web applications streamline this process. Instead of synchronous, bulky postbacks, AJAX-enabled applications use JavaScript to asynchronously communicate with the web server, transmitting only the necessary data and intelligently updating only the part of the screen whose contents have been modified (rather than redrawing the entire page, as with a full page postback).

Transmitting information over the Internet requires the sender to serialize it into some string-based format prior to sending it, and the receiver to deserialize it back into an object state that it can work with. For instance, if the client wants to send an array of integers to the server it must convert that array from its in-memory representation into a string, so that it can be transmitted across the network. Likewise, upon receiving the request, the receiver must turn that string representation of an array of integers back into an array of integers, so that it can use it programmatically.

XML was designed to serialize complex data into a string-based format, and early AJAX frameworks used XML as the serialization format. However, modern AJAX implementations use an alternate serialization format known as JavaScript Object Notation, or JSON. Like XML, JSON is an open, text-based serialization format, that is both human-readable and platform independent. It differs from XML in three important ways: it is much simpler to understand and implement than XML; it is less verbose, resulting in a slimmer payload; and, most importantly, data serialized in JSON can intuitively be parsed by JavaScript. In other words, working with data formatted in JSON in JavaScript involves one line of code - there's no need for a separate deserialization library or custom code to parse a message.

This article provides an overview of JSON's rules and illustrates how it is used in AJAX-enabled web applications. We'll also look at using the Microsoft ASP.NET AJAX framework's JavaScriptSerializer class, which facilitates serializing and deserializing JSON-formatted messages on the client in JavaScript or in C# or Visual Basic code on the server. Read on to learn more!

Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Retrieving Server-Side Data Using Web Services

Wed, 14 Jan 2009 00:00:00 GMT

Microsoft's ASP.NET AJAX framework offers two models for developing interactive web applications: client-centric and server-centric. With the server-centric model, developers use the standard ASP.NET controls - the GridView, Buttons, TextBoxes, and so forth - but place them within an UpdatePanel control. The UpdatePanel control automatically converts normal postbacks to partial page postbacks and seamlessly updates the page's display with any modifications made by server-side code. On the other hand, with the client-centric model the developer is responsible for writing the JavaScript that performs any asynchronous requests to the server, as well as the script that updates the page on response.

The server-centric model is easier to use and more familiar to developers who have a solid background with ASP.NET controls, but who are not as comfortable with JavaScript and HTML. However, that ease of use comes at a cost: the server-centric model shuttles a substantial amount of data between the client and server on each partial page postback. In short, the UpdatePanel sends the page's view state to the server on a partial page postback and receives this (perhaps modified) view state back in response, regardless of whether the view state is needed to perform the server-side logic. Moreover, the entire rendered contents of the UpdatePanel are returned on response, even if only a small portion of the content in the UpdatePanel has been modified.

The client-centric model involves a bit more work than the server-centric model and a familiarity with HTML, JavaScript, and the Document Object Model (DOM). But using the client-centric model can greatly reduce the quantity of information exchanged between the client and server during a partial page postback. This article looks at one technique for retrieving server-side data in the client-centric model. Read on to learn more!

Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Enabling Bookmarking and the Browser's Back Button

Wed, 08 Oct 2008 00:00:00 GMT

AJAX applications offer a more interactive user experience by replacing traditional full page postbacks with leaner and more efficient partial page postbacks. These partial page postbacks are executed asynchronously using JavaScript code in the browser. When a web surfer clicks on a link or submits a form (via a full page postback) the browser automatically adds the page being left to the browser's history. This allows the web surfer to use his Back and Forward buttons to navigate through this history. However, the partial page postbacks performed by AJAX applications do not cause the browser to register anything in their history. As a consequence, if a user visits an AJAX-enabled web page, performs a number of partial page postbacks, and then clicks the Back button, she is not returned to the state of the page prior to the last partial page postback. Instead, she is taken back to the page she was at before arriving at the AJAX-enabled web page.

The good news is that starting with ASP.NET 3.5 SP 1, the ScriptManager control in the ASP.NET AJAX Framework includes functionality for creating history points in an AJAX-enabled web page. Adding a history point creates an entry in the browser's history for a particular page state. What's more, this page state is encoded in the querystring of the browser, meaning that visitors can bookmark a particular state of an AJAX application.

This article shows how to add history points using the ScriptManager control. In particular, it shows how to record history points whenever the user pages or sorts a GridView. Read on to learn more!

Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Using the Timer Control

Wed, 18 Jun 2008 00:00:00 GMT

Microsoft's ASP.NET AJAX framework ships with a mere five Web controls: the ScriptManager and ScriptManagerProxy; the UpdatePanel; the UpdateProgress; and the Timer. Previous installments in this article series have examined all but one control, the Timer. As we've seen from the first installment, all web pages that use the framework must have precisely one ScriptManager control on the page. The UpdatePanel control defines a region on the screen whose content is updated via partial page postbacks, and the UpdateProgress control provides visual feedback during the execution of a partial page postback. The Timer control, which is the focus of this installment, raises a postback every time a specified number of milliseconds has elapsed.

The Timer control is useful in scenarios where a portion of the screen needs to be updated every so often. For example, many financial websites display stock quotes that are refreshed periodically. Prior to AJAX, refreshing the stock quote entailed reloading the entire document, which would result in a screen flash and necessitate the browser re-downloading the entire content of the page (even though the only change that has occurred is the stock quote). Using AJAX techniques we can have the page asynchronously communicate with the server to get the latest quote every n millisconds and seamlessly update the quote on screen. The Timer control, along with the UpdatePanel, make implementing such scenarios a breeze.

This article shows how to use the Timer control to trigger a partial page postback every five seconds. It also shows how to start and stop the Timer through both server-side and client-side code. Read on to learn more!

Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Performing Client Actions in Response to Partial Page Postbacks

Wed, 28 May 2008 00:00:00 GMT

The previous three articles in this series focused on building AJAX-enabled web applications using server-side techniques and controls. For instance, Using the UpdatePanel examined how to define regions on the page that participate and are updated by partial page postbacks; Providing Visual Feedback with the UpdateProgress Control showed how to use the UpdateProgress control to display feedback during a long-running partial page postback.

The ASP.NET AJAX Framework also includes a rich client-side library and event model that enables page developers to create and execute client script and event handlers that integrate with the ASP.NET AJAX Framework. This article starts our examination of client-side development with the ASP.NET AJAX Framework. In particular, it examines the client-side PageRequestManager object, which includes methods and events tied to the partial page postback mechanism. In a nutshell, we can use the PageRequestManager object to execute client-side script immediately before or after a partial page postback.

This article discusses the basics of the client-side PageRequestManager object and includes examples that show how to abort and cancel partial page postbacks as well as how to scroll to a particular location on screen after a partial page postback completes. These working demos are available for download at the end of this article. Read on to learn more!

Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Providing Visual Feedback with the UpdateProgress Control

Wed, 07 May 2008 00:00:00 GMT

Microsoft's ASP.NET AJAX Framework helps page developers design more interactive web pages by streamlining the postback mechanism. In traditional web pages, a full postback involves the browser re-requesting the page, which is then re-rendered. This re-rendered page markup is returned, in its entirety, to the browser for display. Ajax techniques improve the user's experience in two primary ways through the use of partial postbacks: first, a partial postback is asynchronous, meaning that the user can still interact with the page while waiting for the partial postback to complete; second, and more importantly, because a partial page postback updates only a particular region (or regions) of a page, less data needs to be shuttled between the client and the server, resulting in a quicker and smoother experience.

One benefit of full page postbacks is that the browser provides a number of cues to the user that a postback is underway. Upon the initiation of a postback, the little Internet icon in the browser's upper right corner starts spinning and a progress indicator is shown in the status bar, among other signs. With a partial page postback, however, no feedback is provided to the user. Consequently, a user may have instigated a partial page postback, but not realize it if the response is lagging. This may prompt them to click the button (or whatever instigated the partial postback) again, or they may just decry your website as buggy and close their browser, never to return again!

The good news is that the ASP.NET AJAX Framework includes the UpdateProgress control, a Web control designed specifically for providing visual feedback to a user during a long-running partial page postback. This article examines using the UpdateProgress. Read on to learn more!

Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Using the UpdatePanel

Wed, 24 Oct 2007 00:00:00 GMT

In Part 1 of this article series we looked at the basics of the ASP.NET AJAX framework. We discussed how to download and install the framework and the basics of the UpdatePanel. The UpdatePanel makes creating interactive user interfaces as easy as dragging and dropping. Simply add an UpdatePanel to the page and, within it, add those controls that you want to participate in the partial postback. With the UpdatePanel in place, any postback caused by a control within the UpdatePanel is converted into a partial page postback. Like with a full page postback, a partial page postback sends a request back to the server but does so through client-side script. Moreover, only those regions within UpdatePanels are rended and have their markup return in the HTTP response, and that markup is updated through JavaScript. In short, partial page postbacks make the page seem "snappier." There's less data sent between the client and server and the page is fluidly updated - there's no "flash" as with typical postbacks.

The UpdatePanel in Part 1 was pretty simplistic, involving a Label and a Button control. In this tutorial we'll look at some more real-world uses of the UpdatePanel and, in doing so, we will explore the UpdatePanel's properties in greater depth. In particular, this article first looks at using the GridView within the UpdatePanel. Next, it explores a demo that includes multiple UpdatePanels on the page and illustrates the effect of the UpdatePanel's UpdateMode, ChildrenAsTrigger, and Triggers properties. Read on to learn more!

Building Interactive User Interfaces with Microsoft ASP.NET AJAX: AJAX Basics and Getting Started with Microsoft's ASP.NET AJAX Framework

Wed, 10 Oct 2007 00:00:00 GMT

Over the past several years web developers have started using JavaScript to make asynchronous postbacks to the web server that only transmit and receive the necessary data; these techniques are commonly referred to as AJAX. When properly implemented, AJAX-enabled web applications offer a highly interactive user interface whose responsiveness rivals that of desktop applications. Popular web applications like the social networking news site Digg and GMail are prime examples of AJAX techniques in action.

Since AJAX involves many disparate technologies at different layers in the networking stack, implementing AJAX without the use of an AJAX framework is difficult and error-prone. Fortunately, Microsoft has released a free AJAX framework for ASP.NET developers: Microsoft ASP.NET AJAX. This article is the first in a series of articles that examines the ASP.NET AJAX framework. This installment provides an overview of AJAX technologies and looks at getting started with Microsoft's framework. Future installments will focus on specific controls and scenarios. Read on to learn more!