Home > Developer > Web Develop
JavaScript improvement: 005: ASP. NET uses easyUI TABS label to display problems, easyuitabs
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:
<Html xmlns = "http://www.w3.org/1999/xhtml">
$ (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 ;}} /// <summary> /// Save the Selected tab /// </summary> private void SetSelectedTab () {SelectTabTitle = Request ["SelectTabTitle"];} /// <summary> /// obtain the Selected tab /// </summary> /// <returns> </returns> 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:
Even if you click the button under tag 2, tag 2 is still displayed after the page is refreshed.
Code download: http://download.csdn.net/detail/yysyangyangyangshan/7758201
To solve the problem that jquery easyUi cannot enable tabs, set it upI don't need this for a long time. I can only show you what I wrote before. You can study it yourself.
If (! $ ('# Func_tab '). tabs ('exists', node. text) {$ ('# func_tab '). tabs ('add', {title: node. text, content: "<iframe width = '000000' height = '000000' frameborder = '0' src =" + node. attributes. url + "style = 'width: 100%; height: 100%; '> </iframe>", closable: true, tools: [{iconCls: 'icon-mini-refresh ', handler: function () {var tab = $ ('# func_tab '). tabs ('select', node. text); $ ('# func_tab '). tabs ('getselected', tab); var tabIndex = $ ('# func_tab '). tabs ('getselected'); tabIndex. panel ('refresh') ;}}]});}
Methods for tabs in easyui plug-in to determine whether a tag exists/** Whether the current tab exists. If yes, it is automatically selected. Otherwise, a new tab is created **/
If ($ ('# main-tab'). tabs ('exists', title )){
$ ('# Main-tab'). tabs ('select', title );
} Else {
/** Add a tab **/
$ ("# Main-tab"). tabs ('add ',{
Title: title,
Selected: true,
Closable: true
});
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
