问题 ASP.NET MVC 5 - 获取当前视图的名称（Razor .cshtml端）

我是一名学生，对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>

我的目标：通过哪个视图呈现，我想添加“活动” 已被点击。示例：我单击“类别”，然后Home丢失其活动类，并且类别已将“活动”添加到其类中。（与之相反的是 “BG-悬停黑”）

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

我首先尝试使用JavaScript：


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

但它不起作用，因为当页面加载时，html将重新呈现为Home部分的“active”。（如果我删除Home的“active”，那么除了点击和页面加载之外，onClick上什么都不会被激活。

你有什么解决方案吗？我在网上搜索了很多，但没有找到任何帮助我。

对不起任何英语错误，我还在学习:)。

谢谢，

Hellcat8。

4097

2017-07-01 08:40

起源

帖子的开头没有显示..这里是：“大家好，我是学生，对ASP.NET MVC很新[...]” - Hellcat8

答案:

由于您使用的是惯例，您的页面以控制器命名，您可以在剃刀中执行此操作以获取控制器/页面名称：

@{
 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执行此客户端。

2017-07-01 09:09

非常感谢！这是工作！ :)还有一件事：你有一些链接，我可以有一些关于Razor可能性的信息吗？在网络上，我只找到基本的东西，如IF和Foreach等.. :(再次感谢！ - Hellcat8

老兄没问题，很高兴我可以帮忙:) - Anish Patel

stackoverflow.com/a/3389151/1062224 - Anish Patel

stackoverflow.com/a/4782177/1062224 - Anish Patel

谢谢你了！：d - Hellcat8

确认：当用户点击该项目时，您正在更改页面。

因此，您的javascript将运行，但随后整个页面将被重新编写，并且您将返回到第一个状态（即，主页处于活动状态，因为它位于标记中）。

要查看当前页面，您可以使用 location.href 并将其与href url进行比较，例如：

$(function() {
    $("ul.sidebar>li").removeClass("active");  // or just not have active in the markup
    $("li>a[href=" + location.href + "]").closest("li").addClass("active");
});

或者，这将更加健壮，您可以使用viewmodel传递令牌（字符串，枚举或const）并检查，例如：

<ul class='sidebar'>
    <li data-page='home'...
    ...
    <li data-page='categories'...

然后

$(function() { 
    $("li[data-page=@Model.PageName]").addClass("active")

（或只是在标记......）

    <li data-page='categories' @(Model.PageName == 'Categories' ? "class=active" : "")>

2017-07-01 08:58

非常感谢您花时间来帮助我！ :) - Hellcat8

这是我的方法，用于级联Bootstrap下拉子菜单，用 active Razor Pages项目的_layout.cshtml文件中的类。

该解决方案的主要元素：

从中获取当前页面路由 ViewContext.RouteData.Values["page"]。
使用Anchor Tag Helpers代替 @Url.Action()。

码：

<ul class="nav navbar-nav">
    @{
        String pageRoute = ViewContext.RouteData.Values["page"].ToString();
    }
    <li class="dropdown @( pageRoute.Contains("/CustomerModel/") ? "active" : "" )">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Customer-Model <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li class="@( pageRoute.Contains("/Customers/") ? "active" : "" )"><a asp-page="/CustomerModel/Customers/Index">Customers</a></li>
            <li class="@( pageRoute.Contains("/Partners/")  ? "active" : "" )"><a asp-page="/CustomerModel/CustomerPermissions/Index">CustomerPermissions</a></li>
        </ul>
    </li>
    <li class="dropdown @( pageRoute.Contains("/StaffModel/") ? "active" : "" )">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Staff-Model <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li class="@( pageRoute.Contains("/Staff/")              ? "active" : "" )"><a asp-page="/StaffModel/Staff/Index">Staff</a></li>
            <li class="@( pageRoute.Contains("/StaffGroups/")        ? "active" : "" )"><a asp-page="/StaffModel/StaffGroups/Index">StaffGroups</a></li>
            <li class="@( pageRoute.Contains("/PermissionsGroups/")  ? "active" : "" )"><a asp-page="/StaffModel/PermissionsGroups/Index">PermissionsGroups</a></li>
            <li class="@( pageRoute.Contains("/AllowedModules/")     ? "active" : "" )"><a asp-page="/StaffModel/AllowedModules/Index">AllowedModules</a></li>
            <li class="@( pageRoute.Contains("/AllowedServices/")    ? "active" : "" )"><a asp-page="/StaffModel/AllowedServices/Index">AllowedServices</a></li>
        </ul>
    </li>
</ul>

2018-03-23 15:43

问题 ASP.NET MVC 5 - 获取当前视图的名称（Razor .cshtml端）

答案:

热门问题