Website Navigation in ASP.NET

How to Navigate webpage in ASP.NET

When you have multiple pages in your application you can use simple website navigation features provided in ASP.NET. These features allow you to show an easy way to your user to navigate through website pages. Moreover, users can see path of the website, the current page where the user is standing at this time, the previous page from where the user came to this page and the root or home page of the website. So user can move easily between web pages of a website when website navigation is used. ASP.NET built-in site navigation features are really the simple way to deal with website navigation.   

Web.sitemap File

ASP.NET provides a consistent way of website navigation. It provides a file to store your page titles and links and you can bind this file to ASP.NET controls for website navigation. It is an XML file provided in ASP.NET with .sitemap extension. It organizes website pages links in a hierarchical navigational structure. There can be more than one sitemap files but commonly there is only one for a website. If there are more than one sitemap file for a website than the other sitemap files are referenced in a siteMapNode of a web.sitemap file. This file is located at the root of the website and always saved with Web.sitemap name. Web.sitemap file is always saved in XML formatting.

Navigation Controls

ASP.NET provides navigation controls for website navigation purposes.

Menu Control

Menu Control is used for both static and dynamic display of website menus. You can bind SiteMapDataSource to menu control to display navigational menu of the website. Menu control can be customized using template tags. Menu control provides great control to work with sitemap infrastructure.

Static and Dynamic Display

Static and dynamic display can be handled using StaticDisplayLevels and MaximumDynamicDisplayLevels properties of Menu control.

Appearance

Orientation property of Menu control is used to set the appearance vertical or horizontal.  You can also set dynamic appearance time by using DisappearAfter property.

TreeView Control

TreeView is the most popular control to display hierarchical data. It displays sitemap links of a website in a root-parent-leaf structure. TreeView nodes can be programmatically created or you can bind SiteMapDataSource or XMLDataSource to TreeView control. It can also be customized using template tags.

Root Node: A root node in TreeView control is the node that has no parent node and one or more child nodes.

Parent Node: A node should have one or more child nodes to become a parent node.

Leaf Node: Leaf node is a node that has no child node.

SiteMapPath Control

It represents the path of the navigation of your website. It shows the current location of the website and shows the links of the previous pages back to the home or root page. So SiteMapPath control navigates the user backwards and it doesn’t allow going forwards. You don’t have to bind data to SiteMapPath control; it obtains data directly from web.sitemap file and displays the titles of the pages. You can click on the title in SiteMapPath control to go to that page of the website.  Normally it works with other navigation controls but you can use it alone in your website.

1. Create a new Empty Web Site in Visual Studio 2010 either in Visual Basic or Visual C#.
2. Add a master page to the website.
3. Add a Site Map file in the Web Site and write code below.
   <?xml version="1.0" encoding="utf-8" ?>

   <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

          <siteMapNode url="Home.aspx" title="Home" description="Home Page">

                 <siteMapNode url="About.aspx" title="About Us" description="">

                 </siteMapNode>

                 <siteMapNode url="Products.aspx" title="Our Products" description="All Products">

                        <siteMapNode url="ComputerProducts.aspx" title="Computer" description="Computer Products" />

                        <siteMapNode url="ElectronicsProducts.aspx" title="Electronics" description="Electronics" />

                 </siteMapNode>

                 <siteMapNode url="Customers.aspx" title="Our Customers" description="Customer List">

                        <siteMapNode url="AmericanCustomers.aspx" title="American Customers" description="American Customers List" />

                        <siteMapNode url="EuropeanCustomers.aspx" title="European Customers" description="European Customers List" />

                 </siteMapNode>

                 <siteMapNode url="Contact.aspx" title="Contact Us" description="">

                 </siteMapNode>

          </siteMapNode>

   </siteMap>
   Web.siteMap file has a root node with title “Home” and it has other nodes like “About Us”, “Products”, “Customers” and “Contact Us” as its child nodes. “Product” and “Customers” have their own child nodes so these are parent nodes. “About Us”, “Contact Us” are leaf nodes because these have no child nodes. 
    
4. Add ten Web Forms in the Web Site and select master page. Rename the pages as we have mentioned in Web.sitemap file.
5. Open master page and drag and drop a SiteMapDataSource, a SiteMapPath and a Menu.
6. Configure SiteMapDataSource from little arrow at the top and choose SiteMapDataSource for TreeView
   <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

   <asp:SiteMapPath ID="SiteMapPath1" runat="server">

   </asp:SiteMapPath>

   <br />

   <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">

   </asp:Menu>

   
    
7. Now you can view Web Site in browser.

You might also Like:

How to Download youtube videos without any sofware

Recharge  Docomo prepaid card via Twitter

Ben 10 Game  Free Download

ASP.NET DROPDOWN LIST OF COUNTRY NAMES