Question

现在我有了这段代码：

<header id="header">
    <a asp-controller="Home" asp-action="Index" class="title">@ViewData["Title"]</a>
    <nav>
        <ul>
            <li><a asp-controller="Home" asp-action="Index" class="active">Home</a></li>
            <li><a asp-controller="Home" asp-action="About">About</a></li>
            <li><a asp-controller="Home" asp-action="Contact">Contact</a></li>
        </ul>
    </nav>
</header>

我在每个家/关于/联系页面都有这个代码。现在我想制作一个局部视图，并将其作为_NavBar存在于那里。但是，我无法检查选择了哪个菜单以及如何使设置的菜单动态显示为active。

我正在使用ASP.NET Core 2作为我的项目框架。

Answer 1

您可以通过传递ViewData中的当前菜单来执行此操作。在您的页面控制器中，您可以输入以下内容：

public class HomeController : Controller
{
    public IActionResult Index()
    {
        ViewData["menu-item"] = "index";
        return View();
    }

    public IActionResult About()
    {
        ViewData["menu-item"] = "about";
        return View();
    }

    public IActionResult Contact()
    {
        ViewData["menu-item"] = "contact";
        return View();
    }
}

并在您的部分视图中：

<header id="header">
    <a asp-controller="Home" asp-action="Index" class="title">@ViewData["Title"]</a>
    <nav>
        <ul>
            <li><a asp-controller="Home" asp-action="Index" class="@((string)ViewData["menu-item"] == "index" ? "active" : "")">Home</a></li>
            <li><a asp-controller="Home" asp-action="About" class="@((string)ViewData["menu-item"] == "about" ? "active" : "")">About</a></li>
            <li><a asp-controller="Home" asp-action="Contact" class="@((string)ViewData["menu-item"] == "contact" ? "active" : "")">Contact</a></li>
        </ul>
    </nav>
</header>

如何检查打开哪个菜单并根据该菜单显示文本？

1 个答案: