Home > Developer > ASP

ASP.net 2.0 site Map to build the site navigation structure

Source: Internet
Author: User
Tags bind config count implement xmlns
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
Asp.net| Navigation | site Ii. ways to use sitemap

You can use the site map file that you created in the previous section in three common ways:

· Using the SiteMapPath control

· Using the Sitemap data source control

· Using the Sitemap class

This SiteMapPath control allows you to generate breadcrumb. Figure 3 shows what a breadcrumb is.


Figure 3:breadcrumb Navigation
The SiteMapPath control displays various levels of navigation. For example, you can click on the parent or root level to navigate back or go to the top level. Of course, you can also customize the navigation hierarchy.

ASP.net 2.0 also comes with a good set of navigation controls, including the TreeView and menus. With the Sitemap data source control, you can bind the site map files to these controls.

In some cases, the built-in navigation controls may not meet your requirements. In this case, you can programmatically access this sitemap file and read a variety of SiteMapNode nodes. You can then generate a custom navigation structure-using SiteMapNode's title and URL attributes.

　　 third, use the SiteMapPath control

Before we discuss the details in detail, let's start by creating the directory structure and Web Forms we need. First, add two folders products and services to your Web site. Then, add a new master page Masterpage.master. Then add the Web Forms that appear in table 2 and make sure that you set the master page for them when you add them.

Web Table Single-name Folder
Default.aspx Website Root
Contact.aspx Website Root
Default.aspx Products
Product1.aspx Products
Product2.aspx Products
Default.aspx Services
Service1.aspx Services
Service2.aspx Services
Table 2:web Form List

Now, open the master page that you added earlier. Drag a Label control and a SiteMapPath control over it. Then, set the label's Text property to "welcome!".

The following list shows all the tags in the masterpage.master page:

<%@ Master language= "C #" autoeventwireup= "true"
Codefile= "MasterPage.master.cs" inherits= "MasterPage"%>
<title> Untitled Page </title>
<body>
<form id= "Form1" runat= "Server"
<div>
<asp:label id= "Label1" runat= "Server" font-size= "Xx-large" forecolor= "Blue" text= "welcome!" > </asp:Label> <BR/>
<asp:sitemappath id= "SiteMapPath1" runat= "Server"
Font-names= "Verdana" font-size= "0.8em" pathseparator= ":"
<pathseparatorstyle font-bold= "True" forecolor= "#5D7B9D"/>
<currentnodestyle forecolor= "#333333"/>
<nodestyle font-bold= "True" forecolor= "#7C6F57"/>
<rootnodestyle font-bold= "True" forecolor= "#5D7B9D"/>
</asp:SiteMapPath>
<BR/>
<BR/>
<asp:contentplaceholder id= "ContentPlaceHolder1" runat= "Server"
</asp:contentplaceholder>
</div>
</form>
</body>
Now, open default.aspx from the root folder. The Default.aspx should look like Figure 4.


Figure 4:default.aspx Example runs to design this page, add a table with 4 rows and 1 columns. Drag a Label control to the top row and set its Text property to "Welcome to our website!" ”。 Then, drag three hyperlink controls onto the remaining lines and set their text and NavigateUrl properties, which are displayed in table 3.

HyperLink ID Text Property NavigateUrl Property
HyperLink1 Products ~/products/default.aspx
HyperLink2 Services ~/services/default.aspx
HyperLink3 Contact Us ~/contact.aspx
Table 3: Setting the Hyperlinks Properties

The following list shows the complete tag in default.aspx:

<%@ Page language= "C #" masterpagefile= "~/masterpage.master"
Autoeventwireup= "true" codefile= "Default.aspx.cs"
inherits= "_default" title= "Untitled Page"%>
<asp:content id= "Content1"
Contentplaceholderid= "ContentPlaceHolder1" runat= "Server"
<center>
<table>
<tr>
<TD width= "60%" >
<asp:label id= "Label1" runat= "Server" font-size= "X-large"
Text= "Welcome to our Web site!" > </asp:Label> </td>
</tr>
<tr>
<TD width= "60%" >
<asp:hyperlink id= "HyperLink1" runat= "Server"
Font-size= "X-large" navigateurl= "~/products/default.aspx" >products
</asp:HyperLink> </td>
</tr>
<tr>
<TD width= "60%" >
<asp:hyperlink id= "HYPERLINK2" runat= "Server" font-size= "X-large"
Navigateurl= "~/services/default.aspx" >services
</asp:HyperLink> </td>
</tr>
<tr>
<TD width= "60%" >
<asp:hyperlink id= "HyperLink3" runat= "Server"
Font-size= "X-large" navigateurl= "~/contact.aspx" >contact Us
</asp:HyperLink> </td>
</tr>
</table>
</center>
</asp:Content>
Now open default.aspx from the Products folder and design it as shown in Figure 5.


Figure 5:products Default page for folder
Table 4 lists all the hyperlinks that are used in Web Forms.

HyperLink ID Text Property NavigateUrl Property
HyperLink1 The Product ~/products/product1.aspx
HyperLink2 Second Product ~/products/product2.aspx
Hyperlink information in the default page under the Table 4:products folder

Following the same reasoning, design default.aspx from the Services folder, as shown in Figure 6.


Figure 6. Default page for the Services folder
Table 5 lists the hyperlink information used in Web Forms.

HyperLink ID Text Property NavigateUrl Property
HyperLink1 The Service ~/services/service1.aspx
HyperLink2 Second Service ~/services/service2.aspx
Hyperlink information in the default page under the Table 5:products folder

Finally, add a label to each of the other Web Forms and set its Text property as shown in Table 6.

Web Table Single-name The Text property of the label
~/contact.aspx Contact Us
~/products/product1.aspx Product Details
~/products/product2.aspx Second Product Details
~/services/service1.aspx The I Service Details
~/services/service2.aspx Second Service Details
Table 6: Set the label's Text property from the remaining Web Forms

Now run default.aspx from the root folder and navigate to the Product1.aspx page. Figure 7 shows a sample run of the Web form.


Figure 7:product1.aspx's example runs


Notice how the title and URL properties of the Web.sitemap file are used to generate "breadcrumbs". Also, notice how the parent is displayed along with the current page title. Try navigating to various pages and observing the SiteMapPath control.

　　 Iv. using the sitemap data source Control

The use of site maps is not limited to SiteMapPath controls. You can also attach site maps to navigable controls, such as the TreeView. In the following example, you will use the same site-map file to implement the binding to a TreeView control.

Add a new Web Form sitemapdatasourcedemo.aspx to your Web site. Then drag a sitemap data source control (SiteMapDataSource1) and a TreeView control (TREEVIEW1) onto the form. Set the DataSourceID property of this TreeView control to SiteMapDataSource1. In addition, set the Showlines property of the TreeView control to True. The following is the complete tag in the sitemapdatasourcedemo.aspx page:

<%@ Page language= "C #" autoeventwireup= "true"
Codefile= "SiteMapDataSourceDemo.aspx.cs"
inherits= "Sitemapdatasourcedemo"%>
<title> Untitled Page </title>
<body>
<form id= "Form1" runat= "Server"
<asp:treeview id= "TreeView1" runat= "Server" datasourceid= "SiteMapDataSource1"
Showlines= "True" >
</asp:TreeView>
<asp:sitemapdatasource id= "SiteMapDataSource1" runat= "Server"/>
</form>
</body>
Now, run this Web form to see how the same navigation structure is automatically generated into the TreeView (see Figure 8).


Figure 8: Bind the sitemap file to a TreeView control

Five, using the Sitemap class

to display the site map data in a SiteMapPath or TreeView control is too good. However, sometimes you may need to design custom build logic. For example, you might want to develop a custom navigation control-it only displays its parent vertically. In this case, you need to programmatically access this sitemap file. The Sitemap class allows you to achieve this exactly.

This sitemap path has two important properties: RootNode and CurrentNode. Their types are SiteMapNode, and they all enable you to refer to the root node and current node of the site map separately. Table 7 lists some of the important properties of the SiteMapNode class.

Property Describe
ChildNodes A collection of all the child nodes representing the current node
HasChildNodes Indicates whether the site map node has child nodes (True/false).
Title Returns the value of the title property specified in the site map file
Url Returns the value of the URL property specified in the site map file
Description Returns the value of the Description property specified in the site map file
ParentNode Indicates the reference of the parent site map node of the current node
Some important properties of the table 7:sitemapnode class

The following example uses a sitemap path to access a single node of a site-map file. Then, programmatically add them to a TreeView control.

Add a Web form called sitemapcustom.aspx. Then, drag a TreeView control over it. Add the list code to the Page_Load event for this Web form:

protected void Page_Load (object sender, EventArgs e)
{
int count = SiteMap.RootNode.ChildNodes.Count;
for (int i = 0; I count; i++)
{
SiteMapNode Smnode=sitemap.rootnode.childnodes[i];
TreeNode Tvnode = new TreeNode (Smnode.title, "", "", Smnode.url, "");
TREEVIEW1.NODES.ADD (Tvnode);
if (smnode.haschildnodes)
{
int childcount=smnode.childnodes.count;
for (int j = 0; J ChildCount; j + +)
{
SiteMapNode smchildnode = Smnode.childnodes[j];
TreeNode Tvchildnode = new TreeNode (Smchildnode.title,
""， ""，
Smchildnode.url, "");
TVNODE.CHILDNODES.ADD (Tvchildnode);
}
}
}
}
In this case, you first get the total number of child nodes in the root node. Then, you loop through the ChildNodes collection of the root node. In each traversal, you create a new instance of the TreeNode class and specify its caption and URL in its constructor. Then, you add this TreeNode to the Nodes collection of the TreeView. Then, you check whether there are any child nodes in the current SiteMapNode. If so, you iterate over it, repeating the TreeNode creation process. Note that this time you add the new TreeNodes to the ChildNodes collection of the current TreeNode object.

Note that because you know there are only two levels of nesting, you use 2 in the loop. To make your logic more general, you can fill the TreeView with a recursive return.

Run the Web form, and you'll see something like Figure 8 again.

　　 Vi. use of safety repairs

Often, Web sites implement role-based security patterns. For example, you can have different roles in your application, such as system administrators, product testers, and service testers. In such situations, you often need to control the site navigation links that are displayed to the user. For example, if the currently logged-on user belongs to the Product tester role, you may want to display only the links that are associated with the product and hide any other links. One way to handle a role is to use manual encoding, but it requires that all of the authorization logic be implemented programmatically. Fortunately, site map files and sitemap data source controls provide a feature called security renovations to help you.

To test the safety of renovations, you need to activate your site's membership and character features. Open the Web.config file and add the following markup to it:

<authentication mode= "Forms"/>
<authorization>
<deny users= "?" > </deny>
</authorization>
In this case, you have set the authentication mode to forms. You can also set authorization rules so that anonymous users will be barred from accessing the site. Then you need to start the role management feature-by adding the following flags to the Web.config file:

<rolemanager enabled= "true"/>
Then, select "Website>asp.net Configuration" from the Vs.net menu to open the Web Site Administration tool. Use this tool to add two roles: Producttesters and Servicetesters (refer to Figure 9). When a user who belongs to the producttesters role is checked in, you only want to implement a product-related link displayed in the Navigation TreeView control. Similarly, when a user belonging to the Servicetesters role is checked in, the service-related links should be displayed only in the TreeView.


Figure 9: Adding roles using the Web Site Administration Tool
Use the Web Site Administration tool to create two users, called User1 and User2, respectively. Add the User1 to the Producttesters role and add user2 to the servicetesters role (see Figure 10).


Figure 10: Creating a user using the Web Site Administration Tool
Note: By default, user and role information is stored in the ASPNETDB database under the App_Data folder of your Web site. This database is created automatically by ASP.net, if it does not exist.

Now add a new sitemap file Securitytrimming.sitemap to the Web site and enter the following tags:

<?xml version= "1.0" encoding= "Utf-8"?
<sitemap xmlns= "http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"
<sitemapnode url= "default.aspx" title= "Home" description= "My Web Site"
<sitemapnode title= "Products" roles= "Producttesters"
<sitemapnode url= "~/products/product1.aspx" title= "a"
<sitemapnode url= "~/products/product2.aspx" title= "Second Product"/>
</siteMapNode>
<sitemapnode title= "Services" roles= "Servicetesters"
<sitemapnode url= "~/services/service1.aspx" title= "the"
<sitemapnode url= "~/services/service2.aspx" title= "Second Service"/>
</siteMapNode>
<sitemapnode url= "contact.aspx" title= "Contact Us"/>
</siteMapNode>
</siteMap>
Most of the tags here are the same as those in the Web.sitemap file. However, there is an important attribute added to the products and services-sitemapnodes:roles. This roles property specifies the role that can access the node and its child nodes. Because links to products are only shown to users who belong to the producttesters role, you set the Roles property of the product SiteMapNode to Producttesters. Following the same reasoning, you want to set the roles property of the services SiteMapNode to Servicetesters. SiteMapNodes that do not have the specified roles property are accessible to all users. Also, note that the products and services nodes no longer have the specified URL property.

Now you need to configure the site map provider and initiate a security overhaul so that the Sitemap data source control can act as you requested. Add the following tags to the web.config file:

<sitemap defaultprovider= "MyProvider" enabled= "true"
<providers>
<add name= "MyProvider"
Type= "System.Web.XmlSiteMapProvider"
Sitemapfile= "Securitytrimming.sitemap"
Securitytrimmingenabled= "true"/>
</providers>
Here you add the <siteMap> section and specify a provider that points to the Securitytrimming.sitemap file. Note that the securityTrimmingEnabled property here is set to true to support security renovations. After you configure <siteMap>, the SITEMAP data source control automatically "picks" These settings from this section.

Add a new Web form called Login.aspx to the Web site. Then, drag a login control over it and set its Destinationpageurl property to "~/sitemapdatasourcedemo.aspx". Note that you have developed a sitemapdatasourcedemo.aspx before.

Run Login.aspx (refer to Figure 11) and enter the voucher for User1.


Figure 11: Login Page
After you have successfully logged in, you should see the TreeView as shown in Figure 12. Because User1 belongs to the producttesters role, it hides the links associated with the service.


Figure 12: Using Security renovations
　　 Vii. Summary

A site map is an XML file-it contains all the details of your Web site structure. You can use the site map file to generate the navigation structure. The three common methods for using site-map files are: Using the SiteMapPath control, using the Sitemap data source control, or using the Sitemap class. You can also use a feature called security refurbishment to support role-based security to the generated navigation links. Together, these controls and classes help create a professional navigation structure for your Web site.



This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
how to build dating site site navigation examples how to build site like facebook how to build social media site how to build social networking site how to build site like youtube php site structure
Related Article
ASP. NET core combined with consul cluster &docker to rea...
ASP. NET Core 2.0 leverages Masstransit integrated RABBITMQ
Integration testing of ASP. NET Core Webapi using Xunit
CKEDITOR + CKFINDER image upload configuration (C #/asp.net/php)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More