How to use ASP. NET Website navigation and navigation controls, asp.net website navigation

How to use ASP. NET Website navigation and navigation controls, asp.net website navigation

Website navigation?

In traditional website navigation, we need to create hyperlinks on pages. When modifying or moving pages, we need to modify them one by one on each page, this will be troublesome.
Create a website map on the website, that is, place all the link addresses in a dedicated file for unified management, so that the management is very effective.
How to navigate a website? How?

You need to create a new website map file in VS, and then associate the website map file with the navigation control we want to achieve the navigation effect. We need to change an address, directly on the site map. in the siteMap file.
In vs, how do I add a website map?

Select "Site Map" in the new item in vs to create a site map.
To use the site map, we need to add the site map file to the website root folder.
When creating a site map file, the default code is as follows:

<?xml version="1.0"encoding="utf-8" ?><siteMapxmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >  <siteMapNodeurl="" title="" description="">    <siteMapNodeurl=""title="" description="" />    <siteMapNodeurl=""title="" description="" />  </siteMapNode></siteMap>

We can see from the code that the root element siteMap of the file contains the <siteMapNode> element. These <siteMapNode> elements form a tree structure. The first layer is the homepage of the website.
<SiteMapNode> common attribute tables of elements.

To make the complex navigation clearer, we can use a few more. mapMap files, that is, nested website maps.
Create a folder and create two website map files, Products. siteMap and Servers. sitMap to create a Web. put siteMap under the root directory of the website and use web. the siteMapFile attribute of the site to link the other two. siteMap file. The Code is as follows:
Products. siteMap:

<? Xml version = "1.0" encoding = "UTF-8"?> <SiteMap xmlns = "http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"> <siteMapNode title = "Products" description = "our product" url = "~ /Chap/Products. aspx "> <siteMapNode url = "~ /Chap/Software. aspx "title =" Software "description =" Software provision "/> <siteMapNode url = "~ /Chap/Hardware. aspx "title =" Hardware "description =" Hardware provision "/> </siteMapNode> </siteMap> Services. siteMap file: <? Xml version = "1.0" encoding = "UTF-8"?> <SiteMap xmlns = "http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"> <siteMapNodeurlsiteMapNodeurl = "~ /Chap/Services. aspx "title =" Services "description =" our Services "> <siteMapNode url = "~ /Chap/Training. aspx "title =" Training "description =" Training "/> <siteMapNode url = "~ /Chap/Consulting. aspx "title =" "description =" "/> <siteMapNode url = "~ /Chap/Support. aspx "title =" "description =" "/> </siteMapNode> </siteMap>

Web. siteMap file:

<?xml version="1.0"encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >    <siteMapNodeurlsiteMapNodeurl="home.aspx" title="home" description="home">     <siteMapNode siteMapFile="~/chap/Products.sitemap" />     <siteMapNodesiteMapFilesiteMapNodesiteMapFile="~/chap/Services.sitemap" />    </siteMapNode>  </siteMap> 

After the navigation map is created, the navigation map is displayed.
SiteMapPath control display navigation

Drag the control directly to the page you want to navigate. The widget is automatically bound to the navigation map.
Display:

TreeView control display navigation

The TreeView control is usually used for site navigation in a tree structure and can be used to display XML, table, or relational data.
Basic operations:
Each node of the TreeView is actually an object of the TreeNode class. You can add and modify TreeNode objects dynamically by programming. You can bind the data source control. For example, you can use the SiteMapDataSource air conditioner to feel that you love your data or XmlDataSource control.
The TreeViewcollapseAll () and ExpandAll () Methods collapse and expand nodes. Add the node to the control using the Nodes. Add () method, and delete the specified node using the Nodes. Remove () method.
DEMO:

Here, we only want to familiarize ourselves with the TreeView, and do not implement it. Right-click the TreeView operation, refresh the TreeView control, and bind it with data. Only to familiarize yourself with TreeView.
MyTreeView code:

<% @ PageLanguage = "C #" AutoEventWireup = "true" CodeFile = "Menu. aspx. cs" Inherits = "Menu" %> <! DOCTYPE html PUBLIC "-// W3C // DTDXHTML 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head runat =" server "> <title> 
C # code:

Public partial class chap_myTreeView: System. Web. UI. Page {// remove the current node protectedvoid RemoveNode_Click (object sender, EventArgs e) {// if the current node exists. If (myTreeView. SelectedNode! = Null) {// obtain the parent node of the current node. TreeNode parentNode = myTreeView. SelectedNode. Parent; // remove the current node. If (parentNode! = Null) {parentNode. ChildNodes. Remove (myTreeView. SelectedNode);} else {myTreeView. Nodes. Remove (myTreeView. SelectedNode); }}// Add the current node. Protectedvoid AddNode_Click (object sender, EventArgse) {// if the value of the added current node is null, return. If (txtAdd. Text. Trim (). Length <1) {return;} // create the childNode of the node and set the Value attribute. TreeNode chileNode = new TreeNode (); // assign a value to the newly added node. ChileNode. Value = txtAdd. Text. Trim (); // determines whether a node is selected. If (myTreeView. SelectedNode! = Null) // if the current node exists. {// Add the new childNode object to the current node. MyTreeView. SelectedNode. ChildNodes. Add (chileNode); txtAdd. Text = "" ;}else {// Add to the tree as the root node. MyTreeView. Nodes. Add (chileNode); // clear the text box. TxtAdd. Text = "" ;}/// fold all trees. Protectedvoid FlodNodes_Click (object sender, EventArgs e) {myTreeView. collapseAll (); // fold all trees .} // expand all. protectedvoid OpenAllNode_Click (object sender, EventArgs e) {myTreeView. expandAll (); // expand all trees .}}
Effect:

 
The Menu Control is similar to the TreeView.
The navigation in Word gives us a clear understanding of the main content of the article. I think every programmer who has read thick documents has a deep understanding of the navigation in word. Clear and reasonable navigation effectively guides users to every corner of the website. Baidu Map allows us to find every piece of land with a name. As mentioned in an article, there is always a classic saying in the SEO industry: "The content is king, the outer chain is king, the inner chain is Princess, the keyword is phase, and the code is" yes, the structure is the city, updated as the prince, and Baidu is listening to politics. That navigation is not the link address, it is in the place of Huang Fei ....
I hope this article on ASP. NET Website navigation and navigation controls will be helpful for your learning.