JavaScript improvement: 005: ASP. NET use easyUI TABS Label display problems

JavaScript improvement: 005: ASP. NET use easyUI TABS Label display problems
A tabs tag (http://blog.csdn.net/yysyangyangyangshan/article/details/38307477) was previously implemented using easy ui, but a problem was found in ASP. NET.
As we all know, when the control of the asp.net page does not use "return js function ();", or the control registers background events, the whole page will be reloaded. At this time, the tabs label implemented by easy ui always returns to the first tab page. Although ajax and jQuery can be used to achieve frontend and backend Interaction
($. Ajax front-end Interaction: http://blog.csdn.net/yysyangyangyangshan/article/details/22438077
$. Post mode front-Background Interaction: http://blog.csdn.net/yysyangyangyangshan/article/details/22755007 ).
The data in the background can be converted to a json string and passed to the foreground. The foreground splits and restores the content and assigns a value to the corresponding control. This is also a method.
However, javascript is only an auxiliary language. NET, if we use js to implement all front-end and back-end interactions, it is impossible, it becomes the end-to-end, after all, ASP. NET event mechanism is very convenient.
How can we solve this tabs problem?
The idea is simple. It is nothing more than remembering the tab page selected last time. Then, when the page is refreshed, the last tab is read and the specified tab page is forcibly displayed during page initialization.
The following steps are important:
1. Record the Selected tab;
2. Read the specified tab;
3. display the specified tab.


About the use of easyui js and style files, the previous article has said (http://blog.csdn.net/yysyangyangyangshan/article/details/38306591 ).


View all the Code directly:
The front-end code is as follows:

        
     
 <Script src = "Scripts/EasyUI/jquery-1.8.0.min.js" type = "text/javascript"> </script> <script src = "Scripts/EasyUI/jquery. easyui. min. js "type =" text/javascript "> </script> <script src =" Scripts/EasyUI/easyui-lang-zh_CN.js "type =" text/javascript "> </script> <script src = "Scripts/Common. js "type =" text/javascript "> </script> <script src =" Scripts/Ajax. js "type =" text/javascript "> </script><Script type = "text/javascript"> $ ('# tabTop '). tabs ({width: $ ("# tabTop "). parent (). width (), height: "auto", onSelect: function (title) {// This is the default selected event, but when pageload is executed, this will also be executed }}); // initialization-always display the tag saved in the background $ (document ). ready (function () {var tabTitle = parseInt ("<% = GetSelectedTab () %>"); if (tabTitle! = Null & tabTitle> = 0) {$ ("# tabTop "). tabs ("select", tabTitle) ;}$ ('# tabTop '). bind ('click', function () {buttonTabHeadClick () ;}); // click the event function buttonTabHeadClick () {var title = parseInt ($ ('. tabs-selected '). index (); var oldTitle = parseInt ("<% = GetSelectedTab () %>"); if (oldTitle> = 0 & title = oldTitle) {return false ;} var selectObj = new Object (); selectObj. selectTabTitle = title; selectObj. operateType = "TabTitle"; var htmlObjects = $. ajax ({type: "POST", data: selectObj, async: true, success: function (result) {}, error: function (result ){}}); return false ;}</script>

$ (Document ). ready (function (): This is the method executed during page initialization. Here, read the index of the previously saved tab, and then let tabs display the tab of the saved index; at the same time, a click event of the tab label is bound;
Function buttonTabHeadClick (): This function records the index of the current tag when the tab tag is selected. Here, a static variable is saved in the background;
"<% = GetSelectedTab () %>": Call the background method on the frontend.
Click 1 and 2 for the two buttons for testing. If no processing is performed, tabs will always display the first one when the button is clicked.

Background code:

Public partial class _ Default: System. Web. UI. Page {protected static string SelectTabTitle = "0"; protected void Page_Load (object sender, EventArgs e) {if (! IsPostBack) {} switch (Request ["OperateType"]) {case "TabTitle": SetSelectedTab (); break; default: break ;}}////// Save the Selected tab ///Private void SetSelectedTab () {SelectTabTitle = Request ["SelectTabTitle"];} ///// Obtain the Selected tab //////
 Protected string GetSelectedTab () {return SelectTabTitle;} protected void Tab1_Button_Click (object sender, EventArgs e) {} protected void Tab2_Button_Click (object sender, EventArgs e ){}}

The effect is as follows:
Download: http://download.csdn.net/detail/yysyangyangyangshan/7758201