c# - ASP.NET MVC 5 - 获取当前 View 的名称(Razor .cshtml 端)

Question

我是一名学生，对 ASP.NET MVC 还很陌生，我来自 ASP.NET Web Form。 (习惯了)

我有一个列表:

<ul class="sidebar bg-grayDark">
    <li class="active">
        <a href="@Url.Action("Index", "Home")">
            <span class="mif-home icon"></span>
            <span class="title">Home</span>
        </a>
    </li>
    <li class="bg-hover-black">
        <a href="@Url.Action("Index", "Product")">
            <span class="mif-shop icon"></span>
            <span class="title">Products</span>
            <span class="counter">14</span>
        </a>
    </li>
    <li class="bg-hover-black">
        <a href="@Url.Action("Index", "Category")">
            <span class="mif-flow-cascade icon"></span>
            <span class="title">Categories</span>
            <span class="counter">9</span>
        </a>
    </li>
    <li class="bg-hover-black">
        <a href="@Url.Action("Index", "User")">
            <span class="mif-users icon"></span>
            <span class="title">Users</span>
            <span class="counter">1</span>
        </a>
    </li>
</ul>

我的目标: 通过渲染哪个 View ，我想给被点击的 添加“active”。 例子:我点击“Category”，然后 Home 失去了他的事件类，Category 将“active”添加到他的类中。 (与 “bg-hover-black” 相反)

我以为我可以通过检查实际呈现的 View 来做到这一点，但我不知道该怎么做。 (我不知道如何检查渲染的实际 View ，但使用 Razor 来检查条件是可以的)

我首先尝试使用 JavaScript:

    $(function () {
        $('.sidebar').on('click', 'li', function () {
            if (!$(this).hasClass('active')) {
                $('.sidebar li').removeClass('active');
                $(this).addClass('active');
            }
        })
    })
    

但它不起作用，因为当页面加载时，html 将重新呈现为主页部分的“事件”。 (如果我删除主页的“事件”，那么除了点击和页面加载之间之外，没有任何内容会在点击时处于事件状态)。

你有什么解决办法吗？我在网上搜索了很多，但没有找到对我有帮助的东西。

对于任何英语错误，我深表歉意，我还在学习:)。

谢谢，

hell 猫8。

Answer 1

由于您使用的是页面以 Controller 命名的约定，因此您可以在 razor 中执行此操作以获取 Controller /页面名称:

@{
 var pageName = ViewContext.RouteData.Values["controller"].ToString();
}

<ul class="sidebar bg-grayDark">
    <li class="@(pageName == "Home" ? "active" : "")">
        <a href="@Url.Action("Index", "Home")">
            <span class="mif-home icon"></span>
            <span class="title">Home</span>
        </a>
    </li>
    <li class="bg-hover-black @(pageName == "Product" ? "active" : "")">
        <a href="@Url.Action("Index", "Product")">
            <span class="mif-shop icon"></span>
            <span class="title">Products</span>
            <span class="counter">14</span>
        </a>
    </li>
    <li class="bg-hover-black @(pageName == "Category" ? "active" : "")">
        <a href="@Url.Action("Index", "Category")">
            <span class="mif-flow-cascade icon"></span>
            <span class="title">Categories</span>
            <span class="counter">9</span>
        </a>
    </li>
    <li class="bg-hover-black @(pageName == "User" ? "active" : "")">
        <a href="@Url.Action("Index", "User")">
            <span class="mif-users icon"></span>
            <span class="title">Users</span>
            <span class="counter">1</span>
        </a>
    </li>
</ul>

这将在页面服务器端设置您的事件类，从而无需使用 javascript 在客户端执行此操作。