Das HTML Menü Steuerelement steckt voller Magie. Es kann wie von Geisterhand auf und zuklappen, berücksichtigt die Rechte des angemeldeten Benutzers und kann sogar über einen Sitemapprovider Datengebunden werden. Aber Magier schlagen auch mal über die Strenge wenn sie von Ihren Fähigkeiten zu überzeugt sind und streben die totale Vernichtung an. So lernt man das jedenfalls aus Harry Potter. Der ach so nette Tom Riddle mutiert zu Voldemort, dem rachsüchtigen dunklen Magier der vor nichts zurückschreckt.
Nun bin ich kein fanatischer Verfechter von der Reinheit des Blutes und gebe auch Muggle Zauberern ihre Chance.
Ein Menü Control erzeugt Serverseitig HTML Code, samt CSS und Zauberscript. Als Startpunkt wird die Navigation der mobilen ppedv Kurs Anwendung verwendet. Zwar könnte man mit einer einfach UL LI Liste das Ziel einfacher erreichen, aber der Erkenntniswert würde fehlen. Also los geht's mit “Zaubern mit Menu”
1: <form id="form1" runat="server" data-role="page">
2: <div data-role="content">
3:
4: <div>
5: <asp:Menu ID="div1" runat="server"
6: data-role="navbar">
7: <Items>
8: <asp:MenuItem NavigateUrl="~/S/2,12,14,19" Text="Windows & .NET" />
9: <asp:MenuItem NavigateUrl="~/S/3,7" Text="Architektur&Dev" />
10: <asp:MenuItem NavigateUrl="~/S/11" Text="Web Development" />
11: <asp:MenuItem NavigateUrl="~/S/13,18,22" Text="SharePoint" />
12: <asp:MenuItem NavigateUrl="~/S/5,6,20" Text="Server Administration" />
13: <asp:MenuItem NavigateUrl="~/S/9,7" Text="Office u.a." />
14: <asp:MenuItem NavigateUrl="~/S/4,21" Text="SQL & BI" />
15: <asp:MenuItem NavigateUrl="~/kontakt" Text="Kontakt" />
16: </Items>
17: </asp:Menu>
18: </div>
19:
20: </div>
21: </form>
Vor der vierte Folge (also bis ASP.NET 3.5) wurde daraus gar furchterbarer HTML Code, der sich dabei der dunklen Künste von HTML Tables bediente.
Wer diese dunklen Zeiten wieder heraufbeschwören möchte, kann dich dunkle Kammer von Webconfig aufsuchen und dort folgenden Zauberspruch murmeln
1: <pages controlRenderingCompatibilityVersion="3.5" >
Seit der Stein der Weisen zurück nach Redmond gekehrt ist, serviert auch das Menu Control reines DIV, UL und LI, allerdings noch mit allerlei wundersamer Zutaten.
1: <form method="post" action="WebForm24.aspx" id="form1" data-role="page">
2: <div class="aspNetHidden">
3: <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="2hB6MZYCbAUooxZUPVYswq
5ZiGyg0TutsRjTuqwqOWRyoGlxBHvPvMBmA7xs3dMHYdKdBZDFZgcT75zNssO11aaJ3fOdCsoYUd3eQBY1x7c=" />
4: </div>
5:
6:
7: <script src="/WebResource.axd?d=fqV81KWLWhVg-lLAb4IT6z7dNzU96UkgnAUvd3TznA7r7jmBA8d3Ppk0
-TpQJTuNUNdLcYMr6iHiLhrQ1-FE8y8o-CmqZlIAp78DXeQ-4cw1&t=634897471112455790" type="text/javascript">
</script>
8: <div data-role="content">
9:
10: <div>
11: <a href="#div1_SkipLink" style="position:absolute;left:-10000px;
top:auto;width:1px;height:1px;overflow:hidden;">Navigationslinks überspringen</a>
<div data-role="navbar" id="div1">
12: <ul class="level1">
13: <li><a class="level1" href="S/2,12,14,19">Windows & .NET</a></li><li>
<a class="level1" href="S/3,7">Architektur&Dev</a></li><li><a class="level1" href="S/11">Web Development</a>
</li><li><a class="level1" href="S/13,18,22">SharePoint</a></li><li>
<a class="level1" href="S/5,6,20">Server Administration</a></li><li><a class="level1" href="S/9,7">
Office u.a.</a></li><li><a class="level1" href="S/4,21">SQL & BI</a></li><li>
<a class="level1" href="kontakt">Kontakt</a></li>
14: </ul>
15: </div><a id="div1_SkipLink"></a>
16: </div>
17:
18: </div>
19:
20: <script type='text/javascript'>new Sys.WebForms.Menu({ element: 'div1',
disappearAfter: 500, orientation: 'vertical', tabIndex: 0, disabled: false });</script></form>Fügt man nun noch ein wenig Jquery Mobile Kraut hinzu, erscheint ein Fenster (Aparecium).
Allerdings hat der dunkle Lord hier noch seine Finger im Spiel. Die Breite der Menuitems ist begrenzt. Um diesen Fluch aufzuheben, muss man einen Finite Incantatem (Gegenzauber) sprechen. Damit hebt man allerdings nur die Wirkung auf, das Sys.WebForms.Menu aus Zeile 20 bleibt.
1: </asp:Menu>
2: <script type="text/javascript"> Sys.WebForms.Menu = "";</script>
Um die Schönheit und Reinheit des HTML zu verbessern braucht es noch Zutaten derer Vier.
1: EnableViewState="false" IncludeStyleBlock="false" ClientIDMode="Static" SkipLinkText=""
Auf der Fiddler Karte erscheint so der direkte und damit optimale Weg.
Letztendlich gibt es ein Happy End aber es ist das letzte Kapitel noch nicht geschrieben. Wir warten sehnsüchtig auf die Zauberer aus Redmond.
1: <script src="/WebResource.axd?d=fqV81KWLWhVg-lLAb4IT6z7dNzU96UkgnAUvd3TznA7r7jm
BA8d3Ppk0-TpQJTuNUNdLcYMr6iHiLhrQ1-FE8y8o-CmqZlIAp78DXeQ-4cw1&t=634897471112455790"
type="text/javascript"></script>
2: <div data-role="content">
3:
4: <div>
5: <div data-role="navbar" id="div2">
6: <ul class="level1">
7: <li><a class="level1" href="S/2,12,14,19">Windows & .NET</a></li>
8: <li><a class="level1" href="S/3,7">Architektur&Dev</a></li>
9: <li><a class="level1" href="S/11">Web Development</a></li>
10: <li><a class="level1" href="S/13,18,22">SharePoint</a></li>
11: <li><a class="level1" href="S/5,6,20">Server Administration</a></li>
12: <li><a class="level1" href="S/9,7">Office u.a.</a></li>
13: <li><a class="level1" href="S/4,21">SQL & BI</a></li>
14: <li><a class="level1" href="kontakt">Kontakt</a></li>
15: </ul>
16: </div>
17: </div>
18:
19: </div>