Soluzione programmatica per modificare l'ID di navigazione per evidenziare la pagina corrente ASP.NET

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

  •  06-07-2019
  •  | 
  •  

Domanda

Sto scrivendo un sito Web con Visual Studio 2008 e ASP.NET 3.5. Ho creato una pagina master per semplificare il layout e mantenere le pagine di contenuto per il contenuto piuttosto che per il contenuto e il layout.

La navigazione è elenco, css'd quindi sembra una barra. Per evidenziare la pagina sulla barra, l'elemento dell'elenco deve essere simile a questo <li id="current">. Non voglio usare <asp:ContentPlaceHolder> se posso evitarlo. C'è del codice che posso aggiungere a ciascuna delle mie pagine (o solo alla pagina principale?) Per farlo o sono bloccato usando <=> 's?

È stato utile?

Soluzione

Aggiungi una proprietà alla tua pagina principale chiamata Sezione Pagina 

public string PageSection { get; set; }

Aggiungi una direttiva sulla pagina MasterType nella parte superiore delle tue pagine di contenuti 

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

Nel codice della pagina dei contenuti dietro, imposta la proprietà PageSection della pagina principale 

Master.PageSection = "home";

Nella tua pagina principale, imposta il tag body come tag server 

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

Nel codice della pagina principale dietro, usa quella proprietà per impostare una classe sul tag body 

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

Assegna a ciascun oggetto di navigazione un attributo ID univoco.

Nel tuo CSS, modifica la visualizzazione degli elementi di navigazione in base alla classe di pagina corrente 

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

Altri suggerimenti

Hai preso in considerazione l'utilizzo di un file Web.sitemap? Lo rende davvero facile. Se il tuo file Sitemap è simile a questo ... 

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

... quindi puoi farlo nella tua pagina principale per ottenere i risultati desiderati: 

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

La LI della pagina corrente avrà una classe di " activenav " (o qualunque cosa tu decida di utilizzare), e gli altri avranno una classe di " inactivenav " ;. Puoi scrivere il tuo CSS di conseguenza. Questa è la tecnica che uso sul mio sito e funziona benissimo.

È una corrispondenza semantica migliore e probabilmente una variabile più semplice da impostare per mantenere la navigazione usando le stesse classi o ID ovunque e alterare solo l'id dell'elemento body in modo che corrisponda: 

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

e poi su ogni pagina ... 

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

E nel CSS: 

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

L'uso o il non uso di ContentPlaceHolder non influenzerà quale elemento ha l'id = " current " impostato su di esso.

Dovrai guardare qualche metodo, o nel tuo codebehind per la pagina principale, una funzione javascript o qualcos'altro quando esegui il rendering del componente menu per aggiungere correttamente l'id = " current " all'elenco quando viene creato.

Che ne dici di creare una proprietà stringa protetta nella tua classe di codice masterpage? Sostituisci OnLoad: 

protected string _bodyId;

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

Quindi nella tua pagina principale aspx: 

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

Quindi non devi fare confusione con il tuo CSS, particolarmente utile se il CSS proviene da un'agenzia di design.

Ecco come l'abbiamo raggiunto utilizzando JQuery aggiungendo la classe css per cambiare lo sfondo. 

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

Il " .nav " in ul.nav (in Jquery) è la classe CSS applicata al tag UL.

:contains aiuta a controllare il contenuto di tutte le " a " tag / element all'interno di ul - > li - > a con ParentNode Title stampato nel Menu ...

Se trovato, applica la classe css denominata navselected allo specifico ul - > li - > un tag / elemento.

Saluti, Minesh Shah

Systems Plus Pvt. Ltd.

www.systems-plus.com

Userei JavaScript per farlo. In css, cambia il tuo #current in una classe (.current) e quindi hai gli ID su ciascuno dei tuoi ListItems che crei. Quindi utilizzando RegisterStartupScript, chiama un metodo javascript che ottiene il ListItem appropriato e gli assegna uno stile di corrente. Usando Prototype, sembrerebbe $ ('MyPageLi'). ClassName = 'current'.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top