Building an ASP.NET SiteMap

This example shows how to create a Web site with a SiteMap, Menu, SiteMapPathand master page. A web.sitemap file is an XML file that describes the structure of a web site. A master page serves as a template for pages in the Web site. A Menu and SiteMapPath allow you to navigate a Web site. This example illustrates:

Creating a Web sitemap.
Creating a master page.
Adding a Menu and SiteMapPath to a master page.
Using the Smart Tasks window.
Adding content pages referencing the master page to the site.
Running the application in a browser.

The example creates the Web site in several stages, each building on the previous ones.

Note: You can only create ASP.NET projects in CodeGear RAD Studio, not Win32 personalities.

To add a SiteMap

Create a new ASP.NET project by clicking FileNewASP.NET Web Application.
In the New ASP.NET Web Application dialog, name your project or use the default name. In the Location field, accept the default path or enter another project path. Choose either Cassini or IIS as your server in the Server drop down menu.
(Optional) In the New ASP.NET Web Application dialog box, click View Server Options The dialog expands to show additional server options. Set the various read and write attributes of the project as needed or accept the defaults.
Tip: In most cases, the default settings suffice.
Add a new web.sitemap file to the project by clicking FileNewOther. In the New Items dialog under New ASP.NET Files, select Site Map and click OK. The IDE displays a new tab Web.sitemap with sitemap template text.
Replace the template text on the Web.sitemap tab with this text:

Copy Code

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
    <siteMapNode title="Home" url="~/home.aspx" >
        <siteMapNode title="Book 1" url="~/book1/book1.aspx" >
            <siteMapNode title="Chapter 1" url="~/book1/chapter1/chapter1.aspx" >
            </siteMapNode>
        </siteMapNode>
    </siteMapNode>
</siteMap>

This XML defines a hierarchy of pages in the site. Save this change by clicking FileSave or entering Ctrl-S.

To add a master page

Add a new master page to the project by clicking FileNewOther. In the New Items dialog under New ASP.NET Files, select ASP.NET Master Page and click OK. On the New Master Page dialog, the default name of the master page is MasterPage1.master; you can enter a different name, but you should use the .master extension. Click OK. The IDE displays a new tab MasterPage1.master containing a new master page with one content placeholder. The default content of a master page is a single ContentPlaceHolder control, which is used to indicate where content can be inserted into content pages that reference this master page. This example uses only one ContentPlaceHolder, but you can have more than one ContentPlaceHolder on a master page.
Click the MasterPage1.master tab at the bottom of the master page to view its markup. Before adding the Menu and SiteMapPath controls to the master page, add some <div> elements to control the positioning of these controls. To do this, replace the text in the master page's body element with the following text:

Copy Code

<body>
    <form runat="server">
        <div id="titlediv" style="WIDTH: 100%">
            <h1>Sample</h1>
        </div>
        <div id="breadcrumbdiv" style="WIDTH: 100%">
        </div>
        <div id="menudiv" style="FLOAT: left; WIDTH: 33%">
        </div>
        <div id="contentdiv" style="FLOAT: left; WIDTH: 66%">
            <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
            </asp:contentplaceholder>
        </div>
    </form>
</body>

Save this change by clicking FileSave or entering Ctrl-S. The master page now has several divisions that appear as rectangles in the Design pane. The content placeholder has also shifted to the right side of the page. Master pages are used to build content pages. Everything that's in a master page appears on a content page based on that master. If the master is changed, that change propagates to the content pages derived from it.

To add a menu and SiteMapPath to the master page

To add a menu, view the Design pane for the master page. Drag a Menu control from the tool palette under Navigation into the <div> immediately to the left of the ContentPlaceHolder. Position the Menu so its top aligns with the top of the ContentPlaceHolder.
Display the Menu Smart Tasks window by either clicking the arrow on the upper right of the Menu or clicking Smart Tasks on the Menu context menu.
To connect the Menu to a data source, click <New data source> in the Choose Data Source drop down list in the Smart Tasks window. This displays the Choose a Data Source Type dialog.
On the Choose a Data Source Type dialog, select the Site Map data source type. Enter an ID for the data source or use the default ID and click OK to add the data source.
To customize the Menu control, click on the Menu. In the Object Inspector, change the StaticDisplayLevels property to 3. This is the number of levels displayed in the Menu. Note that the menu displays data from the SiteMap XML file in the Design pane.
To add a SiteMapPath, view the Design pane for the master page. Drag a SiteMapPath control from the tool palette under Navigation into the second <div> from the top of the master page, just above the <div> containing the Menu. A SiteMapPath is also referred to as bread crumbs, since it shows the path you used to get to a page and allows you to retrace your steps.

The menu and SiteMapPath are used for navigating the site.

To add a content page

Create a new content page by clicking FileNewOther. In the New Items dialog under New ASP.NET Files, select ASP.NET Content Page and click OK. In the New Content Page dialog, name the page Home.aspx. Select ~/MasterPage1.master in the Master page file drop down menu. In the resulting content page, the gray elements are the ones the content page inherits from the master page: everything except the ContentPlaceHolder control. These elements are grayed to indicate that they are read only. Only the ContentPlaceHolder control can be modified.
On the Home.aspx pane, click the Home.aspx tab at the bottom. On the first line, change the Title attribute to Title=”Home”. Save this change by clicking FileSave or entering Ctrl-S.
The content page (home.aspx) has a single Content control that corresponds to the ContentPlaceHolder control in the master page (masterpage1.master). To customize the content page, on the Home.aspx pane, click the Design tab at the bottom. Click inside the ContentPlaceHolder element and type Home.

This content page will serve as the site's home page.

To create site content

To create site content, you need to create content pages and folders to contain them. To create a new folder, right-click the project in the Project Manager and click Add NewFolder. Enter Book1 for the folder's name.
Right click the Book1 folder in the project manager and click Add NewOther. In the New Items dialog under New ASP.NET Files, select ASP.NET Content Page and click OK. In the New Content Page dialog, name the page Book1.aspx. Select ~/MasterPage1.master in the Master page file.
On the Book1.aspx pane, click the Book1.aspx tab at the bottom. On the first line, change the Title attribute to Title=”Book1”. Save this change by clicking FileSave or entering Ctrl-S.
On the Book1.aspx pane, click the Design tab at the bottom. Click inside the ContentPlaceHolder element and enter Book1.
Add a folder inside the Book1 folder. Right-click the Book1 folder in the Project Manager and click Add NewFolder. Enter Chapter1 for the folder's name.
Right click the Chapter1 folder in the project manager and click Add NewOther. In the New Items dialog under New ASP.NET Files, select ASP.NET Content Page and click OK. In the New Content Page dialog, name the page Chapter1.aspx. Select ~/MasterPage1.master in the Master page file.
On the Chapter1.aspx pane, click the Chapter1.aspx tab at the bottom. On the first line, change the Title attribute to Title=”Chapter1”. Save this change by clicking FileSave or entering Ctrl-S.
On the Chapter1.aspx pane, click the Design tab at the bottom. Click inside the ContentPlaceHolder element and enter Chapter1.

The pages and folders have been added to correspond to the appropriate items in the sitemap XML file. This completes adding site content.

To finish the site

The file Default.aspx is no longer needed. Right click on Default.aspx in the project manager and click Delete. Click Yes in the Confirm dialog.
You must define a start page, which is the first page displayed when the application runs. In the Project Manager, right-click Home.aspx and select Set as Start Page in the context menu.

The application is now ready to run.

To view the page in a Web browser

To run the application and view in a browser, click RunRun. The project builds, displaying a build status window, which is closed upon completing the build.
The Home page should be displayed in a Web browser.
Click Book1 in the menu to display the Book1 page. Click Chapter1 to display the Chapter1 page.
Note that the SiteMapPath gets updated to show the currently displayed page's location in the site. You can click the nodes there to go to previous pages in the path.

This completes the project.