UpdatePanel and jquery-easyui are used in the project.
The advantage of using updatepanel is that the page is not refreshed, and the user feels better, while also reducing the transmission of some data.
The advantages of easyui are not only the interface but also the convenience of use.
<Div class = "easyui-tabs" style = "width: 300px"> <div title = "Search">... </div> <div title = "select">... </div> <div title = "return">... </div>
You only need to define a corresponding class for him to achieve various effects.
However, if you put it in updatepanel, and it is not the first time that it is displayed, it will cause a fault.
For example:
Code
<Asp: MultiView ID = "MultiView1" runat = "server"> <asp: view ID = "View1" runat = "server"> <div class = "easyui-tabs" style = "width: 300px"> <div title = "Search">... </div> <div title = "select">... </div> <div title = "return">... </div> </asp: View> <asp: view ID = "View2" runat = "server"> <div class = "easyui-tabs" style = "width: 300px"> <div title = "Search">... </div> <div title = "select">... </div> <div title = "return">... </div> </asp: View> </asp: MultiView>
Define two identical views in the multipleView, with the same content. Put MultiView1 in updatepanel.
Then set it to display the first view
MultiView1.ActiveViewIndex = 0;
Browse. Displayed normally. But when we change the display of the view, for example, change the above to MultiView1.ActiveViewIndex = 1; then the effect of the second veiw will be completely lost.
Find the cause in jquery. easyui. min. js. See this sentence
R = $ (". easyui-tabs", _ 1ec); if (r. length) {r. tabs ();
After the webpage is loaded, find the layer of the class defined as easyui-tabs. And attach the effect to him.
As you can imagine, when a page is loaded, We will display the first view, so js will find the layer in the view and give it the effect.
Then we updated the displayed view in updatepanel, although the content was switched to the second view. However, the page is not reloaded, and the above js Code does not change the execution of the new view.
Therefore, the decision is to re-execute the js Code after the updatepanel is sent back.
Define a rebinding function on the page.
Function EndRequestHandler () {$ (". easyui-tabs"). tabs ();} defines another event. Function reload () {Sys. WebForms. PageRequestManager. getInstance (). add_endRequest (EndRequestHandler );}
The add_endRequestPageRequestManager class is a paging update that manages the server UpdatePanel control in a browser. In addition, some attributes, events, and methods are defined to customize webpages through client scripts. Call the getInstance method to obtain the PageRequestManager class instance. Then, use the add_endRequest method to bind the endRequest event (asynchronous sending is completed, and the control is triggered after the return to the browser ). In this way, the EndRequestHandler () function will be triggered every time the updatepanel callback occurs. Rebind the effect once. $ (Document). ready (function () {reload ();})
The failure problem is solved.
Original article: http://www.cnblogs.com/topdog/archive/2010/04/11/1709413.html