CSS 如何在ASP.NET MVC中给Html.ActionLink添加“active”类

在本文中，我们将介绍如何使用CSS在ASP.NET MVC中为Html.ActionLink添加“active”类。在ASP.NET MVC中，Html.ActionLink用于创建超链接，允许我们链接到View中的不同页面或执行Controller中的不同操作。

阅读更多：CSS 教程

什么是“active”类？

“active”类是一个常见的CSS类，用于突出显示当前被选中或处于活动状态的元素。通过为当前页面或活动链接添加“active”类，我们可以通过应用特定的样式来突出显示链接，使用户知道他们当时位于哪个页面或执行了哪个操作。

添加“active”类的方法

要为Html.ActionLink添加“active”类，我们可以使用以下两种方法：

方法一：使用ViewBag在View中

在Controller中，我们可以使用ViewBag来设置当前活动页面的标志。然后，在View中，我们可以使用Razor语法来检查当前页面并相应地为Html.ActionLink添加“active”类。下面是一个例子：

// HomeController.cs

public ActionResult Index()
{
    ViewBag.ActivePage = "Home";
    return View();
}

public ActionResult About()
{
    ViewBag.ActivePage = "About";
    return View();
}

<!-- _Layout.cshtml -->
<ul class="nav">
    <li><a href="@Url.Action("Index", "Home")" class="@(ViewBag.ActivePage == "Home" ? "active" : "")">Home</a></li>
    <li><a href="@Url.Action("About", "Home")" class="@(ViewBag.ActivePage == "About" ? "active" : "")">About</a></li>
</ul>

在上面的例子中，我们使用ViewBag.ActivePage来设置当前活动页面的值。然后，在HTML代码中，我们使用Razor语法来检查当前页面是否与目标页面匹配，并在匹配时为Html.ActionLink添加“active”类。

方法二：使用CSS在URL中检查

另一种方法是使用CSS选择器在URL中检查当前页面，并通过CSS样式为Html.ActionLink添加“active”类。下面是一个例子：

<!-- _Layout.cshtml -->
<ul class="nav">
    <li><a href="@Url.Action("Index", "Home")">Home</a></li>
    <li><a href="@Url.Action("About", "Home")">About</a></li>
</ul>

/* Site.css */
.nav a[href*="Index"] {
    /* 添加样式 */
}

.nav a[href*="About"] {
    /* 添加样式 */
}

在上面的例子中，我们使用CSS选择器来检查URL是否包含目标页面的标识。如果是，我们可以通过为其添加特定的CSS样式来为Html.ActionLink添加“active”类。

示例

假设我们有一个基本的ASP.NET MVC应用程序，其中包含以下几个页面：首页（Index），关于我们（AboutUs）和联系我们（ContactUs）。

在HomeController.cs中，我们使用ViewBag设置当前活动页面：

// HomeController.cs

public ActionResult Index()
{
    ViewBag.ActivePage = "Home";
    return View();
}

public ActionResult AboutUs()
{
    ViewBag.ActivePage = "AboutUs";
    return View();
}

public ActionResult ContactUs()
{
    ViewBag.ActivePage = "ContactUs";
    return View();
}

在_Layout.cshtml中，我们使用Razor语法为Html.ActionLink添加“active”类：

<!-- _Layout.cshtml -->
<ul class="nav">
    <li><a href="@Url.Action("Index", "Home")" class="@(ViewBag.ActivePage == "Home" ? "active" : "")">Home</a></li>
    <li><a href="@Url.Action("AboutUs", "Home")" class="@(ViewBag.ActivePage == "AboutUs" ? "active" : "")">About Us</a></li>
    <li><a href="@Url.Action("ContactUs", "Home")" class="@(ViewBag.ActivePage == "ContactUs" ? "active" : "")">Contact Us</a></li>
</ul>

在上面的例子中，我们通过检查ViewBag.ActivePage的值来确定当前活动页面，并使用Razor语法为Html.ActionLink添加“active”类。

总结

通过本文，我们学习了如何使用CSS在ASP.NET MVC中为Html.ActionLink添加“active”类。通过上述示例，我们可以根据需要选择使用ViewBag在View中设置当前活动页面的标志或使用CSS选择器在URL中检查当前页面，并相应地为Html.ActionLink添加“active”类。这将为用户提供更好的导航和用户体验。