JavaScript improvement: 005:asp.net using Easyui tabs tags to display problems

Source: Internet
Author: User

The easy UI was used earlier to implement a tabs tag (http://blog.csdn.net/yysyangyangyangshan/article/details/38307477), However, a problem was found when used in ASP.
As we all know, the control of the ASP. NET page, when the control event is not using the "Return JS function ();" , or the control registers a background event, the entire page reloads. At this point the easy UI implementation of the tabs tag, always back to the first tab page. Although Ajax and jquery can be used to achieve both front-and back-table interactions
($.ajax mode front and rear interaction: http://blog.csdn.net/yysyangyangyangshan/article/details/22438077
$.post mode before and after interaction: http://blog.csdn.net/yysyangyangyangshan/article/details/22755007).
The background data can be converted to a JSON string, passed to the foreground, the foreground is split to restore the content, assigned to the corresponding control. This is also a way.
However, JavaScript is only an auxiliary language, in the ASP. NET if all the front and back of the interaction with JS this way to achieve, it is not possible, it becomes a trifles, after all, is the event mechanism of ASP, is very convenient.
For this tabs problem, how to solve it?
The idea is simple, just remember the last tab page, and then when the page refresh read out the Last tab, when the page is initialized, the specified tab page is forced to display.
Here are a few more important steps:
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 been said (http://blog.csdn.net/yysyangyangyangshan/article/details/38306591).


See all the code directly:
The front code is as follows:

$ (document). Ready (function (): Here is the method that executes when the page is initialized, where you read the index of the tab page that you saved before, and then let tabs display the tab of the saved index, and also bind a tab-tag click event;
Functions Buttontabheadclick (): This function is to record the index of the current tag when the tab tag is selected, which is saved by a static variable in the background;
"<%=getselectedtab ()%>": The method that completes the foreground call backstage.
Two buttons click 1 and click 2 is the test, if do not do any processing, whenever the button click, tabs always show the first one.

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 "tabtitl                    E ": Setselectedtab ();                Break            Default:break;         }}///<summary>//Save the selected tab///</summary> private void Setselectedtab ()        {selecttabtitle = request["Selecttabtitle"];        }///<summary>///Get 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 label 2, the page will be refreshed and the label 2 will still be displayed.

Code Download: http://download.csdn.net/detail/yysyangyangyangshan/7758201
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.