14

UI で強調表示された [Current] タブを使用してタブ付きナビゲーションを作成するにはどうすればよいですか?

4

4 に答える 4

10

この問題を解決するために、いくつかの簡単なヘルパークラスを作成しました。このソリューションは、使用されているコントローラーとコントローラー内のアクションの両方を調べます。

public static string ActiveTab(this HtmlHelper helper, string activeController, string[] activeActions, string cssClass)  
{  
     string currentAction = helper.ViewContext.Controller.  
     ValueProvider.GetValue("action").RawValue.ToString();
     string currentController = helper.ViewContext.Controller.  
     ValueProvider.GetValue("controller").RawValue.ToString();  
     string cssClassToUse = currentController == activeController &&  
                            activeActions.Contains(currentAction)  
                            ? cssClass  
                            : string.Empty;  
     return cssClassToUse;  
}

この拡張メソッドは、次のコマンドで呼び出すことができます。

Html.ActiveTab("Home", new string[] {"Index", "Home"}, "active")

「インデックス」または「ホーム」アクションのいずれかでHomeControllerを使用している場合、これは「アクティブ」を返します。また、ActiveTabにいくつかのオーバーロードを追加して、使いやすくしました。ブログ投稿全体を読むことができます：http: //www.tomasjansson.com/blog/2010/05/asp-net-mvc-helper-for- active-tab-in-tab-menu/

これが誰かに役立つことを願っています。

よろしく、-トーマス

于 2010-05-28T07:32:15.627 に答える
10

MVC を導入する前は、ファイル パスを調べて、現在のタブを特定していました。現在のコントローラーに基づいて現在のタブを割り当てることができるようになりました。

見てみな ...

ほとんどの作業はユーザー コントロールで行われます。

public partial class AdminNavigation : ViewUserControl
{
    /// <summary>
    /// This hold a collection of controllers and their respective "tabs." Each Tab should have at least one controller in the collection.
    /// </summary>
    private readonly IDictionary<Type, string> dict = new Dictionary<Type, string>();

    public AdminNavigation()
    {
        dict.Add(typeof(BrandController), "catalog");
        dict.Add(typeof(CatalogController), "catalog");
        dict.Add(typeof(GroupController), "catalog");
        dict.Add(typeof(ItemController), "catalog");
        dict.Add(typeof(ConfigurationController), "configuration");
        dict.Add(typeof(CustomerController), "customer");
        dict.Add(typeof(DashboardController), "dashboard");
        dict.Add(typeof(OrderController), "order");
        dict.Add(typeof(WebsiteController), "website");
    }

    protected string SetClass(string linkToCheck)
    {
        Type controller = ViewContext.Controller.GetType();
        // We need to determine if the linkToCheck is equal to the current controller using dict as a Map
        string dictValue;
        dict.TryGetValue(controller, out dictValue);

        if (dictValue == linkToCheck)
        {
            return "current";
        }
        return "";
    }
}

次に、usercontol の .ascx 部分で SetClass メソッドを呼び出して、dict に対するリンクをチェックします。そのようです：

<li class="<%= SetClass("customer") %>"><%= Html.ActionLink<CustomerController>(c=>c.Index(),"Customers",new{@class="nav_customers"}) %></li>

今必要なのは、現在のタブを強調表示する CSS だけです。これを行うにはさまざまな方法がありますが、ここでいくつかのアイデアから始めることができます : http://webdeveloper.econsultant.com/css-menus-navigation-tabs/あなたのページ（またはMasterPage）で...

<% Html.RenderPartial("AdminNavigation"); %>
于 2008-11-13T17:53:38.190 に答える
3

現在のプロジェクトで使用している方法の1つです。これは、他のページ固有のCSSのニーズにも役立ちます。

まず、現在のコントローラーとアクションを表す文字列を返すHTMLヘルパー：

public static string BodyClass(RouteData data) {
   return string.Format("{0}-{1}", data.Values["Controller"], data.Values["Action"]).ToLower();
}

次に、マスターページでこのヘルパーへの呼び出しを追加します。

<body class="<%=AppHelper.BodyClass(ViewContext.RouteData) %>">
...
</body>

これで、CSSを使用して特定のページをターゲットにできます。ナビゲーションに関する正確な質問に答えるには：

#primaryNavigation a { ... }
.home-index #primaryNavigation a#home { ... }
.home-about #primaryNavigation a#about { ... }
.home-contact #primaryNavigation a#contact { ... }
/* etc. */
于 2009-08-10T13:30:59.793 に答える
1

MVC のデフォルトには、これに使用する必要があるSite.cssという名前のクラスが付属しています。'selectedLink'

ulのリストに次を追加します_Layout.cshtml。

@{
    var controller = @HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString();
}
<ul id="menu">                
    <li>@Html.ActionLink("Home", "Index", "Home", null, new { @class = controller == "Home" ? "selectedLink" : "" })</li>
    ...
</ul>

私はこれがきれいではないことを知っています。しかし、部分的なビューやそのようなものを台無しにすることなく、物事を進めるための簡単で汚い方法です。

于 2013-07-09T05:46:15.307 に答える