Programmatische Lösung Navigation-ID zu ändern aktuelle Seite ASP.NET markieren

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

  •  06-07-2019
  •  | 
  •  

Frage

Ich schreibe eine Website mit Visual Studio 2008 und ASP.NET 3.5. Ich habe eine Masterpage einrichten, das Layout zu vereinfachen und die Inhaltsseiten für Inhalte zu halten, anstatt Inhalt und das Layout.

Die Navigation ist die Liste, css'd so dass es wie eine Bar aussieht. Um die Seite auf der Bar zu markieren, muss die Liste Artikel wie dieser <li id="current"> suchen. Ich will nicht <asp:ContentPlaceHolder> verwenden, wenn ich es vermeiden kann. Gibt es einen Code, den ich jedem meiner Seiten hinzufügen können (oder auch nur auf die Masterpage?) Dies zu tun, oder bin ich stecken <asp:ContentPlaceHolder> die mit?

War es hilfreich?

Lösung

Fügen Sie eine Eigenschaft auf der Masterseite genannt Seite Abschnitt 

public string PageSection { get; set; }

Fügen Sie eine Mastertype Seite Direktive an die Spitze Ihrer Content-Seiten 

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

In Ihrem Content-Seite Code hinter, setzt die PageSection Eigenschaft der Masterseite 

Master.PageSection = "home";

In der Masterseite, macht den Body-Tag einen Server-Tag 

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

In dem Master-Seite Code hinter, die diese Eigenschaft verwenden, um eine Klasse auf dem Body-Tag zu setzen 

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

Geben Sie jeden Ihren nav Artikel ein eindeutiges ID-Attribut.

in Ihrem CSS, ändern Sie die Anzeige der nav Elemente basierend auf der aktuellen Seite Klasse 

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

Andere Tipps

Haben Sie darüber nachgedacht, eine Web.sitemap-Datei? Es macht es wirklich einfach. Wenn Ihre Sitemap-Datei sieht wie folgt aus ... 

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

... dann können Sie dies in Ihrer Master-Seite, um die Ergebnisse zu erzielen Sie: 

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

Die LI aktuelle Seite wird eine Klasse von „activenav“ (oder was auch immer Sie sich entscheiden), und die anderen werden eine Klasse von „inactivenav“ haben. Sie können Ihre CSS entsprechend schreiben. Dies ist die Technik, die ich auf meiner Website verwenden und es funktioniert super.

Es ist ein besserer semantisches Spiel und wahrscheinlich eine einfachere Variable zu setzen, die Navigation mit den gleichen Klassen oder IDs überall zu halten und nur den Körper Elementen id ändern Übereinstimmen: 

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

und dann auf jeder Seite ... 

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

Und in der CSS: 

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

Die Nutzung oder Nichtnutzung von Content nicht beeinflussen, welches Element die ID hat = „Strom“ auf sie gesetzt.

Sie werden zu einem bestimmten Verfahren aussehen, entweder in Ihrem Code-Behind für die Masterseite, eine JavaScript-Funktion oder sonst etwas, wenn die Menükomponente Rendern der id = „Strom“ in die Liste richtig hinzuzufügen, wenn es erstellt wird.

Wie wäre eine geschützte String-Eigenschaft in Ihrem Masterpage Code Klasse erstellen? Überschreiben Sie die OnLoad: 

protected string _bodyId;

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

Dann in Ihrer Masterpage aspx: 

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

Dann haben Sie nicht mit Ihrem CSS zu verwirren, besonders nützlich, wenn der CSS aus einer Design-Agentur kam.

Hier ist, wie wir erreicht haben es JQuery verwenden, indem Sie die CSS-Klasse anhängen den Hintergrund zu ändern. 

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

Die ".nav" in ul.nav (in JQuery) ist die CSS-Klasse auf den UL-Tag angewandt.

:contains hilft den Inhalt aller "ein" Tag / Element innerhalb der Überprüfung UL-> Li-> a mit ParentNode Titel, die im Menü gedruckt wird ...

Wenn Sie gefunden werden, gilt die CSS-Klasse auf den spezifischen Namen navselected UL-> Li-> ein Tag / Element.

Regards, Minesh Shah

System Plus-Pvt. Ltd.

www.systems-plus.com

Ich würde Sie Javascript verwenden, um dies zu erreichen. In CSS, ändern Sie Ihr #current eine Klasse (.Current) zu sein, und dann ids auf jedem Ihres Listitem, die Sie erstellen. Dann Registerstartup, rufen Sie eine JavaScript-Methode, die die entsprechenden ListItem bekommt und weist sie einen Stil der aktuellen. Mit Prototype, würde dies aussehen $ ( 'MyPageLi'). Classname = 'aktuell'.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top