JQuery-UI: How to pre-select a specific tab depending on which view the user cames from?

Question

Hello,

Let's say I have a page view called "PagePreview.aspx". on that page I've placed a UI tab Widget with 3 tabs, tab 1, tab2, and tab3. there's a link on each tab that leads to different pages on the site.

When the user accesses the PagePreview, I'd like a tab to be pre-selected depending on the view where he comes from. For instance, if a user comes from DetailsOfProducts.aspx, then "tab ProductsSummary" should be selected when pagePreview.aspx is loaded. If he rather comes from DetailsOfClient.aspx then tab "ClientsSummary" should be selected, and so on.

How can I do that with JqueryUI?

To make things easier, I've added a property on my model

public string PageOfOrigin { get; set; }

The difficulty is to get the value of that property and be able to use it's value. Thanks for helping

Answer 1

You can spit out .NET variables in scripts located within the view.

var tabsOpts = {
    selected:  getTabIndex('<%= html.encode(model.PageOfOrigin) %>')
};
$("#myTabs").tabs(tabsOpts);  

However, the tab indexes are integer based, so you will need to convert your page of origin to the proper integer (0 based) index of the proper tab if you using PageOfOrigin as as string.

function getTabIndex(originPage){
   switch (originPage){
      case "DetailsOfProducts.aspx":
          return 0;
      break;
      case "DetailsOfClient.aspx":
          return 1;
      break;
      default:
          return 0;
      break;
   }
}