Crear un Menú con elementos Resaltados en ASP.NET MVC 3

La mayoría de los templates para sitios web que podemos encontrar en internet vienen con barras superiores que muestren resaltado la ubicación del usuario en el sitio web, un ejemplo de esto se lo puede encontrar en sitios como www.mono-project.com o www.asp.net:


Para el remarcado por lo general usamos algún estilo CSS como el siguiente:

  • Home


  • Donde se puede ver que la clase “current_page_item” crea el efecto de resaltado en nuestro menú, ahora para poder hacer que nuestro menú sea dinámico, esto quiere decir que dependiendo de la página a la que entremos, el menú debe de  reflejar el lugar. Para hacer esto usaremos el siguiente código en nuestro archivo _Layout:

    @if (HttpContext.Current.Request.Path == "/home/websearch" || HttpContext.Current.Request.Path.Contains("/home/websearch"))
                       { 
                           
  • @Html.ActionLink("Web", "websearch", "home", null, new { title = "Search in the Web" })

  •                    }
                       else
                       { 
                           
  • @Html.ActionLink("Web", "websearch", "home", null, new { title = "Search in the Web" })

  •                    }
    En el código se puede apreciar que obtenemos el path actual de nuestra aplicación, luego en función a este dato generamos un fragmento de código HTML con o sin resaltado. Y con eso sería todo para poder crear un menú con resaltado. Como recomendación sugiero que si se va a crear un menú grande, se usen vistas parciales, para tener más organizado nuestro  código.

    Publicar un comentario