AJAX -- UpdatePanel, ajaxupdatepanel

AJAX -- UpdatePanel, ajaxupdatepanel

Learning AJAX is the first control to be encountered. It is a little unfamiliar, so it is better to take the initiative to get close to something you have never touched. I learned the following and found that this control is very common. It appears in almost all the places where local refreshing is used.

First, let's take a look at the UpdatePanel structure:

<asp:ScriptManager ID="ScriptManager1" runat="server" > </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Always" RenderMode="Block"> <ContentTemplate> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger /> <asp:PostBackTrigger /> </Triggers> </asp:UpdatePanel>

What is UpdatePanel?

In general, UpdatePanel is a component implemented by AJAX and used for local update. The UpdatePanel control is actually one of the most used controls in Ajax. The content to be partially updated on the webpage must be placed in the UpdatePanel control, which must be used with the ScriptManager control.

 

Important attributes of UpdatePanel are as follows:

Attribute	Description
ChildrenAsTriggers	When the UpdateMode attribute is Conditional, whether the asynchronous return of the child control in UpdatePanel triggers UpdatePanle update.
RenderMode	Indicates the final HTML element of UpdatePanel. Block (default) indicates <div>, Inline indicates <span>
UpdateMode	UpdatePanel update mode. There are two options: Always and Conditional. Always: No matter whether there is a Trigger, other controls will update the UpdatePanel. Conditional indicates that only the Trigger of the current UpdatePanel is available, or the asynchronous or whole-page delivery triggered by the control in the current UpdatePanel is set to true, or the UpdatePanel will be updated only when the server calls the Update () method.
Contente Template	Used to define UpdatePanel content
AsyncPostBackTrigge	This interface is used to specify a server-side control and the server-side event that is triggered as the asynchronous update trigger of the UpdatePanel. It must be set with the Control ID and server-side control events; postBackTrigger is used to specify a Server Control in UpdatePanel. The callback triggered by PostBackTrigger is not asynchronous, but is still a traditional whole-page delivery.
Conditional	The panel content is updated only when the following conditions are met. If you set UpdateMode = "conditional" ChildrenAsTriggers = "false", the Child control cannot trigger an update. 1) when a widget in the panel triggers PostBack 2) When a Trigger specified by the Panel is triggered

The following is an example of a button for obtaining asynchronous updates on the page:

Page code:

<Asp: button ID = "Button1" runat = "server" Text = "Button"/> <script language = "javascript" type = "text/javascript"> // For updated panels prompt function highlightPanels (panels, clear) {for (var I = 0; I <panels. length; I ++) {var panel = panels [I]; // compare the panel. style. border = clear? "Solid 0px white": "solid 2px red"; panel. style. backgroundColor = clear? "White": "# d6dde8" ;}} // add_pageLoading event triggers Sys when the client obtains the server result but does not update updatepanel. webForms. pageRequestManager. getInstance (). add_pageLoading (function (sender, e) {// obtain an array and copy it immediately for retained. Otherwise, it is cleared because the array object is referenced ?? Var panelsUpdating = Array. clone (e. get_panelsUpdating (); // emphasize that the panel displays highlightPanels (panelsUpdating); // clear the highlighted window after 2 seconds. setTimeout (// The syntax here is not clear. The parameter call ??? Function () {highlightPanels (panelsUpdating, true) ;}, 2000) ;}); </script>

In the page load event, we get the asynchronous Update button.

ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(this.Button1);

Result:

In fact, learning controls is nothing more than what they are, what they are used, and what problems they are. Then we can see which process we are using, as well as in AJAX learning, timely is for a new control, we can follow these three steps. This is not only a process of learning a new control, but also a final summary of learning. The process is very important. It is even more important to sum up and get through the process.