Asp.net mvc 在ASP.NET MVC中使用控制器和用户控件设置活动选项卡的简单方法？_Asp.net Mvc_Css_User Interface_Tabs

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

asp.net-mvc css user-interface tabs

Asp.net mvc 在ASP.NET MVC中使用控制器和用户控件设置活动选项卡的简单方法？,asp.net-mvc,css,user-interface,tabs,Asp.net Mvc,Css,User Interface,Tabs,如何在UI中突出显示“当前”选项卡的情况下创建选项卡式导航？在MVC之前，我查看了文件路径并确定了当前使用的选项卡。现在更容易了，您可以基于当前控制器分配当前选项卡 public static string ActiveTab(this HtmlHelper helper, string activeController, string[] activeActions, string cssClass) { string currentAction = helper.ViewC

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

在MVC之前，我查看了文件路径并确定了当前使用的选项卡。现在更容易了，您可以基于当前控制器分配当前选项卡

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

看看

大部分工作发生在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 "";
    }
}

公共部分类AdminNavigation:ViewUserControl { /// ///这包含一组控制器及其各自的“选项卡”。每个选项卡中至少应有一个控制器。 /// 私有只读IDictionary dict=new Dictionary（）；公共管理导航（） { dict.Add（品牌控制器的类型），“目录”）； dict.Add（目录控制器的类型），“目录”）； dict.Add（typeof（GroupController），“目录”）； dict.Add（项目控制器的类型），“目录”）； dict.Add（配置控制器的类型），“配置”）； dict.Add（类型为（客户控制器），“客户”）； dict.Add（仪表板控制器的类型），“仪表板”）； dict.Add（订单控制器的类型），“订单”）； dict.Add（类型为（网站控制器），“网站”）； } 受保护的字符串集合类（字符串链接检查） { 类型controller=ViewContext.controller.GetType（）； //我们需要确定linkToCheck是否等于使用dict作为映射的当前控制器字符串值； dict.TryGetValue（控制器，输出dict值）； if（dictValue==linkToCheck） { 返回“当前”； } 返回“”； } } 然后在usercontol的.ascx部分调用SetClass方法，以对照dict检查链接。如下所示：

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

c.Index（），“客户”，新的{@class=“nav_客户”}）%%>

现在您只需要CSS来突出显示当前选项卡。有很多不同的方法可以做到这一点，但您可以在这里开始一些想法：哦，别忘了把用户控件放在你的页面（或母版页）

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

我编写了一些简单的助手类来解决这个问题。该解决方案同时关注使用的控制器以及控制器中的操作

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添加了一些额外的重载，以使其更易于使用，您可以在以下网站上阅读整个博客文章：

希望这能帮助别人

问候,，

--Tomas

MVC的默认

站点。css

附带一个名为

'selectedLink'

的类，该类应用于此目的

将以下内容添加到

\u Layout.cshtml

中的

ul

列表中：

@{
    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>

@{
var controller=@HttpContext.Current.Request.RequestContext.RouteData.Values[“controller”].ToString（）；
}

@ActionLink（“Home”、“Index”、“Home”、null，新的{@class=controller==“Home”？“selectedLink”：“}）
...

我知道这不干净。但这只是一种快速而肮脏的方式，可以让事情顺利进行，而不会干扰部分观点或诸如此类的观点。

请先用问题的形式表达这些观点，然后在单独的帖子中提供答案。当我看到你修正了我的否决票时，我会取消它。否则我将不得不以“不是一个真正的问题”来结束它。这个问题太大了，现在又太小了：P hahaDid他在sames post上写下了问题和答案？@PatrickDesjardins是的……我的字典有用吗？看起来它应该是字典。当一个控制器有两个动作时呢？@Anthony-这段代码有效，现在正在生产中@Anthony2-你的意思是你希望每个控制器操作都突出显示不同的选项卡？这没用。我建议将特定于控制器的nav放在用户控件中，并声明在页面中嵌入UC时要激活哪个选项卡。@tomas jansson URL似乎不再解析…是现在吗（？）

@{
    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>