Ajax. Net updatepanel comprehensive application (3) (client)

Http://blog.csdn.net/ccp5780199/archive/2007/08/31/1767677.aspx

Ajax. Net updatepanel comprehensive application (3) (client)

The first two articles are mainly about the server side. Today, they are all about the client side. You can also watch the video on webcast.

LPagerequestmanagerClass (PRM)

Static getinstance Method

-Obtain the globally unique pagerequestmanager instance.

Isinasyncpostback attribute

-Is it in an asynchronous update process?

Abortpostback Method

-Cancel the current asynchronous update.

-No exceptions

LClient Lifecycle

SYS. Application and pagerequestmanager are jointly formed

SYS. _ Application Event

-Init event

Based on the browser window. onload event

Triggered only when the page is initialized for the first time

All scripts have been loaded

Creation of all components is not started yet

Used to create various components

-Period in which components are referenced

-Detailed descriptions will be provided in subsequent courses.

-Load event

-Parameter type: SYS. applicationloadeventargs

Components attribute: obtains all created objects in the current loading phase.

Ispartialload attribute: whether asynchronous call causes page loading. Similar to ispostback

-The unload event is only used for notifications.

Shortcuts

-Pageload Method

-Pageunload Method

Pagerequestmanager event

-Triggered during asynchronous refresh

-Initializerequest

-Beginrequest

-Pageloading

-Pageloaded

-Endrequest

Go to the page

Exit page

PrM-pageloaded event

Pageunload Method

App-init event

App-unload event (after page loading)

App-load event

Pageload Method

PrM-initializerequest event

PrM-beginrequest event

Server processing, error timeout cancel direct PrM-endrequest event

PrM-pageloading event

PrM-pageloaded event

App-load event

Pageload Method

PrM-endrequest event

PrM-initializerequest event

Parameter type: initializerequesteventargs

-Request attribute: used to obtain the webrequest object (for Request Information)

-Postbackelement: Dom element that triggers asynchronous refresh

Common Operations:

-Read Request Information

-Cancel the asynchronous update.

Asynchronous refresh level

<Div>

<Asp: scriptmanager id = "scriptmanager1" runat = "server" scriptmode = debug>

</ASP: scriptmanager>

<Asp: updateprogress id = "updateprogress1" runat = "server" displayafter = "0" dynamiclayout = false>

<Progresstemplate>

<Span style = "color: Red"> loading... </span>

</Progresstemplate>

</ASP: updateprogress>

<Asp: updatepanel id = "updatepanel1" runat = "server">

<Contenttemplate>

<% = Datetime. Now %> <br/>

<Asp: Label id = "label1" runat = "server" text = "label"> </ASP: Label>

<Asp: button id = "btnprecedence" runat = "server" text = "Priority" onclick = "btnprecedence_click"/>

<Asp: button id = "button2" runat = "server" text = "normal" onclick = "btnprecedence_click"/>

</Contenttemplate>

</ASP: updatepanel>

<Script language = JavaScript type = "text/JavaScript">

VaR lastpostbackbuttonid = NULL;

VaR btnprecedenceid = "<% = This. btnprecedence. clientid %> ";

SYS. webforms. pagerequestmanager. getinstance (). add_initializerequest (

Function (sender, e ){

VaR PRM = SYS. webforms. pagerequestmanager. getinstance ();

// Whether it is in an asynchronous update process

If (PRM. get_isinasyncpostback ()){

// If the ID of the DOM element initiating asynchronous refresh is equal to the ID of the Priority Control

If (lastpostbackbuttonid = btnprecedenceid ){

E. set_cancel (true );

// If the ID of the DOM element initiating asynchronous refresh is equal to the ID of the Priority Control

If (E. get_postbackelement (). Id = btnprecedenceid ){

Showmessage ("Refresh should not be initiated repeatedly ");

}

Else {

Showmessage ("Please wait until the first refresh ends ");

}

Return;

}

Else if (E. get_postbackelement (). Id = btnprecedenceid ){

Showmessage ("initiate a priority refresh, normal refresh will be canceled ");

}

Else {

Showmessage ("re-initiate a normal refresh, the previous submission will be canceled ");

}

}

Lastpostbackbuttonid = E. get_postbackelement (). ID;

}

);

VaR timeoutseed = NULL;

Function showmessage (message, timeout ){

$ Get ("message"). innerhtml = message;

If (timeoutseed ){

Window. cleartimeout (timeoutseed );

}

Timeoutseed = Window. setTimeout (

Function () {$ get ("message"). innerhtml = "";},

Timeout | 2500 );

}

</SCRIPT>

</Div>

<Div id = "message" style = "color: Red";> </div>

Protected void btnprecedence_click (Object sender, eventargs E)

{

Thread. Sleep (3000 );

Button BTN = sender as button;

This. label1.text = string. Format ("You have clicked the {0} button", BTN. Text );

}

PrM-beginrequestEvent

Parameter type: beginrequesteventargs

-Request attribute: used to obtain the webrequest object (for Request Information)

-Postbackelement: Dom element that triggers asynchronous refresh

Common Operations:

-Read Request Information

-Change the Request Method (replace executor)

-An update prompt is displayed.

Force updateprogress display

<Asp: scriptmanager id = "scriptmanager1" runat = "server">

</ASP: scriptmanager>

<Asp: updatepanel id = "updatepanel1" runat = "server">

<Contenttemplate>

<% = Datetime. Now %>

<Asp: button id = "button1" runat = "server" text = "button1" onclick = "button#click"/>

</Contenttemplate>

<Triggers>

<Asp: asyncpostbacktrigger controlid = "button2"/>

</Triggers>

</ASP: updatepanel>

<Asp: updateprogress id = "updateprogress1" runat = "server" displayafter = 0 dynamiclayout = false associatedupdatepanelid = "updatepanel1">

<Progresstemplate>

<Span style = "color: Red"> loading... </span>

</Progresstemplate>

</ASP: updateprogress>

<HR/>

<Asp: button id = "button2" runat = "server" text = "button2" onclick = "button#click"/>

<Script language = JavaScript type = "text/JavaScript">

SYS. webforms. pagerequestmanager. getinstance (). add_beginrequest (

Function (sender, e ){

If (E. get_postbackelement (). ID! = "<% = This. button2.clientid %> "){

Return;

}

VaR updateprogress = $ get ("<% = This. updateprogress1.clientid %> ")

VaR dynamiclayout = <% = This. updateprogress1.dynamiclayout. tostring (). tolower () %>

If (dynamiclayout ){

Updateprogress. style. Display = "Block ";

}

Else {

Updateprogress. style. Visibility = "visible ";

}

}

);

</SCRIPT>

PrM-pageloadingEvent

Parameter type: pageloadingeventargs

-Dataitems attribute: obtains data items registered on the server.

-Panelsdeleting attribute: Get the updatepanel to be deleted

-Panelsupdating attribute: obtains the updatepanel to be updated.

Common Operations

-Updatepanel prompt

-(CAN) obtain data items registered on the server

Updatepanel prompt

<Script language = "JavaScript" type = "text/JavaScript">

Function highlightpanels (panels, clear)

{

For (VAR I = 0; I <panels. length; I ++)

{

VaR Panel = Panels [I];

Panel. style. Border = clear? "Solid 0px White": "solid 2px red ";

Panel. style. backgroundcolor = clear? "White": "# d6dde8 ";

}

}

SYS. webforms. pagerequestmanager. getinstance (). add_pageloading (

Function (sender, E)

{

VaR panelsupdating = array. Clone (E. get_panelsupdating ());

Highlightpanels (panelsupdating );

Window. setTimeout (

Function () {highlightpanels (panelsupdating, true );},

2000 );

});

</SCRIPT>

PrM-pageloadedEvent

Parameter type: pageloadedeventargs

-Dataitems attribute: obtains data items registered on the server.

-Panelscreated attribute: obtains the newly created updatepanel for nesting updatepanel.

-Panelsupdated attribute: obtains the updated updatepanel.

Common Operations:

-(CAN) obtain data items registered on the server

-(Capable) execute the script registered on the server.

Add local content

Public class comment

{

Public String content;

Public datetime time;

}

<Strong> comment: </strong> <br/>

<Asp: scriptmanager id = "scriptmanager1" runat = "server">

</ASP: scriptmanager>

<Div id = "commentcontainer">

<Asp: updatepanel id = "updatepanel1" runat = "server">

<Contenttemplate>

<Asp: repeater id = "repeater1" runat = "server">

<Itemtemplate>

<% # (Container. dataitem as comment). Content %> <br/>

<I> <% # (container. dataitem as comment). Time %> </I>

<HR/>

</Itemtemplate>

</ASP: repeater>

</Contenttemplate>

<Triggers>

<Asp: asyncpostbacktrigger controlid = "button1"/>

</Triggers>

</ASP: updatepanel>

</Div>

<Br/>

<Asp: textbox id = "textbox1" runat = "server"> </ASP: textbox>

<Asp: button id = "button1" runat = "server" text = "Add Comment" onclick = "button#click"/>

<Script language = JavaScript type = "text/JavaScript">

SYS. webforms. pagerequestmanager. getinstance (). add_pageloaded (

Function (sender, e ){

VaR upid = "<% = This. updatepanel1.clientid %> ";

VaR refreshedpanels = E. get_panelsupdated ();

For (VAR I = 0; I <refreshedpanels. length; I ++ ){

If (refreshedpanels [I]. ID = upid ){

Refreshedpanels [I]. ID = upid + math. Floor (9999 * Math. Random ());

VaR DIV = Document. createelement ("Div ");

Div. ID = upid;

$ Get ("commentcontainer"). appendchild (DIV );

Return;

}

}

}

);

</SCRIPT>

The main reason is that the data sent each time does not increase progressively.

PrM-endrequestEvent

Parameter type: endrequesteventargs

-Dataitems attribute: obtains data items registered on the server.

-Error attribute: errors obtained during asynchronous refresh

-Errorhandled attribute: indicates whether the error has been processed.

-Response Property: Get the result object of this request

• Common Operations:

-Process asynchronous refresh results (exception, timeout, cancellation, etc .)

-Obtain additional information in the request results

-(CAN) obtain data items registered on the server

Process asynchronous refresh results

Protected void page_load (Object sender, eventargs E)

{

Scriptmanager. getcurrent (this). asyncpostbacktimeout = 3;

}

Protected void btnerror_click (Object sender, eventargs E)

{

Int two = 2;

Int I = 3/(two-2 );

}

Protected void btntimeout_click (Object sender, eventargs E)

{

Thread. Sleep (5000 );

}

Protected void btndataitem_click (Object sender, eventargs E)

{

Scriptmanager. getcurrent (this). registerdataitem (this. updatepanel1, datetime. Now. tostring ());

}

<Asp: updatepanel id = "updatepanel1" runat = "server">

<Contenttemplate>

<% = Datetime. Now %> <br/>

<Asp: button id = "btnerror" runat = "server" text = "error" onclick = "btnerror_click"/>

<Asp: button id = "btntimeout" runat = "server" text = "timeout" onclick = "btntimeout_click"/>

<Input type = "button" value = "Abort" onclick = "SYS. webforms. pagerequestmanager. getinstance (). abortpostback ();"/>

<Asp: button id = "btndataitem" runat = "server" text = "register dataitem" onclick = "btndataitem_click"/>

</Contenttemplate>

</ASP: updatepanel>

<Script language = "JavaScript" type = "text/JavaScript">

SYS. webforms. pagerequestmanager. getinstance (). add_endrequest (

Function (sender, E)

{

If (E. get_error ())

{

E. set_errorhandled (true );

If (E. GET_RESPONSE (). get_timedout ())

{

Showmessage ("Your request has timed out. ");

}

Else if (E. GET_RESPONSE (). get_statuscode ()! = 200)

{

Showmessage ("Unknown error encountered. ");

}

Else

{

Showmessage (E. get_error (). Message );

}

}

Else if (E. GET_RESPONSE (). get_aborted ())

{

Showmessage ("Your request has been canceled. ");

}

Else

{

VaR upid = "<% = This. updatepanel1.clientid %> ";

VaR item = E. get_dataitems () [upid];

Showmessage ("You registered:" + item );

}

});

</SCRIPT>