Introduction to Atlas UpdatePanel
Dflying | 24 March, 2006 20:08UpdatePanel is so important an Atlas control that connects the traditional ASP.NET application and the new Web 2.0 AJAX implementation. That is, if you own applications wrote by ASP.NET, you do not need to take many changes to get it runs as the cool AJAX way by using UpdatePanel. Or, if you are not familiar with the whole branch of AJAX staffs such as JavaScript/DOM, UpdatePanel provides you a very simple way to use AJAX by warping you dynamic contents in an UpdatePanel, just like the Magic AJAX Framework does.
What you need to update your ASP.NET application to AJAX is just following steps:
- Create your form just using ASP.NET without any ideas about AJAX
- Add a ScriptManager object to the page and set EnablePartialUpdates=true
- Add an UpdatePanel around the section you want updated without PostBack
- Add some Event Triggers to the UpdatePanel to trigger the AJAX update action
And that’s all. You never need to know about the XMLHTTPRequest or ActiveX object, neither the mass of client side JavaScript or how to communicate with server logics.
Atlas UpdatePanel basically goes back to the server and runs the page as it normally would, but when it comes time to render the ScriptManager is just going to render only the UpdatePanel content plus the page header, including the all important ViewState of course. Simple and amazing.
There are a few things you may missing when using this simple AJAX way:
You must set EnablePartialUpdates=true in your ScriptManager. Then the ScriptManager can run the __doPostBack(something) JavaScript PostBacks warped in UpdatePanel in Async mode, which is the AJAX way. Otherwise you will just get the traditional full page PostBack with all page refreshed.
Then, there are two kinds of Triggers to fire a AJAX PostBack.
- ControlValueTrigger: fires the PostBack when a control’s specified property changes. E.g. ControlID="dropDownList1" PropertyName="SelectedValue"
- ControlEventTrigger: fires the PostBack when a control raises a specified event. E.g. ControlID="button1" EventName="Click"
At last, UpdatePanel has two ways of updating: Mode=”Always” which is the default and Mode=” conditional”.
- Always: This panel’s going to be updated every time a AJAX PostBack returns or traditional PostBack returns (of course).
- Conditional: This panel’s going to be rendered when one of three things happen:
- A control within it is clicked and causes the PostBack (this is nice since it means the control encapsulation model just works).
- A trigger is declaratively wired up from that update-panel to another control on the page. The trigger mechanism allows you to fire when either a control value has changed, or if a control event fires.
- The "Update()" method on the panel is programmatically called. This is useful when you want to have server conditional logic to indicate whether the panel should refresh (giving you totally control).
Here is a piece of demo code for UpdatePanel
<atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" /> <atlas:UpdatePanel ID="up1" runat="server"> <Triggers> <atlas:ControlValueTrigger ControlID="dropDownList1" PropertyName="SelectedValue" /> <atlas:ControlEventTrigger ControlID="button1" EventName="Click" /> </Triggers> <ContentTemplate> Content Here. e.g. TextBox, GridView </ContentTemplate> </atlas:UpdatePanel>
Two other cool features for you to play with while the UpdatePanel are: UpdateProgress control and error handling. When you add an UpdateProgress control to the page it automatically shows while the AJAX callback is in processing. You can embed au "updating" text message or an animated .gif in there to easily provide visual feedback for users (no need to write JavaScript code either). The error handling stuff also makes it much easier to handle errors at runtime (which today can be a mess with a lot of AJAX solutions, including the Windows Live Mail).
Posted in
Atlas.
Comment: (0).
Trackbacks:(193).
Permalink
«Next post |
Previous post»