In this article i will show you how to use sitemap navigational control in asp.net
Introduction
In this article we will see on how to use sitemap navigational control in asp.net, we use sitemap to arrange our link in easy way so that user can easily navigate to our webpages. I have used Menu control in this article.
lets start
Implementing SiteMap
Firstly in our application add new item sitemap, drag and drop menu control, sitemap path in ur master page(or you can take it in ur simple page) and add some sample webpages in root directory and then open sitemap page and write the following code
Note:- Replace sitemap URL with the URL suitable to your application to avoid page not found error.// <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="welcome.aspx" title="Home" description="">
<siteMapNode url="statemaster.aspx" title="state" description="">
<siteMapNode url="regionalmaster.aspx" title="regional" description="" />
</siteMapNode>
<siteMapNode url ="projectmaster.aspx" title ="projects" description ="">
<siteMapNode url ="monthlytarget.aspx" title ="monthly target" description="">
<siteMapNode url ="reportviewer.aspx" title ="project report" description=""/>
<siteMapNode url ="monthlytargetreport.aspx" title ="Monthly Target Report" description =""/>
</siteMapNode>
</siteMapNode>
<siteMapNode url ="signin.aspx" title="sign here" description="">
<siteMapNode url="feedback form.aspx" title ="feedback" description=""/>
</siteMapNode>
<siteMapNode url ="withinGridviewrowDML.aspx" title ="dmlwithingrid" description=""></siteMapNode>
<siteMapNode url ="templategridview.aspx" title ="templategridview" description=""></siteMapNode>
<siteMapNode url ="uploadpic.aspx" title ="upload pic" description =""></siteMapNode>
<siteMapNode url ="corridor.aspx" title ="corridor" description ="">
<siteMapNode url ="transactionentry.aspx" title ="transaction" description="">
<siteMapNode url ="corridorreport.aspx" title ="corridor report" description =""/>
</siteMapNode>
</siteMapNode>
<siteMapNode url ="contactus.aspx" title ="contact us" description ="">
<siteMapNode url ="complaint form.aspx" title ="complaint form" description=""/>
</siteMapNode>
</siteMapNode>
</siteMap>
Next step is to go to design page where we have added menu control and write the following code for our
menu control <asp:Menu ID="Menu2" runat="server" DataSourceID="SiteMapDataSource1"
Orientation="Horizontal" StaticDisplayLevels="2" BackColor="#B5C7DE"
DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Larger"
ForeColor="#284E98" Height="47px" StaticSubMenuIndent="10px"
Width="450px" CssClass="MainMenu">
<StaticSelectedStyle BackColor="#507CD1" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<DynamicSelectedStyle BackColor="#507CD1" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#284E98" ForeColor="White" />
</asp:Menu>
Note:-We can select DataSourceID="SiteMapDataSource1" by the small arrow that is on menu control and can choose sitemap datasource, and dont forget to write StaticDisplayLevels="2" otherwise ur menu control will look verticaland the sitemap path control which we have attached is used to show that user is at which page currently and this page inherited from where and what is the base page and it looks something like this Home> projects> monthlytarget
(rootnode,parentnode>currentnode), monthlytarget is ur current page inherited from projects and rootnode is home

Conclusion
In this way we can create a basic menu control with dropdown on mouse over.
Enjoy
Ankit Saxena