Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Navigation with SiteMap, Menu and TreeView

Site navigation interfaces have always been a complicated subject. In this article we will talk abou Navigation with SiteMap, Menu and TreeView

Navigation with SiteMap, Menu and TreeView

Site navigation interfaces have always been a complicated subject. What should we use to create a user-friendly interface, and at the same time, easy to maintain? ASP.NET 2.0 has brought resources that made this task so simple it will look like a joke . This article will explain how Master Pages, Site Map, Menus and TreeView can help us to create navigation interfaces with not even one code line!

Master Pages

Create a new Web Site in Visual Studio 2005. Close Default.aspx page and through Solution Explorer add a new item. In the Add New Item window choose the Master Page template and name it “Menu.Master”, as shown in Figure 1.

 

image002.jpg

Figure 1. Creating a Master Page

 

A Master Page is nothing else than an ASP.NET page. The difference is that a Master Page comes with a control called ContentPlaceHolder. We will easily understand the behavior of a Master Page as soon we add new pages to the project. For the time being, think of it as being the site’s “main page” and the ContentPlaceHolder control, the space reserved for the content of the site, which will be modified while we navigate.

Place the cursor before ContentPlaceHolder and add a new HTML Table to the page, through the Layout> Insert Table menu. A very interesting feature of Visual Studio 2005 is the template option that appears when we are creating tables (Figure 2).  Note that there are many common templates to build Web interfaces. Select template and choose Header and Side.

 

image003.png

Figure 2. Creating a table using templates

 

Drag the ContentPlaceHolder into the central cell of the table, as seen in Figure 3. Adjust spaces, borders, colors etc. so the page will suit you. Consider that this will be the visual identity of your entire site, and that the ContentPlaceHolder control must be set where the content of the site will appear.

 

image006.jpg

Figure 3. Formatting a Master Page

 

 

After formatting your master page, create a new Web Form through the Add New Item option, which you access by right clicking the mouse over the project in Solution Explorer. Type the name “Start.aspx” and check the select Master Page option (Figure 4).

 

image008.jpg

Figure 4. Adding a content page

 

Next, a window will appear so that you can choose which the master page of this content page is. Choose Menu.Master and click OK (Figure 5). The Start.aspx page will be created. See in the page design that the only area in which we can work is exactly the space reserved by the master page’s ContentPlaceHolder. Our content page stays covered with the formats performed in the master page. In the Start.aspx page, add a text to identify the page. If you wish, you can realize any other formatting or add other controls. The behavior of this page is the same as an ASPX traditional page.

 

image010.jpg

Figure 5. Choosing the Master Page for the content page

 

To carry on with our example, create other content pages. In this example, we are creating the following pages: Soccer.aspx, Real.aspx, Inter.aspx, Barcelona.aspx, Formula1.aspx, Ferrari.aspx, Willians.aspx and Tennis.aspx. Add a text to each of these pages only to differentiate one from another, if you prefer you can add controls, images etc. At last, in Solution Explorer click with the right click over the Start.aspx page and choose Set As Start Page.

Site Map

ASP.NET 2.0 brought us a new object called Site Map, which is used to store and organize the hierarchical structure of the pages in a site. To create a site map, go to the Add New Item option, choose the Site Map template and click Add. A XML file, called Web.sitemap will be created. Note that it has some elements called siteMapNode. It’s using this XML that we will define the site structure. Modify the site map so it will be like List 1.

 

List 1. Defining the site structure

xml version="1.0" encoding="utf-8" ?>

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

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

    <siteMapNode url="Soccer.aspx" title="Soccer">

      <siteMapNode url="Real.aspx" title="Real"/>

      <siteMapNode url="Inter.aspx" title="Inter"/>

      <siteMapNode url="Barcelona.aspx" title="Barcelona"/>     

    siteMapNode>

    <siteMapNode url="Formula1.aspx" title="Formula1">

      <siteMapNode url="Ferrari.aspx" title="Ferrari"/>

      <siteMapNode url="Willians.aspx" title="Willians"/>

    siteMapNode>

    <siteMapNode url="Tennis.aspx" title="Tennis"  description="" />

  siteMapNode>

siteMap>

 

In a siteMapNode we need to define the page URL, a title and optionally we can define a description. Note that we put soccer teams inside the node Soccer, and Formula1 teams inside the Formula1 node. This way we are creating a hierarchical structure of the site. We can define a structure with many levels we desire.

SiteMapPath

ASP.NET 2.0 also brought a set of controls meant for navigation. See in Figure 6 the navigation controls that are in the Navigation section of the ToolBox.

 

image011.png
Figure 6. Navigation controls

 

SiteMapPath is a control that shows, in a hierarchic structure, which is the actual page. Let’s add a SiteMapPath in our master page. For such add a line above the table title, and at this line drag a SiteMapPath (Figure 7).

 

 

 

image013.png  

Figure 7. Adding a SiteMapPath in the master page

 

  • As many ASP.NET controls, SiteMapPath has the Auto Format option in your Tasks menu. Include the formatting of your choice in the control; here we will be using the Classic format.
  • Menu
  • Let us add a Menu control to the Master Page. Drag a Menu control in the left cell of the table and, through the Tasks, change the formatting to Classic. Expand the list of the Choose Data Source option and click new data source. The definition window the Data Source (Figure 8) will appear. In this window, choose the Site Map option. The Data Source will point automatically to the Site Map object we created (web.sitemap), and that should be in the site root. Next, click OK and run your project. See the results as shown in Figure 9. Select the options and see that the content of the site is modified due to our choice. See as well that the SiteMapPath is modified automatically when we navigate, showing the complete path of the actual page.

 

image016.jpg

Figure 8. Defining the Site Map as Data Source of the menu

 

 

 

 

image018.jpg

Figure 9. Result of the Menu control

  • TreeView
  • At last let’s include a TreeView right above the Menu control. Change the formatting of the TreeView control, in this example I’m using Simple 2. In the Choose Data Source option, select SiteMapDataSource1. As we already have a Data Source configured for the Menu control, we can reuse it in TreeView. Run the project and check the result, as shown in Figure 10.

 

image020.jpg

Figure 10. Adding TreeView control to the Master Page

         

Try to navigate in the site through the TreeView. Note that as we choose an option through TreeView, automatically the respective selected option of the Menu is modified. The SiteMapPath is also modified independently of which control we use to navigate.

Conclusion

How many code lines do we use? Absolutely none. With the use of a master page, three controls and a site map file, we create a complete navigation structure. Surely, on your applications you will opt to use or the Menu or the TreeView. To list the options in this example we include both controls so that you can verify the behavior of each one. As for the formatting options we demonstrated, they were the templates offered to us by Visual Studio 2005 .Through the control properties we can make more advanced layout modifications. The important matter is that we can create and customize a navigation user interface simpler and faster, with no need of additional code.

 



colunista nao disponivel

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login