3

標準のヘッダーとフッター、およびRenderBody()関数で構成されるレイアウト ページがあります。私のヘッダーは、システム内のモジュールとして上部に大きなボタンがあるナビゲーションで構成されています

Customer    Quote    Jobs     etc

私の質問は、クリックされたボタンに応じて、これらのボタンにアクティブ オン ロードのクラスを与えることができるようにしたいということです。これをjavascriptで行う必要がありますか、それともモデルデータまたは変数をレイアウトファイルに渡してこれを設定できますか?

4

2 に答える 2

5

これを実現するために、次の関数を使用します。

public static string MarkActive<TModel>(this HtmlHelper<TModel> html,string url)
{
    if (html.ViewContext.HttpContext.Request.Url.LocalPath
        .ToLower().StartsWith(url.ToLower().Trim()))
        return "active";
    else
        return null;
}

これは、HtmlExtensions.csファイルに保持する拡張メソッドです。私はこのように使用します：

<ul>
    <li class="@Html.MarkActive("/home")"><a href="/home">Home</a></li>
    <li class="@Html.MarkActive("/microsite"><a href="/microsite">View Microsite</a></li>
    <li class="@Html.MarkActive("/settings")"><a href="/settings/">Settings</a></li>
    <li><a href="/account/logout">Log out</a></li>
</ul>

おそらくより良い解決策がありますが、これは私にとってはうまくいきます。つまり、ページの を調べる必要がHttpContextあります。

于 2013-01-24T13:03:57.057 に答える
0

次のアプローチを使用して、選択したメニュー項目を強調表示します。

    <ul class="menu">
        @{Dictionary<string, string> menuList = new Dictionary<string, string>() { 
                { "Customer", "Customer" },
                { "Quote", "Quote" },
                { "Jobs", "Jobs" },
                { "etc", "etc" },
            };
        }
        @foreach (var item in menuList )
        { 
            <li @(Request.ServerVariables["SCRIPT_NAME"].Contains(item.Key) ? " class=active" : string.Empty)>
                <a href="/Home/@item.Key">@item.Value</a></li>
        }
    </ul>

アクション名のitem.Key、メニュー内の対応する名前のitem.Value。

于 2013-01-24T13:51:15.093 に答える