Respect the author. Keep the words www.it55.com.
The site navigation control can make your website clear and easy to operate. This section mainly covers the new feature of Asp.net 2.0: site navigation control.
Site navigation controls include sitemappath controls, Treeview controls, and menu controls. These controls are built on the data source (website map. Website maps are strictly XML files. Therefore, before describing the preceding controls, we must first create a website map.
Website map creation
Right-click the current project and choose> Add new project> select "website map" in the "Add new project" Configuration box, because the default web. the Config name can be implicitly called by the site navigation control, so we will not change the file name here. Click "add"
Modify the content of web. sitemap as follows:
<? XML version = "1.0" encoding = "UTF-8"?>
<Sitemap xmlns = "http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
<Sitemapnode url = "http://www.itgao.com/" Title = "home" Description = "itgao.com home">
<Sitemapnode url = "http://www.itgao.com/web/" Title = "website production" Description = "website production tutorial">
<Sitemapnode url = "http://www.itgao.com/Dreamweaver/" Title = "Dreamweaver" Description = "Dreamweaver tutorial"/>
<Sitemapnode url = "http://www.itgao.com/Flash/" Title = "Flash" Description = "Flash tutorial"/>
<Sitemapnode url = "http://www.itgao.com/standard/" Title = "Web Standard" Description = "Web Standard"/>
</Sitemapnode>
<Sitemapnode url = "http://www.itgao.com/design/" Title = "image processing" Description = "Image Processing tutorial">
<Sitemapnode url = "default. aspx" Title = "Photoshop" Description = "Photoshop tutorial"/>
<Sitemapnode url = "http://www.itgao.com/CorelDRAW/" Title = "CorelDraw" Description = "CorelDraw tutorial"/>
<Sitemapnode url = "http://www.itgao.com/Illustrator/" Title = "Illustrator" Description = "Illustrator tutorial"/>
</Sitemapnode>
<Sitemapnode url = "http://www.itgao.com/program/" Title = "programming" Description = "Programming Tutorial"/>
<Sitemapnode url = "http://www.itgao.com/site/" Title = "" "Description =" "/>
<Sitemapnode url = "http://www.itgao.com/server/" Title = "server" Description = "server tutorial"/>
<Sitemapnode url = "http://www.itgao.com/DataBase/" Title = "Database" Description = "database tutorial"/>
<Sitemapnode url = "http://www.itgao.com/safe/" Title = "Security Protection" Description = "Security Protection tutorial"/>
<Sitemapnode url = "http://www.itgao.com/office/" Title = "office software" Description = "office software tutorial"/>
</Sitemapnode>
</Sitemap>
"Sitemappath" control application:
The "sitemappath" control allows you to easily create a "Current Position" navigation bar on your page.
Creation Method: create a web form and change it to the design interface. Find the "sitemappath" Control in the toolbox and drag it to the web form.
In the design interface of VS 2005, we can quickly set the sitemappath style through "auto format applied:
You can also use "Edit template" to set a custom template for a node or Separator in sitemappath:
In this example, we will not set or explain this to simplify and understand the learning content. Most of the attributes and comments of the sitemappath control are as follows:
# P # paging title # e #Sitemappath calls the web under the root directory of the site by default. sitemap is used as the data source, but note that in the web. the URL attribute of all nodes in sitemap can have only one sitemappath control to call the page path (in this example, default. aspx). Otherwise, the sitemappath control cannot be seen after running.
Final default. aspx content:
<% @ Page Language = "C #" autoeventwireup = "true" codefile = "default. aspx. CS "inherits =" _ default "Culture =" Auto "meta: resourcekey =" pageresource1 "uiculture =" Auto "%>
<! Doctype HTML public "-// W3C // dtd xhtml 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> No title page </title>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div>
<Asp: sitemappath id = "sitemappath1" runat = "server" meta: resourcekey = "sitemappath1resource1" skiplinktext = "">
</ASP: sitemappath>
</Div>
</Form>
</Body>
</Html>
Running effect:
"Treeview" control application:
The "Treeview" control can display the tree structure of website columns on your page and bind multiple data source controls. In this example, Web. sitemap is still used as the data source. To use website maps as data sources, you must integrate the sitemapdatasource control to convert data. In this example, you must call the sitemapdatasource control.
Creation Method: create a web form default2.aspx in the current project and change it to the design interface. Drag and Drop the "sitemapdatasource" Control in the "data" option bar on the left-side toolbar to the page, the name is "sitemapdatasource1". The "sitemapdatasource" control is automatically bound to the web under the root directory of the website by default. sitemap website map file.
Drag and drop the "Treeview" Control in the "navigation" option bar on the left-side toolbar to the page, and select sitemapdatasource1 as its data source.
The Treeview has been created. In addition, we can easily set the format of the Treeview control through "auto format:
You can also use "Edit node" to visually add node items of the Treeview:
You can also add a custom icon for your node through the "Custom row icon:
Finally, if you select the "show row" check box, the Treeview will display the node Structure in a tree line:
Taking into account the simplicity of the tutorial, the above settings are not used in this example.
The content of default2.aspx is as follows:
<% @ Page Language = "C #" autoeventwireup = "true" codefile = "default2.aspx. cs" inherits = "default2" %>
<! Doctype HTML public "-// W3C // dtd xhtml 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> No title page </title>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div>
<Asp: Treeview id = "treeview1" runat = "server" performanceid = "sitemapperformance1" showlines = "true">
</ASP: Treeview>
</Div>
<Asp: sitemapdatasource id = "sitemapdatasource1" runat = "server"/>
</Form>
</Body>
</Html>
Running result:
"Menu" control application:
As the name suggests, the "menu" control is used to generate a website menu based on the data source and bind multiple data source controls. In this example, Web. sitemap is used as the data source. The method for creating the "menu" control is similar to that of the "Treeview" control: # P # paging title # e #
Create the "sitemapdatasource" data source, drag the "menu" Control in the "navigation" to the page, and select sitemapdatasource1 as the Data source:
In the website map file web. sitemap, only the "Homepage" is the root node, so by default, our menu control only displays the "Homepage" menu, which is different from our requirements. We need to display the menus of all secondary nodes, so we must make the following settings for sitemapdatasource1:
Click the "sitemapdatasource1" Data Source Control and set the value of showstartingnode to false in the right attribute:
The menu is displayed vertically by default. To enable horizontal display of the menu, you need to click the menu control and change its orientation attribute value to "horizontal ":
Final code of web form defa3.3.aspx:
<% @ Page Language = "C #" autoeventwireup = "true" codefile = "default2.aspx. cs" inherits = "default2" %>
<! Doctype HTML public "-// W3C // dtd xhtml 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> No title page </title>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div>
<Asp: sitemapdatasource id = "sitemapdatasource1" runat = "server" showstartingnode = "false"/>
<Asp: menu id = "menu1" runat = "server" performanceid = "sitemapperformance1" orientation = "horizontal">
</ASP: menu>
</Div>
</Form>
</Body>
</Html>
Final display effect:
This section mainly describes the usage of the site navigation controls (sitemappath, Treeview, menu). As long as you practice a lot, you can master it.
In the next section, we will learn about the new features of ASP. NET 2.0, other server controls, such as bulletedlist control, hiddenfield control, fileupload control, Imagemap control, multiview and view control, and Wizard control.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
