ASP.NET MVC 5 - Ottieni il nome della vista corrente (lato Razor .cshtml)

Question

Sono uno studente e abbastanza nuovo per ASP.NET MVC e provengo da ASP.NET Web Form. (Utilizzato per esso)

Ho una lista:

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

Il mio obiettivo: Con quale vista è reso, voglio aggiungere "attiva" al che è stato cliccato. Esempio: clicco su "Categoria", quindi Home perde la sua classe attiva e la categoria ha "attivo" aggiunto alla sua classe. (e la cosa inversa con "bg-hover-black")

Pensavo di poterlo fare controllando la vista effettivamente resa ma non so come farlo. (Non so come controllare la vista reale reso, ma usando il rasoio per verificare le condizioni va bene)

ho provato con JavaScript prima:

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

Ma non funziona perché quando il caricamento della pagina , l'html viene ridisegnato con "active" per la parte Home. (Se rimuovo "attivo" per Home, quindi non sarà attivo onClick, tranne tra il clic e il caricamento della pagina).

Avete qualche soluzione? Ho cercato molto sul web ma non ho trovato nulla per aiutarmi.

Ci scusiamo per eventuali errori di inglese, lo sto ancora imparando :).

Grazie,

Hellcat8.

Answer 1

Dal momento che si sta utilizzando la convenzione in cui la pagina è chiamato dopo il controller si può fare questo a rasoio per ottenere il nome del controller/pagina:

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

Questo imposterà la classe attiva sul lato server di pagina eliminando la necessità di fare questo lato client con javascript.

Answer 2

Per confermare: stai modificando la pagina quando l'utente fa clic sull'elemento.

Per questo motivo, verrà eseguito il javascript, ma l'intera pagina verrà riscritta e si ritorna al primo stato (ovvero con la Home attiva come quella nella markup).

Per controllare la pagina corrente, è possibile utilizzare location.href e confrontarlo con l'URL href, qualcosa di simile:

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

In alternativa, e questo sarebbe più robusto, si poteva passare un token (stringa, enum o const) con viewmodel e verificare che, ad esempio:

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

poi

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

(o semplicemente nel codice ...)

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