Cambiar clase div basada en la propiedad de ViewModel

Question

Estoy creando una página basada en el arranque de Twitter.

En un CUD específico, necesito cambiar una clase de div. class="tab-pane active" o class="tab-pane" dependiendo de la propiedad de mi viewmodel.

La propiedad probablemente será una int, y luego para cada div, haré una verificación en la pestaña activa. Esto suena bien?

pensé en algo así como:

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

pero obviamente esto no funcionaba

Answer 1

Trate de esta manera:

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

o para evitar esta hor Sopa etiqueta Rible escribir un ayudante HTML personalizada:

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); 
    } 
} 

que podría ser utilizado como esa:

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

y que en este caso emitiría:

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

Answer 2

Esto debería funcionar:

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