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), Only one problem was found when used in ASP.
We all know that. The control of an ASP. NET page, when the control's event is not using the "Return JS function ();" , or the control is registered as a background event. Then the entire page will be loaded again.

At this point the easy UI implementation of the tabs tag, always back to the first tab page.

Although it is possible to use Ajax and jquery 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 ability to convert the background data into a JSON string, passed to the foreground, the foreground is split to restore the content. Assigned to the appropriate control. This is also a way.
Just, JavaScript is only an auxiliary language, in the net in the assumption that all the front and back of the interaction with JS such a way to achieve, it is impossible, it became a trifles, after all, is the event mechanism of ASP, is very convenient.
For this tabs problem. How to solve it?
The idea is very easy. Just remember the tab page you checked last time. Then, when the page refreshes, the last tab is read out, and the specified tab page is forced to appear when the page is initialized.
Here are a few steps that are more important:
1, record the selected tab;
2, read the specified tab;
3. Display the specified tab.




About the use of the 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 foreground code is as follows:


$ (document). Ready (function (): Here is the method that runs when the page is initialized, where you read the index of the previously Saved tab page, and then let tabs display the tab of the saved index, and also bind a tab click event at the same time;
function Buttontabheadclick (): this functions. is to record the index of the current label when the tab tag is selected. It is stored here with a static variable in the background;
"<%=getselectedtab ()%>": The method that the foreground call backstage is finished.
Two buttons click 1 and click 2 is tested, assuming not to do whatever processing, whenever the button is clicked. Tabs always shows 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) {}} 
Effects such as the following:

Click the button even under label 2. After the page refreshes, the label 2 is still displayed.



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

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

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.