ASP. NET Ajax advance Tips & tricks (5) updatepanel and jquery

Preface:

Now more and more friends prefer jquery and ASP. net Ajax is used together. Recently, many Indians complained in forum that updatepanel is incompatible with jquery, and many jquery effects will not work after updatepanel is updated. This article analyzes the Framework Structure of the two to solve this compatibility problem.

Problem reproduction: 1 . Add scriptmanager and updatepanel to the page.

2. Add element a to updatepanel.

3. Use jquery to add X to element.

4. Add a button B in updatepanel for PostBack.

Result: When the first page is loaded, the X Effect of Element A is normal. After you click B, the page is refreshed. At this time, element a loses the X effect.

 

Analysis 1: updatepanel

Updatepanel is mainly used for partial refresh in applications to avoid the PostBack of the entire page.

The core of updatepanel partial refresh is the microsoftajaxwebform. js file. Its partial refresh process is to submit the page to the server (including viewstate) and execute the serverCodeThen, the HTML in updatepanel is re-rendered asynchronously.

In this process, the status of other parts of the page does not change.

Analysis 2: jquery

Jquery can add various attributes and event handles to HTML elements through simple code. Here we can see the official documentation:

Tutorials: How jquery works
Http://docs.jquery.com/How_jQuery_Works

Here, we can know that jquery has an important event mark "ready". Generally, the effect of HTML elements and the event handle are added through this ready event, as shown below:

$ (Document). Ready ( Function (){
$ ( " P " ). Text ( " The Dom is now loaded and can be manipulated. " );
});

 

The official explanation for this is: The ready event will run once after the Dom is fully loaded. OK. At this point, the cause of the problem is almost clear:

Cause:

Because element a in updatepanel is overwritten after partial refreshing, and the entire DOM tree is not reloaded, The jquery ready event is not triggered, therefore, element a loses its original special effect.

Solution:

We can extract the code executed in the ready event, capture the scriptmanager endrequest event, and execute the jquery initialization code after each partial update of updatepanel, as shown below:

< Script Type = "Text/JavaScript" >
Function Load (){
SYS. webforms. pagerequestmanager. getinstance (). add_endrequest (endrequesthandler );
}

FunctionEndrequesthandler (){
Readyfunction1 ();
Readyfunction2 ();
Readyfunction3 ();
}
</Script>

<BodyOnload= "Load ()">