September 1, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

ASP.NET 2.0's Sophisticated Site Navigation Features

  • September 30, 2004
  • By Thiru Thangarathinam
  • Send Email »
  • More Articles »

Displaying the Site Navigation Information Using a Menu Control

So far, you have seen how to display the site navigation structure using the TreeView control. In this section, you will utilize the Menu control and see how you can use that as a data bound control, binding it with the SiteMapDataSource control.

Go back to the Navigation.master page and modify its code to look like the following:

<%@ Master Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
   <title>Master Page</title>
</head>
<body>
   <form id="form1" runat="server">
   <div>
      <table style="width: 100%; height: 100%" border="1">
         <tr height="100px">
<td colspan="2" align="left">
<asp:Menu ID="Menu1" Runat="Server"
          DataSourceID="SiteMapDataSource1">
</asp:Menu>
</td>
         </tr>
         <tr>
            <td style="width: 10%">
                <asp:TreeView ID="TreeView1" Runat="server"
                              DataSourceID="SiteMapDataSource1"
                              ExpandDepth="2"
                              ShowExpandCollapse="False"
                              NodeIndent="10">
                   <LevelStyles>
                      <asp:TreeNodeStyle Font-Bold="True"
                                         Font-Underline="False"/>
                      <asp:TreeNodeStyle Font-Italic="True"
                                         Font-Underline="False" />
                      <asp:TreeNodeStyle Font-Size="X-Small"
                                         ImageUrl="~/Images/bullet.gif"
                                         Font-Underline="False" />
                   </LevelStyles>
                   <NodeStyle ChildNodesPadding="10" />
                </asp:TreeView>
            </td>
            <td style="width: 100px">
                <asp:contentplaceholder id="ContentPlaceHolder1"
                                        runat="server">
                </asp:contentplaceholder>
            </td>
         </tr>
      </table>
        <asp:SiteMapDataSource ID="SiteMapDataSource1"
                               Runat="server"/>
   </div>
   </form>
</body>
</html>

The only change you made from the previous section's example is the addition of the following code (which is related to the menu control):

<tr height="100px">
   <td colspan="2" align="left">
   <asp:Menu ID="Menu1" Runat="Server"
             DataSourceID="SiteMapDataSource1">
   </asp:Menu>
   </td>
</tr>

You declared a menu control and set its DataSourceID property to the id of the SiteMapDataSource control. That's all you need to do to leverage the menu control for displaying the site navigation structure from the web.sitemap file. When you execute the above code, you will see the output in Figure 2.



Click here for a larger image.

Figure 2. Results of the Menu Control for Displaying the Site Navigation Structure

In Figure 2, the menus are arranged in horizontal fashion by default. You also can arrange them vertically by configuring the orientation. The setting in the Orientation property can be either Vertical or Horizontal.

Displaying Breadcrumb Navigation

If you have done any serious Web development, you definitely have heard the term "breadcrumb." Basically, breadcrumb navigation allows you to display the current page's context within the site structure. The benefit of a breadcrumb is that it makes obvious the ways in which the pages have been grouped and allows the user both to navigate between these pages and understand the site arrangement structure.

Traditionally with ASP.NET 1.x, displaying breadcrumbs requires you to create manual plumbing code that reads information from an external source to display breadcrumbs. However, with ASP.NET 2.0, this is built into the framework itself and using it requires only one line of declaration. As an example of this new control, modify your Navigation.master file to look like the following:

<%@ Master Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
   <title>Master Page</title>
</head>
<body>
   <form id="form1" runat="server">
   <div>
      <table style="width: 100%; height: 100%" border="1">
         <tr height="100px">
            <td colspan="2" align="left">
            <asp:Menu ID="Menu1" Runat="Server"
                      DataSourceID="SiteMapDataSource1">
            </asp:Menu>
            </td>
         </tr>
         <tr height="100px">
            <td colspan="2" align="left">
                Currently Selected Page is: <asp:SiteMapPath
                Runat="Server"
                ID="SiteMapPath1"></asp:SiteMapPath>
            </td>
         </tr>
         <tr>
            <td style="width: 10%">
               <asp:TreeView ID="TreeView1" Runat="server"
                             DataSourceID="SiteMapDataSource1"
                             ExpandDepth="2"
                             ShowExpandCollapse="False"
                             NodeIndent="10">
                  <LevelStyles>
                     <asp:TreeNodeStyle Font-Bold="True"
                                        Font-Underline="False"/>
                     <asp:TreeNodeStyle Font-Italic="True"
                                        Font-Underline="False" />
                     <asp:TreeNodeStyle Font-Size="X-Small"
                                        ImageUrl="~/Images/bullet.gif"
                                        Font-Underline="False" />
                  </LevelStyles>
                  <NodeStyle ChildNodesPadding="10" />
               </asp:TreeView>
            </td>
            <td style="width: 100px">
               <asp:contentplaceholder id="ContentPlaceHolder1"
                                       runat="server">
               </asp:contentplaceholder>
            </td>
         </tr>
      </table>
      <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server"/>
   </div>
   </form>
</body>
</html>

Because most of the code is similar to the previous example, you can concentrate only on the lines of code that are different. You added a new tr element that contains the SiteMapPath control in it:

<tr height="100px">
   <td colspan="2" align="left">
      Currently Selected Page is: <asp:SiteMapPath
         Runat="Server"
         ID="SiteMapPath1"></asp:SiteMapPath>
   </td>
</tr>

Once you add the SiteMapPath control, it automatically binds to the SiteMapDataSource control and displays the context of the current page in the site-navigation hierarchy.





Page 2 of 3



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel