Solución programática para cambiar la identificación de navegación para resaltar la página actual ASP.NET

StackOverflow https://stackoverflow.com/questions/188124

  •  06-07-2019
  •  | 
  •  

Pregunta

Estoy escribiendo un sitio web con Visual Studio 2008 y ASP.NET 3.5. Tengo una página maestra configurada para simplificar el diseño y mantener las páginas de contenido para contenido en lugar de contenido y diseño.

La navegación es list, css'd para que parezca una barra. Para resaltar la página en la barra, el elemento de la lista debe verse así <li id="current">. No quiero usar <asp:ContentPlaceHolder> si puedo evitarlo. ¿Hay algún código que pueda agregar a cada una de mis páginas (o solo a la página maestra?) Para lograr esto o estoy atascado usando <=> 's?

¿Fue útil?

Solución

Agregue una propiedad a su página maestra llamada Sección de página 

public string PageSection { get; set; }

Agregue una directiva de página MasterType a la parte superior de sus páginas de contenido 

<%@ MasterType VirtualPath="~/foo.master" %>

En el código de su página de contenido, establezca la propiedad PageSection de la página maestra 

Master.PageSection = "home";

En su página maestra, haga que la etiqueta del cuerpo sea una etiqueta de servidor 

<body ID="bodyTag" runat="server">

En el código de la página maestra detrás, use esa propiedad para establecer una clase en la etiqueta del cuerpo 

bodyTag.Attributes.Add("class", this.PageSection);

Dele a cada uno de sus elementos de navegación un atributo de ID único.

En su CSS, cambie la visualización de los elementos de navegación según la clase de página actual 

.home #homeNavItem,
.contact #contactNavItem
{ 
    color: #f00; 
}

Otros consejos

¿Ha considerado usar un archivo Web.sitemap? Lo hace realmente fácil. Si su archivo de mapa del sitio se ve así ... 

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode>
    <siteMapNode url="~/Default.aspx" title="Home"  description="" />
    <siteMapNode url="~/Blog.aspx" title="Blog"  description="" />
    <siteMapNode url="~/AboutUs.aspx" title="AboutUs"  description="" />
  </siteMapNode>
</siteMap>

... entonces puede hacer esto en su página maestra para lograr los resultados que desea: 

<asp:SiteMapDataSource ID="sitemapdata" runat="server" ShowStartingNode="false"  />
<ul id="navigation">
    <asp:Repeater runat="server" ID="navrepeater" DataSourceID="sitemapdata">
        <ItemTemplate>
            <li class="<%# SiteMap.CurrentNode.Equals(Container.DataItem) ? "activenav" : "inactivenav" %>"><a href="<%# DataBinder.Eval(Container.DataItem, "url") %>"><%# DataBinder.Eval(Container.DataItem, "title") %></a></li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

El LI de la página actual tendrá una clase de " activenav " (o lo que decida usar), y los demás tendrán una clase de " inactivenav " ;. Puede escribir su CSS en consecuencia. Esta es la técnica que uso en mi sitio y funciona muy bien.

Es una mejor coincidencia semántica y probablemente una variable más fácil de configurar para mantener la navegación usando las mismas clases o identificadores en todas partes y solo alterar la identificación del elemento del cuerpo para que coincida: 

<li id="homeNav">home</li>
<li id="blogNav">blog</li>

y luego en cada página ... 

<body id="home">
<body id="blog">

Y en el CSS: 

#home #homeNav {background-image:url(homeNav-on.jpg);}
#blog #blogNav {background-image:url(blogNav-on.jpg);}

El uso o no uso de ContentPlaceHolder no afectará qué elemento tiene el id = " current " establecer en él.

Tendrá que buscar algún método, ya sea en su código detrás de la página maestra, una función de JavaScript u otra cosa al representar el componente del menú para agregar correctamente id = " current " a la lista cuando se crea.

¿Qué tal crear una propiedad de cadena protegida en su clase de código de página maestra? Anular OnLoad: 

protected string _bodyId;

protected override void OnLoad(EventArgs e)
{
    _bodyId = "your css id name";
}

Luego, en su página maestra aspx: 

<body id="<%= _bodyId %>">

Entonces no tiene que meterse con su CSS, especialmente útil si el CSS proviene de una agencia de diseño.

Así es como lo hemos logrado usando JQuery agregando la clase css para cambiar el fondo. 

$("ul.nav > li > a:contains('<%= SiteMap.CurrentNode.ParentNode.Title %>')").addClass("navselected");

El " .nav " en ul.nav (en Jquery) es la clase css aplicada a la etiqueta UL.

:contains ayuda a verificar el contenido de todos " a " etiqueta / elemento dentro de ul - > li - > a con el título ParentNode que se imprime en el menú ...

Si se encuentra, aplica la clase css llamada navselected a la ul / > li - > una etiqueta / elemento específico.

Saludos, Minesh Shah

Sistemas Plus Pvt. Ltd.

www.systems-plus.com

Usaría javascript para lograr esto. En css, cambie su #current para que sea una clase (.current) y luego tenga identificaciones en cada uno de sus ListItems que cree. Luego, utilizando RegisterStartupScript, llame a un método de JavaScript que obtenga el ListItem apropiado y le asigne un estilo de corriente. Usando Prototype, esto se vería como $ ('MyPageLi'). ClassName = 'current'.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top