Peter Bucher - Mein Experiment, meine Spielereien, meine Welt...   ·   Stefan Falz   ·   Jürgen Gutsch   ·   Golo Roden   ·   ASP.NET Zone   ·   Microsoft ASP.NET
Willkommen bei ASP.NET Zone. Anmelden | Registrieren | Hilfe

Ein simples Listen Menü mit ASP.NET

Das mitgelieferte Menü Control von ASP.NET rendert Tabellen und vieles unnötiges Markup.
Mit den CSS Adapters wird das ganze zwar ausgebogen, erfordert aber eine Installation bzw. Einrichtung im Projekt und ist vielen (auch mir) nicht so symphatisch.

Nicht nur aus oben genanntem Grund, sondern auch weil es eine suboptimale Lösung darstellt, der generierte Markup der Adapters ist m.E. auch noch nicht optimal.

Ein Menü braucht ja jeder, und korrektes und einfaches Markup ist beim Menü noch viel wichtiger, als dies bei anderen Seitenteilen der Fall ist.
Im Prinzip liefert ASP.NET schon ein komplettes fast komplettes Menü mit, ohne es danach zu Benennen ;-)

Ich meine damit das "BulletedList" Control. Wenn dieses leicht abgeändert wird, wird daraus ein super funktionales Menü, das deklerativ, per Code oder sogar per DataBinding mit Daten gefüllt werden kann.

Natürlich hat dieses Control dann die Beschränkung auf eine Dimension, doch vielfach reicht dies aus.
Ansonsten muss die ganze Gschicht dann auf einer anderen Basis aufgebaut werden.

Genug der Worte, sehen wir uns den Code an...

web.config (Beispiel siehe hier, geht aber auch in der Seite selber, für eine Seite):

<add tagPrefix="pb" namespace="pb.Web.UI.WebControls" assembly="ListMenuTest"/>

ASPX:

<pb:ListMenu ID="testMenu" runat="server">
    <asp:ListItem Text="Home" Value="?url=1" />
    <asp:ListItem Text="Produkte" Value="?url=2" />
    <asp:ListItem Text="Kontakt" Value="?url=3" />
    <asp:ListItem Text="FAQ" Value="?url=4" />
</pb:ListMenu>

Ein bisschen CSS:

#testMenu {
 list-style-type: none;
 border: 1px dotted gray;
 padding: 15px;
 width: 200px;
}


#testMenu a {
    font-family: Tahoma;
    font-size: 1.5em;
    font-style: oblique;
    color: Black;
    border-left: solid 20px #878787;
    padding-left: 4px;
   
    text-decoration: none;
}

#testMenu a.active,
#testMenu a:hover {
    border-left: solid 20px #000446;
    padding-left: 4px;
    color: #878787;
}

Test Code für das Beispiel im Codebehind der Testseite:

protected void Page_Load(object sender, EventArgs e) {
    string activeValue = this.Request.QueryString["url"] as string;
    if (activeValue != null)
        this.testMenu.ActiveValue = "?url=" + activeValue;
}

Das Control selber:



using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace pb.Web.UI.WebControls
{
    public class ListMenu : BulletedList
    {
        private string _activeValue;
        public string ActiveValue {
            get { return this._activeValue; }
            set { this._activeValue = value; }
        }

        protected override void RenderContents(HtmlTextWriter writer) {
            foreach (ListItem item in this.Items) {
                writer.WriteFullBeginTag("li");
                writer.AddAttribute("href", item.Value);
                if (item.Value == this._activeValue) {
                    writer.AddAttribute("class", "active");
                }
                writer.RenderBeginTag("a");
                writer.Write(item.Text);
                writer.RenderEndTag();
                writer.WriteEndTag("li");
                writer.Write(Environment.NewLine);
            }
        }
    }
}

Wie man sehen kann, nehme ich das BulletedList Control, füge eine neue Eigenschaft "ActiveValue" hinzu und nehme das Rendering des Contents (Alle innenliegenden <li>-Tags) selber in die Hand.
Hierbei wird dem aktiven Item jeweils die CSS Klasse "active" zugewiesen.

Zuweisung der Styles erfolgt hier jetzt über die ID, die ID kann sich - je nach Gegebenheit - aber ändern, das heisst am besten eine Klasse dafür nehmen, oder über das umschliessende Div ansprechen.

Thats it, viel Spass damit!

Beispielanwendung gibts hier zum Download

Veröffentlicht Dienstag, 1. April 2008 19:18 von Peter Bucher

Kommentare

Keine Kommentare
Anonyme Kommentare sind nicht zugelassen