Solution programmatique pour changer l'identifiant de navigation pour mettre en surbrillance la page actuelle ASP.NET

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

  •  06-07-2019
  •  | 
  •  

Question

J'écris un site Web avec Visual Studio 2008 et ASP.NET 3.5. J'ai créé une page maître pour simplifier la présentation et conserver les pages de contenu pour le contenu plutôt que pour le contenu et la présentation.

La navigation est une liste, css, donc cela ressemble à une barre. Afin de mettre la page en surbrillance dans la barre, l'élément de liste doit ressembler à ceci <li id="current">. Je ne veux pas utiliser <asp:ContentPlaceHolder> si je peux l'éviter. Existe-t-il un code que je peux ajouter à chacune de mes pages (ou simplement à la page principale?) Pour y parvenir ou suis-je bloqué avec <=>?

Était-ce utile?

La solution

Ajoutez une propriété à votre page maître appelée Section de page

. 
public string PageSection { get; set; }

Ajoutez une directive de page MasterType en haut de vos pages de contenu 

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

Dans le code de votre page de contenu, définissez la propriété PageSection de la page maître

. 
Master.PageSection = "home";

Dans votre page maître, faites de la balise body une balise de serveur 

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

Dans le code de la page principale, utilisez cette propriété pour définir une classe sur la balise body

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

Attribuez à chacun de vos éléments de navigation un identifiant unique.

Dans votre css, changez l'affichage des éléments de navigation en fonction de la classe de page en cours 

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

Autres conseils

Avez-vous envisagé d’utiliser un fichier Web.sitemap? Cela le rend vraiment facile. Si votre fichier sitemap ressemble à ceci ... 

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

... vous pouvez le faire dans votre page maître pour obtenir les résultats souhaités: 

<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 de la page en cours aura une classe de " activenav & "; (ou ce que vous décidez d'utiliser), et les autres auront une classe de & "inactivenav &"; Vous pouvez écrire votre CSS en conséquence. C’est la technique que j’utilise sur mon site et qui fonctionne très bien.

Il s'agit d'une meilleure correspondance sémantique et probablement d'une variable plus facile à définir pour conserver la navigation en utilisant les mêmes classes ou les mêmes identifiants partout et ne modifier que l'identifiant de l'élément body correspondant: 

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

et ensuite sur chaque page ... 

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

Et dans le css: 

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

L'utilisation ou non de ContentPlaceHolder n'affectera pas l'élément ayant l'id = & "current &"; mis dessus.

Vous devrez regarder une méthode, soit dans votre codebehind pour la page maître, une fonction javascript ou autre chose lors du rendu du composant de menu pour ajouter correctement l'id = " actuel & "; à la liste lors de sa création.

Pourquoi ne pas créer une propriété de chaîne protégée dans votre classe de code masterpage? Remplacez OnLoad: 

protected string _bodyId;

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

Puis dans votre page principale aspx: 

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

Ensuite, vous n'avez pas à vous soucier de votre CSS, particulièrement utile si le CSS provient d'une agence de design.

Voici comment nous y sommes parvenus en utilisant JQuery en ajoutant la classe css pour changer l'arrière-plan. 

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

Le " .nav " in ul.nav (in Jquery) est la classe css appliquée à la balise UL.

:contains aide à vérifier le contenu de tous les " un " balise / élément dans la ul - > li - > a avec un titre de parentNode imprimé dans le menu ...

Si trouvé, applique la classe CSS nommée navselected au ul spécifique - > li - > une balise / un élément.

Cordialement, Minesh Shah

Systems Plus Pvt. Ltd.

www.systems-plus.com

Je voudrais utiliser javascript pour y parvenir. Dans CSS, changez votre #current pour qu'il soit une classe (.current), puis ayez un identifiant sur chacun de vos ListItems que vous créez. Ensuite, à l’aide de RegisterStartupScript, appelez une méthode javascript qui récupère le ListItem approprié et lui attribue un style de type courant. Avec Prototype, cela ressemblerait à $ ('MyPageLi'). ClassName = 'current'.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top