使用ASP.NET MVC中的控制器和用户控件设置活动选项卡的简单方法？

Question

如何使用UI中突出显示的"当前"选项卡创建选项卡式导航？

Answer 1

在MVC之前,我查看了文件路径并找出了哪个选项卡是正常的.现在它更容易,您可以根据当前控制器分配当前选项卡.

看看这个 ...

大多数工作都发生在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 "";
    }
}

然后在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"); %>

Answer 2

我写了一些简单的帮助程序类来解决这个问题.该解决方案同时查看所使用的控制器以及控制器中的哪个操作.

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 /

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

问候, - 托马斯