In some situations we need to create website menu from database, say our application have ability to create pages so that must also need to have a menu item to go to that page. So how to create menu with all those nice CSS and other settings, I think XSLT is best to use in these situations.
Let’s see what we would need to create our menu
So let’s see our procedure and its output in xml format: create your procedure to get data from database and at the end put this line to get output in xml format
FOR XML Path('Menu'), type, Root('Menus')
Here is the output of our procedure:
<menus>
<menu>
<menutext>Hone</menutext>
<tooltip>Home</tooltip>
<href>/home.aspx</href>
<target>_self</target>
</menu>
<menu>
<menutext>Products</menutext>
<tooltip>Products</tooltip>
<href>/products.aspx</href>
<target>_self</target>
</menu>
<menu>
<menutext>About Us</menutext>
<tooltip>About Us</tooltip>
<href>/aboutus.aspx</href>
<target>_self</target>
</menu>
</menus>
We know how to get data from database so we will not discuss in detail but basic to understand how to get XmlDocument
public static XmlDocument GetXML()
{
using (SqlConnection Conn = new SqlConnection(_ConnectionString)
{
// you know how to use connection, command etc.
XmlReader xmlRd = CMD.ExecuteXmlReader();
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.Load(xmlRd);
xmlRd.Close();
return xmlDoc;
}
}
Now we know the XML structure so we can write our XSLT code, create a new file of type, write click solution name and select Add => Add New Item and choose XSLT File, name this file “Menu.xslt” and place following code in this file
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
<xsl:output method="xml" indent="yes"/>
<xsl:template match="menus">
<ul id="navigation" class="nav-main">
<xsl:for-each select="menu">
<li>
<a>
<xsl:choose>
<xsl:when test="href='#'">
<xsl:attribute name="onclick">
<xsl:text>javascript:return false;</xsl:text>
</xsl:attribute>
<xsl:attribute name="target">
<xsl:value-of select="target"/>
</xsl:attribute>
<xsl:value-of select="menutext"/>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="href">
<xsl:value-of select="href"/>
</xsl:attribute>
<xsl:attribute name="target">
<xsl:value-of select="target"/>
</xsl:attribute>
<xsl:value-of select="menutext"/>
</xsl:otherwise>
</xsl:choose>
</a>
</li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>
One think to note in this code href='#', some time we need a menu item to create sub menu so oncliking to that item application should not do anything so we used javascript:return false;
Now come to the page and place a new XML control on page and adjust code behind to bind this control to generate the menu.
//HTML
<asp:Xml ID="xmlMenu" runat="server" />
//Page load event in code behind
XmlDocument doc = GetXML();
XslTransform xslTramform = new XslTransform();
xslTramform.Load(Server.MapPath("Menu.xslt"));
xmlMenu.Document = doc;
xmlMenu.Transform = xslTramform;
That’s it on page and code behind, if you will run your application it will work but not look good because still we need to adjust our look and feel by using CSS, so here is the required CSS
.nav-main{font-size:100%;}
.nav-main li{float:left; background-color:#000000;
list-style:none; padding:7px 10px; margin-left:1px;}
.nav-main li a:link, .nav-main li a:visited{
text-decoration:none;color:#FFFFFF;}
.nav-main li a:hover{text-decoration:underline;}
Now we have done everything, if whatever CSS we used here doesn’t look good then you can change according to your requirement.
![]() |
Process manager with a reputed organization, Fond of learning new features and technology related to C#, ASP.Net, SQL Server, MVC etc.I like to help others, if I can
|
By Hamden On 16 Mar, 13 Viewed: 1,876 |
MVC Search Sort and Paging is common feature we need to use, so let's write the HTML Paging Helper for our project, which will work faster than anyother build-in costum grid system because they contain many other features we don't need for our application and don't support many features we want. In... By Ali Adravi On 07 May 2018 Viewed: 6,335
If you have just started out with HTML5, then boilerplates help you reason out with the framework and help create a professional front end and a robust website. This open source project was created in order to make you HTML5 ready, in case you have just started out. You can directly download and... By Deepa Ranganathan On 01 Jun 2015 Viewed: 425
When we need a new menu we mostly depend on designers while you can create horzontal menu easily by writing some simple css, let's see how easy it is <style> ul.menu { list-style-type: none; margin: 0; padding: 0; ... By Flower On 31 Dec 2012 Viewed: 523
**HTML5 video and browser compatibility** Now to use video on browser is quite easy, we don't want any flash player any more, simply we can use `<vidoe>` tag and set the video path with src and done. Video tag attributes: - autoplay : "autoplay" or "" (empty string) [Instructs the UA to... By Myghty On 30 Dec 2012 Viewed: 1,508
Social Media Sharing Buttons Without JavaScript I was looking for code to add social media buttons to share my blog on different sites like facebook, twitter, google plus, tumbler and email, I search many websites but could not found any good article which can help to add these buttons without... By Hamden On 29 Dec 2014 Viewed: 2,846