Cambia classe div in base alla proprietà di ViewModel

Question

Sto creando una pagina basata sul bootstrap di Twitter.

In uno specifico CUD, ho bisogno di cambiare una classe di un div. class="tab-pane active" o class="tab-pane" in base alla proprietà del mio viewmodel.

La proprietà probabilmente diventerà un int, e quindi per ogni div, effettuerò una verifica nella scheda attiva. Suona bene?

ho pensato a qualcosa di simile:

<div(@Model.ActiveTab == 1 ? class="tab-pane active" : class="tab-pane") id="1"> 

ma ovviamente questo non ha funzionato

Answer 1

Prova in questo modo:

<div class="tab-pane @(Model.ActiveTab == 1 ? " active" : "")" id="1"> 
    ... 
</div> 

o per evitare questo hor Rible zuppa di tag scrivere un aiutante HTML personalizzato:

public static class TabExtensions 
{ 
    private class TabControl: IDisposable 
    { 
     private readonly ViewContext _viewContext; 
     public TabControl(ViewContext viewContext) 
     { 
      _viewContext = viewContext; 
     } 

     public void Dispose() 
     { 
      _viewContext.Writer.Write("</div>"); 
     } 
    } 

    public static IDisposable Tab(this HtmlHelper htmlHelper, bool active, object htmlAttributes) 
    { 
     var div = new TagBuilder("div"); 
     div.MergeAttributes(new RouteValueDictionary(htmlAttributes)); 
     div.AddCssClass("tab-pane"); 
     if (active) 
     { 
      div.AddCssClass("active"); 
     } 
     htmlHelper.ViewContext.Writer.Write(div.ToString(TagRenderMode.StartTag)); 
     return new TabControl(htmlHelper.ViewContext); 
    } 
} 

che potrebbe essere utilizzato come quella:

@using (Html.Tab(Model.ActiveTab == 1, new { id = "tab1" })) 
{ 
    ... 
} 

e che in questo caso emetterebbe:

<div class="tab-pane active" id="tab1"> 
    ... 
</div> 

Answer 2

Questo dovrebbe funzionare:

<div class="@(Model.ActiveTab == 1 ? "tab-pane active" : "tab-pane")" id="1">