|
Using the ASP.NET AJAX UpdatePanel (ASP.Net) |
|
|
Written by: Evan Cummings
Using the ASP.NET AJAX UpdatePanelAs web developers we are faced with many obstacles unique to the medium in which we work. The internet provides an unprecedented audience for our work, but also bears the burden in that its stateless structure often makes it challenge to develop applications that provide the swift and familiar functionality of desktop software. Todays trends are continually headed toward an ever growing interconnected network of people, computers, and information, and the demand for seemless integration is growing amongst end users.
Background
A huge step toward breaching the gap between the thick desktop client flexibility with that of the thin web client has been through the development of client-side callbacks, which is a way to harness the clients browser to communicate with the web server, effectively targetting information that changes - but leaving the remaining markup untouched. This technology grew to be known as AJAX, which stands for Asynchronous Javascript and XML. The AJAX movement has become incredibly large as people have discovered how to harness the ideas and benefits of AJAX techniques and applied them to create richer and more interactive applications on the web. One striking aspect of true AJAX in action is that it involves a real knowledge of JavaScript and its inner workings to facilitate complicated interactions between the client and server. This can make implementing AJAX in its truest form rather challenging.
Fortunately, Microsoft has released a new control set to encapsulate this complexity and provide us an easy to use implementation of them through AJAX Server Controls, available immediately with Visual Studio 2008, and available as a seperate downloadable extension for Visual Studio 2005. The real workhorse of this set of controls is easily the UpdatePanel, which allows us to simply target particular controls and areas of a page to perform partial page postbacks. The partial page postback is the real foundation of creating a more responsive application that acts like it is the familiar desktop client software. By reducing or even completely eliminating the 'flicker' of a postback, users can experience a far more seamless interface than previously possibly with the web.
Using the UpdatePanel
So how do we use this control? An UpdatePanel itself is a container type item that can contain controls that you want to be effected by postbacks. By itself, it won't do much - we need the help of another control. The ScriptManager -
<asp:ScriptManager EnablePartialRendering="true" runat="server" ID="scriptManager1" />
- is required to be on any page that we intended to utilize AJAX controls on. This acts as a sort of bridge between the client and the server, and handles generating all of the necessary client-side scripting to handle asynchronous calls. We don't really need to worry about any sort of configuration (unless, of course, you have some specific needs) - the existence of the ScriptManager itself is enough.
With our ScriptManager in place, we can now add our UpdatePanel to our page, as such -
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> </asp:UpdatePanel>
At this point, you may be tempted to start dropping in controls and segments to benefit from the UpdatePanel - but we aren't there yet. A few more details and then we will be ready to go.
Much like the data presentation controls, such as the ListView, DataList, or GridView, we have to define templates within the control. For the UpdatePanel, we declare a <ContentTemplate> which servers as the container for our controls. In this example, we will place a ListBox, ListBox1, inside of our ContentTemplate with the UpdatePanel -
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:ListBox ID="ListBox1" runat="server"> </ContentTemplate> </asp:UpdatePanel>
We have now declared what we want to benefit from a partial page postback, but now we need to finalize all of this by defining <Triggers>. A Trigger is simply an event in which we wireup to fire the partial page postback. You are provided two options - an AsyncPostBackTrigger and a PostbackTrigger. As you can probably guess, the power of this control comes from the AsyncPostBackTrigger. Don't fully write off the other option, however - it can be useful if a full postback truly is necessary (see http://www.stellarpc.com/articles/board.aspx?id=23http://www.stellarpc.com/articles/board.aspx?id=23 for an example).
To implement this with our ListBox example -
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:ListBox ID="ListBox1" runat="server"> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="ListBox1" Event="SelectedIndexChanged"> </Triggers> </asp:UpdatePanel>
Within the trigger tag, we establish the control to trigger the update on, ListBox1, and define the event in which the partial page postback will occur, SelectedIndexChanged. Note carefully here a couple things - the Event is not the specific event name as it is in the code-behind (ie ListBox1_SelectedIndexChanged), it is the general name for the event. The event property, if excluded, will default to the default action for that particular control. For example, a button's default event is Click, so we could omit the event if the trigger is on the Click event. In this case, I could have omitted SelectedIndexChanged, but including the event alleviates any potential confusion.
Conclusion
This is all that is required to create a fully functioning UpdatePanel and start enjoying the benefits of AJAX technology immediately in your application. To recap the steps:
1) Place a ScriptManager Control on any aspx page that will use AJAX controls
2) Place an UpdatePanel Control on your page where you desire partial page postback functionality
3) Define the ContentTemplate area with the UpdatePanel and place your controls and structures inside
4) Define the appropriate events that should trigger the UpdatePanel
As you can see, the power in this control lies in its simplicity - we can completely avoid writing any confusing or cryptic client side scripts and leave that for ASP.NET to handle.
|
|
|
|
|
|