在 ASP.NET MVC 中使用控制器和用户控件设置活动选

问题描述

如何在 UI 中突出显示当前"选项卡时创建选项卡式导航?

How do I create tabbed navigation with the "Current" tab highlighted in the UI?

推荐答案

在使用 MVC 之前，我查看了文件路径并找出了当前的选项卡.现在简单多了，你可以根据当前的控制器来分配当前的标签页.

Before MVC I looked at the file path and figured out which tab was currrent. Now it's a lot easier, you can assign the current tab based on the current controller.

看看...

大部分工作发生在用户控件中.

Most of the work happens in the usercontrol.

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 方法来检查与字典的链接.像这样:

Then in your .ascx part of the usercontol call into the SetClass method to check the link against the dict. Like so:

<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)上......

All you need now is the CSS to highlight your current tab. There are a bunch of different ways to do this, but you can get started with some ideas here: http://webdeveloper.econsultant.com/css-menus-navigation-tabs/ Oh, and don't forget to put the usercontrol on your page (or MasterPage) ...

<% Html.RenderPartial("AdminNavigation"); %>

这篇关于在 ASP.NET MVC 中使用控制器和用户控件设置活动选项卡的简单方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！