ASP.NET MVC: Comment présélectionner un onglet jQuery-UI en fonction de la valeur d'une propriété-modèle?

Question

Disons que j'ai les notes ci-dessous jusqu'à obtenu en utilisant des valeurs des propriétés de certains modèles:

<div id = "tabs"> 
<ul> 
    <%foreach(var category in Model.Categories){%> 
     <li><a href = "#category.Name">category.Name</a></li> 
    <%}%> 
</ul> 
<%foreach(var category in Model.Categories){%> 
    <div id = "category.Name"> 
     //Content for each category goes here.... 
    </div> 
<%}%> 
</div> 

Utilisation JQuery Je suis en mesure de créer facilement un widget onglets

$("#tabs").tabs(); 

Le modèle contient également une propriété appelée ListOfListArticle, qui correspond à une liste d'articles. Les articles de la liste intérieure sont regroupés par catégorie. Il existe également une autre propriété appelée ArticleToDisplay.

public List<List<Articles>> ListOfListArticle { get; set; } 
public Article ArticleToDisplay { get; set; } 
public List<Category> Categories { get; set; } 

Je voudrais vérifier d'abord la catégorie à laquelle l'article appartient à afficher et pouvoir sélectionner automatiquement l'onglet correspondant à cette catégorie. Pour l'instant, lorsque la page se charge, le premier onglet est toujours sélectionné.

Une façon de gérer cela?

Merci de votre aide.

Answer 1

$("#tabs").tabs(
    { selected: <%=Model.Categories.IndexOf(Model.ArticleToDisplay.Category) %> } 
); 

pourrait mieux faire qu'une propriété sur votre modèle

public int Index 
{ 
    get 
    { 
     if (Categories == null || ArticleToDisplay == null || ArticleToDisplay.Category == null) 
      return 0; 

     return Categories.IndexOf(ArticleToDisplay.Category); 
    } 
} 

alors vous pouvez simplement écrire:

$("#tabs").tabs(
    { selected: <%=Model.Index %> } 
); 

Answer 2

j'avais même exigence.
J'ai utilisé un champ caché puis JS pour obtenir cette valeur pour définir l'onglet jquery ui

1) Je mets un champ caché sur la forme ...

<%: Html.HiddenFor(model => model.EnmCreateCaseTab) %> 

2) J'ai un javascript sur mesure de code de la page, qui enveloppe js pour la page entière, donc en haut de la page je

<script type="text/javascript"> 
    Sys.onReady(function() { 
     var page = MyApp.newMyPage(); 
     page.Setup(); 
    }); 
</script> 

(Ceci est classe javascript dans le style de Douglas Crockford ...) Soit le cteur ou la page.Setup() fn puis ca LLS une fn privée qui obtient la valeur de la commande cachée et définit l'onglet avec le javascript

var SelectInitiallySelectedTab = function() { 
     var formValueEnmCreateCaseTab = $("#EnmCreateCaseTab").val(); 
     // ... 
     // set a jquery tabs control 
     SelectTab(tabNum); 
} 
var SelectTab = function (tabNum) { 
     // ensure tabNum is in bounds 
     var tabCount = TabCount(); 
     var maxTabIndex = tabCount - 1; 
     tabNum = tabNum < 0 ? 0 : tabNum; 
     tabNum = tabNum > maxTabIndex ? maxTabIndex : tabNum; 
     $('#tabs').tabs({ selected: tabNum }); 
    } 

Le champ caché, peut être utilisé pour retenir l'utilisateur onglet sélectionné dans re-présente ...

Answer 3

juste ajouter la classe ui-tabs-selected à l'élément <li> prévu.

pour plus de détails, voir page suivante de débordement de pile

Opening page with tab preselected that's not the first tab