This tutorial will show you how to Add Web site Navigation in ASP.NET 3.5.
In this tutorial we will demonstrate how to construct a navigation system that lets users move freely between pages, especially as you change the site. We will show you how to add ASP.NET site navigation to create a centralized site map layout of the pages of your Web site.
We will create a Web site that has an example of pages and a site-map file that describes the layout of the pages, including using the TreeView controlas a navigation menu that lets users jump all around your Web site! We will use the breadcrumb, aka the SiteMapPath control to enable a user to view and move back up the site hierarchy from the current page.
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
To start we need to create a new Web site. Click > File > New > Web site > ASP.NET Web site > mySiteNav.aspx > Ok.
When using site navigation you need a way to describe how pages are laid out in our site. The default method is to create .xml file that includes the site hierarchy, including page titles and URLs. The structure of the .xml file will reflect the structure of your site. Each page is represented as a siteMapNode element in the site map considering the top node is the home page and the child nodes represent pages that go further into your Web site.
In order to create a site map simply Right-click the name of the Web site in the Solution Explorer and click > Add New Item > Site Map > Add. Leave the default name associated with the site map.
**Important that the file of the site map is named Web.sitemap and appears in the root of the Web site.
Add the following code, overwriting the default contents:
The Web.sitemap file contains a set of siteMapNode elements that are nested to three levels. The structure of each element is the same just in a different location within the XML hierarchy. Save then Close.
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
Now we need to create some pages to navigate to and from. We will create a couple pages that were described in the site map. Navigate to the Solution Explorer, Right-click on the name of the site and click > Add New Item > Web Form > and name it Home.aspx and then click > Add. Switch to Design View and type in Home and make the Heading of the Home.aspx page format to . Do the same for the other seven pages listed in the XML file.
Now that we have a site map and some pages we can create a Navigation Menu using the TreeView control. To add a tree-style navigation menu open the Home.aspx and from the Toolbox, drag over a SiteMapDataSource control onto the page. This control retrieves its information from the Web.sitemap file that you created. Now from the Navigation group in the Toolbox, drag a TreeView control onto the page.
From the Navigation Group in the Toolbox, drag TreeView on to the page and locate the Tasks menu, then Choose Data Source and click > SiteMapDataSource1. Save the page. You can test this navigation system now:
Now the only problem with the website is that the navigation menu appears only on the Home.aspx. We will fix that soon.
In order to display the navigation history when using the TreeView control we need to add a SiteMapPath control that can automatically implement page navigation. This is also known as a breadcrumb.
To display the navigation history open the Cars.aspx page and switch to the Design View. From the Navigation group in the ToolBox, drag a SiteMapPath control onto the page. Repeat this for every page that you created.
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.
Now we will create a navigation Menu using the Menu Control. To start we first need to open Auto.aspx and switch to Design view. Then from the Navigation group in the Toolbox, drag a Menu control onto the page. Then on the Menu Tasks menu, Choose Data Source box, click NewDataSource. Then configure the Data Source by clicking Site Map > Ok.
Save and Run for a Test. Now the Menu Control only appears on the Auto.aspx page. We could either add the Menu Control to every page or configure site Navigation with adding Master Pages.
To start, in the Solution Explorer, Right-click the name of the Web site, then click > Add New Item > Master Page and then name it Nav.master and click > Add. Then switch to Design View. The Master Page should appear with a default ContentPlaceHolder control.
Now insert a blank line in front on the ContentPlaceHolder. To do this simply select the ContentPlaceHolder control and press LEFT ARROW then ENTER.
Then from the Toolbox, drag a SiteMapDataSource control onto the master page and position it above the ContentplaceHolder. Now we need to insert a blank line under the SiteMapDataSource. To do this click the SiteMapDataSource control, press RIGHT ARROW and then ENTER.
After locate the table Menu in the Top Menu of Visual Studio and select Table > Insert Table > for demonstrating purposes adjust the rows to 1 and the columns to 2 with width being 100 percent. Now drag from the Navigation group of the Toolbox, a TreeView control to the left of the table. Then from the TreeView Tasks Menu > Choose Data Source box > click SiteMapDataSource1.
From the same Navigation group in the Toolbox, drag a SiteMapPath control onto the right cell of the table. Press SHIFT + ENTER and drag the ContentPlaceHolder control onto the right cell of the table and position it under the SiteMapPath control. When you are complete it should resemble this:
Now in order to use the Master page you will have to re-create the Home, Auto, Trucks, etc.. as content pages. This is because when you are using a master page, you create the pages in your site as content pages. The content pages use Content controls to define the text and controls that are displayed in the ContentPlaceHolder control of the master page. This can be done fairly easy. Delete all the pages that you created except for the Master Page and re-create them this time remembering to select the Select Master Page checkbox:
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
|
|