9

Twitter ブートストラップに基づいてページを作成しています。

特定の CUD で、div のクラスを変更する必要があります。class="tab-pane active"またはclass="tab-pane"ビューモデルのプロパティに応じて。

プロパティはおそらく int になり、すべての div について、アクティブなタブで検証を行います。これは正しいですね。

私は次のように考えました：

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

しかし、明らかにこれはうまくいきませんでした

4

2 に答える 2

11

このようにしてみてください：

<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>
于 2012-04-19T13:42:55.753 に答える
3

これは機能するはずです：

<div class="@(Model.ActiveTab == 1 ? "tab-pane active" : "tab-pane")"  id="1">
于 2012-04-19T13:42:30.130 に答える