Question

我正在查看StackOverflow网站，我注意到有一个Class="youarehere"属性设置为活动视图的按钮。这导致橙色样式而不是灰色样式。

有谁能告诉我他们是怎么做到的？根据URL动态设置类的最简单方法是什么？

Answer 1

为这些按钮编写html帮助程序可能是一种方法。假设设置了标准路由：

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
    "Default",
    "{controller}/{action}/{id}",
    new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

这是助手的样子：

public static MvcHtmlString MyButton(this HtmlHelper htmlHelper, string id, string text)
{
    var button = new TagBuilder("input");
    button.MergeAttribute("type", "button");
    button.MergeAttribute("value", text);
    // get the id from the current route:
    var routeId = htmlHelper.ViewContext.RouteData.Values["id"] as string;
    if (id == routeId)
    {
        button.MergeAttribute("class", "active");
    }
    return MvcHtmlString.Create(button.ToString(TagRenderMode.SelfClosing));
}

最后添加到您的视图中：

<%= Html.MyButton("questions", "Questions") %>
<%= Html.MyButton("tags", "Tags") %>
<%= Html.MyButton("users", "Users") %>

要进一步改进帮助程序，您可以添加其他参数，这些参数将包含操作以及此按钮在单击时将重定向到的控制器。

Answer 2

我认为最简单的方法是从控制器/动作中将信息放在ViewData中，告诉视图它在哪里，这就是我所做的。

在视图中，您将从ViewData获取该数据，然后确定要与哪个位置关联的类名。请务必使用HTML帮助程序。

问题控制器下的操作：

public ActionResult Index()
{
      ViewData["CurrentPage"] = "Questions";
}

Html Helper：

public static string GetLocationCssClassName(this HtmlHelper html)
{
         string cssClass = string.Empty;
         if(html.ViewData["CurrentPage"] != null)
         {
             string currentPage = (string)html.ViewData["CurrentPage"];
             switch(currentPage)
             { 
                 case "Questions":
                       cssClass = "question_css_class";
                       break;
                 case "Tags":
                       cssClass = "tags_css_class";
                       break;
                 case "Users":
                       cssClass = "users_css_class";
                       break;

             }
         }
         return cssClass;
}

查看页面：

<div id="main" class="<%: Html.GetLocationCssClassName() %>">

   <a href="Questions/Index" class="questions">Questions</a>
   <a href="Tags/Index" class="tags">Tags</a>
   <a href="Users/Index" class="users">Users</a>

</div>

的CSS：

.question_css_class a.questions
{
    background-color: Orange;
}

代码可以无休止地改进，但你得到了要点。您的视图可以访问ViewData。指定一个特定的键，该键将保存当前页面并根据该特定键内的值输出正确的类。

Answer 3

我有另一种解决方案。而不是让助手类决定哪个“菜单”是活动菜单。在你的控制器的行动中决定。

您的控制器

public ActionView Questions()
{
    MyViewModel model = new MyViewModel ();
    model.CurrentMenu = "Questions"; 
    ViewData.Model = model;
}

public ActionView Tags()
{
    MyViewModel model = new MyViewModel ();
    model.CurrentMenu = "Tags"; 
    ViewData.Model = model;
}

在视图（强类型视图）

中

<div id="menu">    
    <ul>
    <li class="<%= Html.IsSelectedMenu(Model.CurrentMenu,'Questions') %>"<a href="/Home/Questions">Questions</a></li> 
    <li class="<%= Html.IsSelectedMenu(Model.CurrentMenu,'Tags') %>"<a href="/Home/Tags">Tags</a></li> 
    </ul>
</div>

在您的css中

li.youarehere
{
    background-color: orange;
    color: #ffffff;
}

在您的助手类

public static class MyHtmlExtensions
{
    public static MvcHtmlString IsSelectedMenu(this HtmlHelper helper, string currentMenu, string menu2)
    {
        return currentMenu.Equals (menu2)? "youarehere" : "";
    }
}

Answer 4

这是我需要的答案（在VB中）谢谢@Darin

Imports System.Web.Mvc
Imports System.Web.Mvc.Html

Namespace Utilities.HtmlHelpers
    Public Module PagingHelpers
        Sub New()
        End Sub

        <System.Runtime.CompilerServices.Extension()> _
        Public Function CustomLink( _
                ByVal htmlHelper As HtmlHelper, _
                ByVal linkText As String, _
                ByVal actionName As String, _
                ByVal controllerName As String) As MvcHtmlString


            Dim currentAction As String = TryCast(htmlHelper.ViewContext.RouteData.Values.Item("action"), String)
            Dim currentController As String = TryCast(htmlHelper.ViewContext.RouteData.Values.Item("controller"), String)
            If ((actionName = currentAction) AndAlso _
                (controllerName = currentController)) Or _
                ((controllerName = currentController) AndAlso _
                Not controllerName = "Events") Then
                Return htmlHelper.ActionLink( _
                    linkText, _
                    actionName, _
                    controllerName, _
                    Nothing, _
                    New With { _
                        .class = "youarehere" _
                    })
            End If
            Return htmlHelper.ActionLink(linkText, actionName, controllerName)
        End Function
    End Module

End Namespace

Answer 5

你可以创建一个HtmlHelper来返回值，这样你可以在任何地方使用它

在项目中创建“HtmlHelpers”文件夹创建一个静态类使用第一个参数“this HtmlHelper helper”

定义静态方法

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Mvc;

namespace ThisMVCApp.WebUI.HtmlHelpers
{
  public static class HtmlHelperExtensions
  {
    public static string IfActive(this HtmlHelper helper, string controller, string action)
    {
      string classValue = "";

      string currentController = helper.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString();
      string currentAction = helper.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString();

      if (currentController == controller && currentAction == action)
      {
        classValue = "youarehere";
      }

      return classValue;
    }
  }
}

将此添加到您的web.config文件（Views文件夹中的文件!!）

<system.web.webPages.razor>
  <host ... />
  <pages pageBaseType="System.Web.Mvc.WebViewPage">
    <namespaces>
      ...
      <add namespace="ThisMVCApp.WebUI.HtmlHelpers" />
    </namespaces>
  </pages>
</system.web.webPages.razor>

现在你可以将上面的方法应用为按钮上的任何类或属性，或者像这样的任何元素：

<nav>
  <ul id="menu">
    <li class="@Html.IfActive("Home", "Index")">@Html.ActionLink("Home", "Index", "Home")</li>
    <li class="@Html.IfActive("Home", "About")">@Html.ActionLink("About", "About", "Home")</li>
 </ul>
</nav>

ASP.NET MVC动态设置CSS Class以根据路由列出项目

5 个答案: