ComponentOne SiteMap for ASP.NET Web Forms
In This Topic
    Quick Start: Create a basic SiteMap
    In This Topic

    Complete the steps below to learn how to create a simple application using the SiteMap control.

    The following steps are for an application created on Visual Studio 2012. The steps may be differ slightly based on the version of Visual Studio you use.

    Step 1 of 3: Add SiteMap to the Web Form

    1. In Visual Studio, create a new ASP.Net WebApplication and add a new Web Form.
    2. Add the following references to your project:
      • C1.Web.Wijmo.Controls.4.dll
      • C1.Web.Wijmo.Controls.Design.4.dll
    3. In the Toolbox, locate the SiteMap control and drag it onto the Web Form. If you cannot find the control in the toolbox, complete the following steps to add the control to the Toolbox:        
      1. Right-click in the toolbox to open the context menu.
      2. To make the Studio for ASP.NET Web Forms components appear within a tab in the Toolbox, select Add Tab from the context menu and type in the tab name (for example, Studio for ASP.NET Web Forms).
      3. Right-click the tab where the component is to appear and select Choose Items from the context menu. The Choose Toolbox Items dialog box opens.
      4. In the dialog box, select the .NET Framework Components tab. Sort the list by Assembly Name (click the Assembly Name column header) and check the check boxes for all components corresponding to Assembly Name C1.Web.Wijmo.Controls.x.
      5. Click OK to close the dialog box. The controls are added to the Visual Studio Toolbox.
    4. Add 3 more Web Forms, one for each web page you want to link in a site map.

    Step 2 of 3: Add Nodes to SiteMap

    1. Select the SiteMap control and click the smart tag to open the SiteMap Tasks Menu.
    2. Click Edit Nodes. This opens the C1SiteMap Designer Form.
    3. Click the Add Child Item button three times to add three child nodes.

    4. Click C1SiteMapNode2 and click Move Item Right button.

    5. Select C1SiteMapNode1. On the right hand side, in the PropertiesWindow, set the NavigateUrl property to Web Form2.aspx. Similarly, set the NavigateUrl property for C1SiteMapNode2 and C1SiteMapNode3 to Web Form3.aspx and Web Form4.aspx respectively.
    6. Press F5 to run the project.

    In Source View

    Add the following markup within the <cc1:C1SiteMap></cc1:C1SiteMap>tags, to add nodes to the SiteMap control:

    Markup
    Copy Code 
    <Nodes>
                                        <cc1:C1SiteMapNode runat="server" Text="C1SiteMapNode1" NavigateUrl="Web Form2.aspx">
                           <Nodes>
                                 <cc1:C1SiteMapNode runat="server" NavigateUrl="Web
    Form3.aspx" Text="C1SiteMapNode2">
                                 </cc1:C1SiteMapNode>
                           </Nodes>
                   </cc1:C1SiteMapNode>
                   <cc1:C1SiteMapNode runat="server" Text="C1SiteMapNode3" NavigateUrl="Web Form4.aspx">
                   </cc1:C1SiteMapNode>
</Nodes>

    In Code

    Add the following code to the Page_Load event, to add nodes to the SiteMap control.

    To write code in C#

    C1SiteMap1.Nodes.Add(new C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapNode());
C1SiteMap1.Nodes.Add(new C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapNode());
C1SiteMap1.Nodes[0].Nodes.Add(new C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapNode());
C1SiteMap1.Nodes[0].Text = "C1SiteMapNode1";
C1SiteMap1.Nodes[1].Text = "C1SiteMapNode1";
C1SiteMap1.Nodes[0].Nodes[0].Text = "C1SiteMapNode1Child1";

    To write code in VB

    C1SiteMap1.Nodes.Add(New C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapNode())
C1SiteMap1.Nodes.Add(New C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapNode())
C1SiteMap1.Nodes(0).Nodes.Add(New C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapNode())
C1SiteMap1.Nodes(0).Text = "C1SiteMapNode1"
C1SiteMap1.Nodes(1).Text = "C1SiteMapNode1"
C1SiteMap1.Nodes(0).Nodes(0).Text = "C1SiteMapNode1Child1"

    What You've Accomplished

    When you run the project, C1SiteMapNodes appear as shown in the image below. SiteMapNode1 and SiteMapNode3 are at level0, whereas SiteMapNode2 is a level1 node.

    Back to Top

    Step 3 of 3: Customize Appearance and Layouts

    In the Designer

    1. Open SiteMap tasks menu and select Edit Nodes.
    2. In the C1SiteMap Designer Form, select C1SiteMap1 and on the right hand side, set the CssClass and ThemeSwatch as per your choice.
    3. Expand the Layout property group, expand the DefaultLevelSetting property group and set Layout to List.
      Note: You can also add an for the selected level by selecting an image added to the project, in the ImageUrl property.
    4. Expand the ListLayout property group and set RepeatColumns to 2.

    Another way of changing the layouts for different levels of nodes is through the C1SiteMapLevelSetting Collection Editor. Complete the following steps, to change layouts using the C1SiteMapLevelSetting Collection Editor.

    1. Right click the SiteMap control and select Properties.
    2. In the Properties Window, click the ellipsis button (...) next to LevelSettings property. This opens the C1SiteMapLevelSetting Collection Editor.
    3. In the C1SiteMapLevelSetting Collection Editor, click the Add button to add a new level setting.
    4. On the right hand side, set Level to 1, Layout to Flow and SeparatorText to ','.

    In Source View

    Add the following markup within the <cc1:C1SiteMap></cc1:C1SiteMap>tags, to change the Layout of Level 0 (Default Level) and Level 1 nodes:

    Markup
    Copy Code 
    <LevelSettings>
                 <cc1:C1SiteMapLevelSetting Level="1" SeparatorText="," Layout="Flow">
                 </cc1:C1SiteMapLevelSetting>
         </LevelSettings>
         <DefaultLevelSetting SeparatorText=" ||">
                 <ListLayout RepeatColumns="2" />
                                  
         </DefaultLevelSetting>

    In Code

    Add the following code to the Page_Load event, to modify DefaultLevel settings and to add a new level setting.

    To write code in C#

    // Add a new LevelSetting
C1SiteMap1.LevelSettings.Add(new C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapLevelSetting());

// Customize LevelSetting
C1SiteMap1.LevelSettings[0].Level = 1;
C1SiteMap1.LevelSettings[0].Layout = C1.Web.Wijmo.Controls.C1SiteMap.SiteMapLayoutType.Flow;
C1SiteMap1.LevelSettings[0].SeparatorText = ",";

// Customize DefaultLevelSetting
C1SiteMap1.DefaultLevelSetting.Level = 0;
C1SiteMap1.DefaultLevelSetting.Layout = C1.Web.Wijmo.Controls.C1SiteMap.SiteMapLayoutType.List;
C1SiteMap1.DefaultLevelSetting.ListLayout.RepeatColumns = 2;

    To write code in Visual Basic

    ' Add a new LevelSetting
C1SiteMap1.LevelSettings.Add(New C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapLevelSetting())
' Customize LevelSetting
C1SiteMap1.LevelSettings(0).Level = 1
C1SiteMap1.LevelSettings(0).Layout = C1.Web.Wijmo.Controls.C1SiteMap.SiteMapLayoutType.Flow
C1SiteMap1.LevelSettings(0).SeparatorText = ","
' Customize DefaultLevelSetting
C1SiteMap1.DefaultLevelSetting.Level = 0
C1SiteMap1.DefaultLevelSetting.Layout = C1.Web.Wijmo.Controls.C1SiteMap.SiteMapLayoutType.List
C1SiteMap1.DefaultLevelSetting.ListLayout.RepeatColumns = 2

    What You've Accomplished

    Press F5 to run the project and observe that all Level1 nodes appear in a Flow layout with a separator, whereas all Level0 nodes appear as a List in two columns.

    Back to Top