ASP.NET MVC 5 - Получить имя текущего вида (Razor .cshtml side)

Question

Я студент и совершенно новый для ASP.NET MVC, и я пришел из веб-формы ASP.NET. (Используется для него)

Я получил список:

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

Моя цель: Которым оказывается вид, я хочу, чтобы добавить «активный» в , который был щелкнули. Пример: Я нажимаю «Категория», затем «Домой» теряет активный класс, а «Категория» добавляет в свой класс. (и наоборот с «bg-hover-black»)

Я думал, что смогу это сделать, проверив визуализированный вид, но я не знаю, как это сделать. (Я не знаю, как проверить фактический вид сгенерирован, но используя бритву для проверки условий в порядке)

Я попытался с JavaScript первым:

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

Но это не работает, потому что при загрузке страницы , html повторно отображается с помощью «active» для домашней части. (Если я удалю «активный» для дома, тогда ничего не будет активировано onClick, кроме как между загрузкой клика и страницы).

У вас есть решение? Я много искал в Интернете, но ничего не нашел для меня.

Извините за любые английские ошибки, я все еще изучаю это :).

Thanks,

Hellcat8.

Answer 1

Поскольку вы используете соглашение, где ваша страница с именем контроллера вы можете сделать это в бритву, чтобы получить имя контроллера/страницы:

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

Для подтверждения: Вы меняете страницу, когда пользователь нажимает на элемент.

Из-за этого ваш 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"); 
}); 

С другой стороны, и это было бы более надежным, вы можете передать маркер (строка, перечислимую или Const) в с ViewModel и проверить, что, например:

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