johns76@yahoo.com says,
Introduction
Microsoft’s ASP.NET technology brings an object-oriented and event-driven programming model and unites it with the benefits of compiled code. However, its server-side processing model has several drawbacks inherent in the technology:
- Page updates require a round-trip to the server, which requires a page refresh.
- Round-trips do not persist any effects generated by Javascript or other client-side technology (such as Adobe Flash)
- During postback, browsers other than Microsoft Internet Explorer do not support automatically restoring the scroll position. And even in Internet Explorer, there is still a flicker as the page is refreshed.
- Postbacks may involve a high amount of bandwidth as the __VIEWSTATE form field may grow, especially when dealing with controls such as the GridView control or repeaters.
- There is no unified model for accessing Web Services through JavaScript or other client-side technology.
Enter Microsoft’s ASP.NET AJAX extensions. AJAX, which stands for Asynchronous JavaScript And XML, is an integrated framework for providing incremental page updates via cross-platform JavaScript, composed of server-side code comprising the Microsoft AJAX Framework, and a script component called the Microsoft AJAX Script Library. The ASP.NET AJAX extensions also provide cross-platform support for accessing ASP.NET Web Services via JavaScript.
This whitepaper examines the partial page updates functionality of the ASP.NET AJAX Extensions, which includes the ScriptManager component, the UpdatePanel control, and the UpdateProgress control, and considers scenarios in which they should or should not be utilized.
This whitepaper is based on the Beta 2 release of the Visual Studio 2008 and the .NET Framework 3.5, which integrates the ASP.NET AJAX Extensions into the Base Class Library (where it was previously an add-on component available for ASP.NET 2.0). This whitepaper also assumes that you are using Visual Studio 2008 and not Visual Web Developer Express Edition; some project templates that are referenced may not be available to Visual Web Developer Express users.
Partial Page Updates
Perhaps the most visible feature of the ASP.NET AJAX Extensions is the ability to do a partial or incremental page updates without doing a full postback to the server, with no code changes and minimal markup changes. The advantages are extensive – the state of your multimedia (such as Adobe Flash or Windows Media) is unchanged, bandwidth costs are reduced, and the client does not experience the flicker usually associated with a postback.
The ability to integrate partial page rendering is integrated into ASP.NET with minimal changes into your project.
Walkthrough: Integrating Partial Rendering into an Existing Project
- In Microsoft Visual Studio 2008, create a new ASP.NET Web Site project by going to File –> New –> Web Site… and selecting “ASP.NET Web Site” from the dialog. You can name it whatever you like, and you may install it either to the file system or into Internet Information Services (IIS).
- You will be presented with the blank default page with basic ASP.NET markup (a server-side form and an
@Page directive). Drop a Label called Label1 and a Button called Button1 onto the page within the form element. You may set their text properties to whatever you like.
- In Design view, double-click
Button1 to generate a code-behind event handler. Within this event handler, set Label1.Text to “You clicked the button!”.
Listing 1: Markup for default.aspx before partial rendering is enabled
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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 runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label> <asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" /> </div> </form> </body> </html>
Listing 2: Codebehind (trimmed) in default.aspx.cs
public partial class _Default : System.Web.UI.Page { protected void Button1_Click(object sender, EventArgs e) { Label1.Text = "You clicked the button!"; } }
