Zmień klasę div na podstawie właściwości ViewModel

Question

Tworzę stronę opartą na bootstrapie na Twitterze.

W konkretnym CUD, potrzebuję zmienić klasę div. class="tab-pane active" lub class="tab-pane" w zależności od właściwości mojego viewmodel.

Właściwość prawdopodobnie będzie int, a następnie dla każdego div dokonam weryfikacji na aktywnej zakładce. Brzmi dobrze?

myślałem w czymś takim:

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

ale oczywiście to nie działa

Answer 1

Spróbuj tak:

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

lub aby uniknąć tego hor rible zupa tag napisać pomocnika niestandardowych HTML:

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

które mogłyby zostać wykorzystane tak:

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

i który w tym przypadku będzie emitował:

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

Answer 2

To powinno działać:

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