c# - 根据 ViewModel 的属性更改 div 类

Question

我正在创建一个基于 Twitter bootstrap 的页面。

在特定的 CUD 中，我需要更改一个 div 的类。 class="tab-pane active" 或 class="tab-pane" 取决于我的 View 模型的属性。

该属性可能是一个 int，然后对于每个 div，我将在事件选项卡上进行验证。听起来不错吧？

我的想法是这样的:

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

但显然这不起作用

Answer 1

像这样尝试:

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

或者为了避免这种可怕的标签汤，编写一个自定义的 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);
    }
}

可以这样使用:

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

在这种情况下会发出:

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