ASP.NET MVC 5 - Nhận tên của chế độ xem hiện tại (Razor .cshtml side)

Question

Tôi là sinh viên và khá mới với ASP.NET MVC và tôi đến từ ASP.NET Web Form. (Dùng để nó)

tôi có một danh sách:

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

Mục tiêu của tôi: Bằng cách đó xem là ra, tôi muốn thêm vào "hoạt động" với đã được nhấp vào. Ví dụ: Tôi nhấp vào "Danh mục", sau đó Trang chủ mất lớp đang hoạt động của mình và Danh mục có "hoạt động" được thêm vào lớp học của mình. (và điều ngược lại với "bg-hover-black")

Tôi nghĩ tôi có thể làm điều đó bằng cách kiểm tra chế độ xem thực sự được hiển thị nhưng tôi không biết cách thực hiện. (Tôi không biết làm thế nào để kiểm tra xem thực tế trả lại, nhưng sử dụng Razor để kiểm tra điều kiện không quan trọng)

Tôi đã thử với JavaScript đầu tiên:

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

Nhưng nó không hoạt động vì khi tải trang , html được hiển thị lại với "hoạt động" cho phần Trang chủ. (Nếu tôi xóa "hoạt động" cho Trang chủ, thì sẽ không có gì sẽ hoạt động khi nhấp vào, ngoại trừ giữa lần nhấp và tải trang).

Bạn có giải pháp nào không? Tôi đã tìm kiếm rất nhiều trên web nhưng không tìm thấy gì để giúp tôi.

Xin lỗi vì bất kỳ lỗi nào về tiếng Anh, tôi vẫn đang học nó :).

Xin cảm ơn,

Hellcat8.

Answer 1

Vì bạn đang sử dụng các quy ước nơi trang của bạn được đặt theo tên của bộ điều khiển bạn có thể làm điều này trong dao cạo để lấy tên controller/page:

@{ 
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> 

Điều này sẽ đặt lớp đang hoạt động của bạn ở phía máy chủ trang loại bỏ nhu cầu thực hiện điều này với javascript.

Answer 2

Để xác nhận: Bạn đang thay đổi trang khi người dùng nhấp vào mục.

Vì điều này, javascript của bạn sẽ chạy, nhưng sau đó toàn bộ trang được viết lại và bạn quay lại trạng thái đầu tiên (nghĩa là với Trang chủ hoạt động như trong đánh dấu).

Để kiểm tra trang hiện tại, bạn có thể sử dụng location.href và so sánh nó với các url href, một cái gì đó như:

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

Ngoài ra, và điều này sẽ mạnh mẽ hơn, bạn có thể vượt qua một mã thông báo (string, enum hoặc const) với viewmodel và kiểm tra xem, ví dụ:

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

sau đó

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

(hoặc chỉ cần trong đánh dấu ...)

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