ASP.NET MVC 5 - 獲取當前視圖的名稱（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>

我的目標：通過呈現哪個視圖，我想將“活動”添加到已被點擊。 示例：我單擊“類別”，然后 Home 失去了他的活動課程，而類別已將“活動”添加到他的課程中。 （以及與"bg-hover-black"相反的事情）

我以為我可以通過檢查實際呈現的視圖來做到這一點，但我不知道該怎么做。 （我不知道如何檢查渲染的實際視圖，但使用 Razor 檢查條件是可以的）

我首先嘗試使用 JavaScript：

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

但它不起作用，因為當頁面加載時，html 被重新渲染為“活動”的主頁部分。 （如果我刪除主頁的“活動”，那么除了點擊和頁面加載之間之外，onClick 不會有任何活動）。

你有什么解決辦法嗎？ 我在網上搜索了很多，但沒有找到任何幫助我。

抱歉有任何英語錯誤，我還在學習中:)。

謝謝，

地獄貓8.

Answer 1

由於您使用的是頁面以控制器命名的約定，因此您可以在 razor 中執行此操作以獲取控制器/頁面名稱：

@{
 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 執行此客戶端。

Answer 2

這是我使用 Razor Pages 項目的 _layout.cshtml 文件中的active類裝飾級聯 Bootstrap 下拉子菜單的方法。

此解決方案的主要元素：

• 從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>

Answer 3

要獲取活動操作或控制器的名稱，請使用以下命令

var controllerName = ViewContext.RouteData.Values["controller"].ToString();
var actionName = ViewContext.RouteData.Values["action"].ToString();

然后您可以使用以下代碼為 li 提供類：

<li class="@(actionName == "HomePage" ? "active":"")"><a href="~/Account/HomePage">Home</a></li>

或者您可以按以下方式檢查它們：

 <li class="@(controllerName =="Account" && actionName == "HomePage" ? "active":"")"><a href="~/Account/HomePage">Home</a></li>

Answer 4

確認：當用戶單擊該項目時，您正在更改頁面。

因此，您的 javascript 將運行，但隨后整個頁面將被重寫，您將返回到第一個狀態（即 Home 處於活動狀態，因為它在標記中）。

要檢查當前頁面，您可以使用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");
});

或者，這會更健壯，您可以在視圖模型中傳遞一個標記（字符串、枚舉或常量）並檢查，例如：

<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" : "")>