14

如何在 UI 中突出显示“当前”选项卡来创建选项卡式导航？

4

4 回答 4

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

然后在用户控制的 .ascx 部分调用 SetClass 方法来检查与字典的链接。像这样：

<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 回答
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")

如果我们在“Index”或“Home”操作中的 HomeController 上，这将返回“active”。我还为 ActiveTab 添加了一些额外的重载以使其更易于使用，您可以阅读整个博客文章：http ://www.tomasjansson.com/blog/2010/05/asp-net-mvc-helper-for- active-tab-in-tab-menu/

希望这会对某人有所帮助。

问候，--托马斯

于 2010-05-28T07:32:15.627 回答
3

我在当前项目中使用的一种方法 - 这也有助于其他特定于页面的 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 回答