AJAX -- UpdatePanel, ajaxupdatepanel

Source: Internet
Author: User

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.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.