做类似淘宝网站怎么做的,国外网站打开很慢,android编程,微信小程序赚钱文章目录 前言一、站点地图1、定义站点地图文件2、使用SiteMapPath控件3、SiteMap类4、URL地址映射 二、TreeView控件1、使用TreeView控件2、以编程的方式添加节点3、使用TreeView控件导航4、绑定到XML文件5、按需加载节点6、带复选框的TreeView控件 三、Menu控件1、使用Menu控… 文章目录 前言一、站点地图1、定义站点地图文件2、使用SiteMapPath控件3、SiteMap类4、URL地址映射 二、TreeView控件1、使用TreeView控件2、以编程的方式添加节点3、使用TreeView控件导航4、绑定到XML文件5、按需加载节点6、带复选框的TreeView控件 三、Menu控件1、使用Menu控件2、以编程的方式添加菜单项3、使用Menu控件导航4、一个站点地图示例5、绑定到XML文件6、Menu控件样式7、为Menu控件应用模板 前言
大型的企业级网站可能有成百上千个网页导航变得十分重要。
好的导航系统能够方便用户在多个页面间来回浏览增加了应用程序的可交互性。
ASP.NET提供了内置的导航技术让开发人员创建站点导航变得轻松。
本章内容有
ASP.NET中的站点地图用于导航的高级服务器控件TreeView菜单和导航服务器控件Menu 一、站点地图
用于定义站点结构。
ASP.NET中的站点地图导航技术由以下三个文件组成
站点地图XML文件绑定站点地图XML文件的SiteMapDataSource数据源控件用于显示站点地图的导航控件
1、定义站点地图文件
站点地图是一个名为Web.sitemap的XML文件。
ASP.NET站点地图的基本原理 ASP.NET内置了一个成为站点地图提供者的提供者类名为XmlSiteMapProvider该提供者能够从XML中获取信息。XmlSiteMapProvider将查找位于应用程序 根目录中的Web.sitemap文件然后提取该文件中的站点地图数据并创建相应的SiteMap对象SiteMapDataSource将使用这些SiteMap对象向导航控件提供导航信息。
Web.site必须位于应用程序目录下并且不能更改为其他名称。
这里要建的导航结构为
接下来我们详细记录建立站点导航的过程VS2019 1新建web项目 2新建要调用的产品、服务web窗体页面
这里需要注意的是现在项目上右键添加两个文件夹分别命名为Products、Services然后分别在两个文件夹鼠标右键建立Web窗体页面。 3新建一个首页Web窗体页面命名为Default.aspx (4)项目右键添加-站点地图不要改名字Web.sitemap这个名称是固定的 5接下来是各个页面中的代码 Default.aspx页面 % Page LanguageC# AutoEventWireuptrue CodeBehindDefault.aspx.cs InheritsSiteMap3.Default %!DOCTYPE htmlhtml xmlnshttp://www.w3.org/1999/xhtml
head runatserver
meta http-equivContent-Type contenttext/html; charsetutf-8/title首页/title
/head
bodyform idform1 runatserverdiv我是首页/div/formasp:SiteMapPath IDSiteMap runatserver/asp:SiteMapPath
/body
/html HardwareProduct.aspx页面 % Page LanguageC# AutoEventWireuptrue CodeBehindHardwareProduct.aspx.cs InheritsSiteMap3.Products.HardwareProduct %!DOCTYPE htmlhtml xmlnshttp://www.w3.org/1999/xhtml
head runatserver
meta http-equivContent-Type contenttext/html; charsetutf-8/title硬件产品/title
/head
bodyform idform1 runatserverdiv主机、显示器、网络终端、收银机和ATM等设备在现代生活中扮演着重要角色。主机是计算机的核心部件包含CPU、内存等负责数据处理。显示器则是将电子信号转换为可视图像的输出设备提供清晰的视觉体验。网络终端通过网络获取资源简化多用户环境下的设备管理。收银机广泛应用于商业领域实现高效准确的交易处理。ATM作为银行自助服务终端提供24小时便捷的金融服务。这些设备共同促进了信息化、自动化的发展提升了工作效率与生活质量。/div/formasp:SiteMapPath IDSiteMap runatserver/asp:SiteMapPath
/body
/htmlSoftwareProduct.aspx页面 % Page LanguageC# AutoEventWireuptrue CodeBehindSoftwareProduct.aspx.cs InheritsSiteMap3.Products.SoftwareProduct %!DOCTYPE htmlhtml xmlnshttp://www.w3.org/1999/xhtml
head runatserver
meta http-equivContent-Type contenttext/html; charsetutf-8/title软件产品/title
/head
bodyform idform1 runatserverdivERP企业资源规划、CRM客户关系管理、Web系统以及Windows系统等是现代企业运营与管理的基石。ERP系统整合了企业内部的各项资源优化了业务流程提升了管理效率CRM系统则专注于客户关系的维护与管理帮助企业深入理解客户需求增强客户满意度与忠诚度。Web系统作为互联网时代的产物为企业搭建了线上服务平台实现了信息的快速传递与交互。而Windows系统作为广泛应用的操作系统为上述各类软件提供了稳定、易用的运行环境支持着企业日常工作的顺利进行。这些系统相互协作共同推动了企业的数字化转型与智能化升级。/divasp:SiteMapPath IDSiteMap runatserver/asp:SiteMapPath/form/body
/html ServiceCenter.aspx页面 % Page LanguageC# AutoEventWireuptrue CodeBehindServiceCenter.aspx.cs InheritsSiteMap3.Services.ServiceCenter %!DOCTYPE htmlhtml xmlnshttp://www.w3.org/1999/xhtml
head runatserver
meta http-equivContent-Type contenttext/html; charsetutf-8/title服务中心/title
/head
bodyform idform1 runatserverdiv当您需要享受专业的服务与支持时欢迎您直接步入本公司服务中心。我们的服务中心以客户为中心致力于为每一位访客提供高效、便捷的登记服务体验。一踏入中心您将被温馨的环境和专业的团队所包围。只需简短的登记流程即可迅速连接至所需的服务资源。无论是咨询解答、技术支持还是产品维护我们都将全力以赴确保您的需求得到及时响应与满足。在这里每一次服务都是我们对品质的承诺每一份满意都是您对我们工作的肯定。选择本公司服务中心让优质服务触手可及。/div/formasp:SiteMapPath IDSiteMap runatserver/asp:SiteMapPath
/body
/html ServiceNote.aspx页面 % Page LanguageC# AutoEventWireuptrue CodeBehindServiceNote.aspx.cs InheritsSiteMap3.Services.ServiceNote %!DOCTYPE htmlhtml xmlnshttp://www.w3.org/1999/xhtml
head runatserver
meta http-equivContent-Type contenttext/html; charsetutf-8/title服务须知/title
/head
bodyform idform1 runatserverdiv在开始登记服务之前我们诚挚地邀请您花几分钟时间仔细阅读这里的条款与条件。这些条款不仅是我们服务提供的基础框架也是保障您权益与明确双方责任的重要依据。通过认真阅读您将了解到服务的具体内容、范围、限制以及可能涉及的费用情况。同时条款中也明确了隐私保护政策确保您的个人信息在处理过程中得到妥善保护。我们理解这些条款可能涉及较多细节但请您放心我们的目标是确保每一次服务都建立在透明、公正、相互尊重的基础上。因此在开始登记前请您务必仔细阅读并理解这些条款以便更好地享受我们提供的服务。/div/formasp:SiteMapPath IDSiteMap runatserver/asp:SiteMapPath
/body
/html Web.sitemap站点地图页面 ?xml version1.0 encodingutf-8 ?
siteMap xmlnshttp://schemas.microsoft.com/AspNet/SiteMap-File-1.0 siteMapNode url~/Default.aspx title首页 description网站首页!-- 这是产品分类节点 --siteMapNode title产品分类 description企业经营的产品siteMapNode url~/Products/HardwareProduct.aspx title硬件产品 description包括主机、显示器、网络终端、收银机、ATM等设备/siteMapNode url~/Products/SoftwareProduct.aspx title软件产品 description包括ERP、CRM、Web系统、Windows系统等//siteMapNodesiteMapNode title售后服务 description软硬件的售后服务siteMapNode url~/Services/ServiceCenter.aspx title服务中心 description直接进入本公司服务中心登记服务/siteMapNode url~/Services/ServiceNote.aspx title服务须知 description在开始登记前先阅读这里的条款//siteMapNode/siteMapNode
/siteMap
运行结果 2、使用SiteMapPath控件
SiteMapPath控件已经在上面的案例中使用是在站点地图结构、结构中对应的页面做好以后分别在各个页面的窗体中加入SiteMapPath控件。
asp:SiteMapPath IDSiteMap runatserver/asp:SiteMapPath一个页面中的添加如下
% Page LanguageC# AutoEventWireuptrue CodeBehindDefault.aspx.cs InheritsSiteMap3.Default %!DOCTYPE htmlhtml xmlnshttp://www.w3.org/1999/xhtml
head runatserver
meta http-equivContent-Type contenttext/html; charsetutf-8/title首页/title
/head
bodyform idform1 runatserverdiv我是首页/div/formasp:SiteMapPath IDSiteMap runatserver/asp:SiteMapPath
/body
/html
接下来介绍一些SiteMapPath控件的属性
属性名称属性描述ParentLevelsDisplay允许显示的父节点的数量默认情况下SiteMapPath控件显示所有的父节点PathDirection允许反转SiteMapPath控件显示的链接的顺序可选值有RootToCurrent这是默认值表示从根父级显示到当前级。CurrentToRoot表示从当前页面显示到根级PathSeparator指定用于分隔节点的字符串默认的是“”可以指定任意的字符RenderCurrentNodeAsLink是否允许将SiteMapPath描述的当前节点呈现为链接ShowToolTips是否允许显示工具提示SiteMapProvider允许SiteMapPath控件指定其他的站点地图提供者
SiteMapPath提供了很多的样式控制选项允许对其外观进行精细的控制。除此以外还可以对SiteMapPath控件应用模板来自定义外观以下列出所有的样式及模板。
样式模板说明NodeStyleNodeTemplate所有除了根节点和当前节点的节点样式CurrentNodeStyleCurrentNodeTemplate当前节点的样式RootNodeStyleRootNodeTemplate根节点的样式PathSeparatorStylePathSeparatorTemplate节点之间分隔符的样式
3、SiteMap类
使用SiteMapPath控件开发人员不需要编写代码就可以在页面中添加站点导航也可以对站点地图进行编程操作。ASP.NET公开了一个反应站点地图结构的静态 的SiteMapPath对象该对象公开SiteMapNode对象的集合用于表示站点中每个节点。
SiteMap对象中所有成员都是静态的因此无需实例化SiteMap对象。SiteMap自身只具有两个与导航相关的属性
CurrentNode属性用于获取当前的节点返回SiteMapNode对象。RootNode属性用于获取根节点返回SiteMapNode对象。
而SiteMap对象的成员SiteMapNode对象具有多个与导航相关的属性
属性属性说明ParentNode返回当前节点的上一级节点包含当前节点。如果是根节点这个属性返回一个null引用ChildNode返回所有当前节点的子节点集合。可以通过检查HasChildNodes属性来判断当前节点是否有子节点PreviousSibling返回相同等级的上一个节点如果不存在则返回nullNextSibling返回相同等级的下一个节点如果不存在则返回null
在首页中加入一个label控件用来显示通过SiteMap对象获取的节点信息需要注意之前加的那个SiteMapPath控件的名称不能是SiteMap不然就会和SiteMap类对象产生二义性获取不到属性
代码中加入遍历站点地图结构的节点信息代码 % Page LanguageC# AutoEventWireuptrue CodeBehindDefault.aspx.cs InheritsSiteMap3.Default %!DOCTYPE htmlhtml xmlnshttp://www.w3.org/1999/xhtml
head runatserver
meta http-equivContent-Type contenttext/html; charsetutf-8/title首页/title
/head
bodyform idform1 runatserverdiv我是首页/divasp:SiteMapPath IDSiteMapPath runatserver/asp:SiteMapPathasp:Label IDlbTree runatserver TextLabel/asp:Label/form/body
/html
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;namespace SiteMap3
{public partial class Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){// 获取所有的站点地图节点信息lbTree.Text 当前节点信息br/;lbTree.Text SiteMap.CurrentNode.Title br/;lbTree.Text SiteMap.CurrentNode.Description br/;if (SiteMap.CurrentNode.NextSibling ! null){lbTree.Text 同级节点的下一个节点信息 br/;lbTree.Text SiteMap.CurrentNode.NextSibling.Title br/;lbTree.Text SiteMap.CurrentNode.NextSibling.Description br/;}}}
}运行结果运行结果是在软件产品页面中加入了遍历的结果 4、URL地址映射
URL地址映射就是在浏览器中给实际不想显示的URL地址穿上一个马甲因此从实际URL映射到另一个对外显示的URL地址。
ASP.NET可以在web.config配置文件中使用块来配置URL地址映射。
下面是一个简单的URL地址映射的示例代码
?xml version1.0 encodingutf-8?
!--有关如何配置 ASP.NET 应用程序的详细信息请访问https://go.microsoft.com/fwlink/?LinkId169433
--
configurationsystem.webcompilation debugtrue targetFramework4.5.1 /httpRuntime targetFramework4.5.1 /urlMappings enabledtrueadd url~/Products/HardwareProduct.aspx mappedUrl~/Products/Default.aspx?hardwareproductdefault/add url~/Services/ServiceCenter.aspxmappedUrl~/Services/Default.aspx?servicecenterdefault//urlMappings/system.websystem.codedomcompilerscompiler languagec#;cs;csharp extension.cs typeMicrosoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version2.0.1.0, Cultureneutral, PublicKeyToken31bf3856ad364e35 warningLevel4 compilerOptions/langversion:6 /nowarn:1659;1699;1701 /compiler languagevb;vbs;visualbasic;vbscript extension.vb typeMicrosoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version2.0.1.0, Cultureneutral, PublicKeyToken31bf3856ad364e35 warningLevel4 compilerOptions/langversion:14 /nowarn:41008 /define:_MYTYPE\quot;Web\quot; /optionInfer //compilers/system.codedom
/configuration但是ASP.NET中的地址映射有很大的不足就是只能硬编码地址导致配置文件太大。网上已经有解决方法。
二、TreeView控件
TreeView就是不论是操作系统还是应用程序的分支点目录。
TreeView支持以下功能
数据绑定允许控件的节点绑定到XML、表格或关系数据。站点导航通过与SiteMapDataSource控件集成实现。节点文本既可以显示为纯文本也可以显示为超链接。借助编程方式访问TreeView对象模型以动态地创建树、填充节点、设置属性等。客户端节点填充在支持的浏览器上。在每个节点旁显示复选框的功能。通过主题、用户定义的图像和格式可以实现自定义外观。
本节将讨论使用TreeView控件开发ASP.NET应用程序的导航功能。
新建网站添加一个TreeView控件。
1、使用TreeView控件
在设计模式下拖一个TreeView控件弹出设置框自动套用格式下很多可以选择的树状图形式。
选择数据源后面会讲定义数据源以及绑定数据源 如果已经添加了节点可以编辑节点 自定义行图标样式 选择显示行或者不显示行就是连线 经过初始化的设置回到标记模式中看到已经增添了一些属性
% Page LanguageC# AutoEventWireuptrue CodeBehindDefault.aspx.cs InheritsTreeView.Default %!DOCTYPE htmlhtml xmlnshttp://www.w3.org/1999/xhtml
head runatserver
meta http-equivContent-Type contenttext/html; charsetutf-8/title/title
/head
bodyform idform1 runatserverdiv/divasp:TreeView IDTreeView1 runatserver ImageSetArrowsHoverNodeStyle Font-UnderlineTrue ForeColor#5555DD /NodeStyle Font-NamesTahoma Font-Size10pt ForeColorBlack HorizontalPadding5px NodeSpacing0px VerticalPadding0px /ParentNodeStyle Font-BoldFalse /SelectedNodeStyle Font-UnderlineTrue ForeColor#5555DD HorizontalPadding0px VerticalPadding0px //asp:TreeView/form
/body
/html我们来手动输入一些属性建立一些节点
% Page LanguageC# AutoEventWireuptrue CodeBehindDefault.aspx.cs InheritsTreeView.Default %!DOCTYPE htmlhtml xmlnshttp://www.w3.org/1999/xhtml
head runatservermeta http-equivContent-Type contenttext/html; charsetutf-8 /title/title
/head
bodyform idform1 runatserverdiv/divasp:TreeView IDTreeView1 runatserver ImageSetArrowsParentNodeStyle Font-BoldFalse /HoverNodeStyle Font-UnderlineTrue ForeColor#5555DD /SelectedNodeStyle Font-UnderlineTrue ForeColor#5555DD HorizontalPadding0px VerticalPadding0px /Nodesasp:TreeNode Text软件开发系列图书 Value软件开发系列图书asp:TreeNode Text.NET版 Value.NET版asp:TreeNode TextC# 2008程序设计 Value 2008程序设计/asp:TreeNodeasp:TreeNode TextASP.NET 4.0从入门到精通 ValueASP.NET 4.0从入门到精通/asp:TreeNodeasp:TreeNode TextSliverLight 2.0开发人员指南 ValueSliverLight 2.0开发人员指南/asp:TreeNodeasp:TreeNode TextWCF程序设计 ValueWCF程序设计/asp:TreeNodeasp:TreeNode TextWF本质论 ValueWF本质论/asp:TreeNode/asp:TreeNode/asp:TreeNode/NodesNodeStyle Font-NamesTahoma Font-Size10pt ForeColorBlack HorizontalPadding5px NodeSpacing0px VerticalPadding0px //asp:TreeView/form
/body
/html
运行结果
TreeView的属性
属性属性说明Tetx显示在节点中的文本ToolTip当鼠标悬停在节点上面时显示的提示信息Value保存节点的值节点的值是一种不可见的附件数据用于保存节点的附加信息NavigateUrl当单击节点时节点所链接的URL路径Target如果NavigateUrl被设置用这个属性设置打开的目标窗口ImageUrl显示在节点前面的图像URLImageToolTip显示在节点前面的图片的提示信息
2、以编程的方式添加节点
编程方式给TreeView添加节点
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;namespace TreeView
{public partial class Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){// 以编程的方式给TreeView对象添加节点// 新建一个TreeNode对象TreeNode rootNode new TreeNode(软件开发系列图书);// 将rootNode对象添加到TreeView对象的Nodes节点这是必须的否则TreeView将不会呈现节点TreeView1.Nodes.Add(rootNode);// 继续添加子节点TreeNode childNode new TreeNode(.NET版);childNode.ChildNodes.Add(new TreeNode(C# 2008程序设计));childNode.ChildNodes.Add(new TreeNode(ASP.NET从入门到精通));childNode.ChildNodes.Add(new TreeNode(SilverLight2.0开发人员指南));childNode.ChildNodes.Add(new TreeNode(WCF程序设计));rootNode.ChildNodes.Add(childNode);}}
}运行结果
3、使用TreeView控件导航
首先给项目中加入之前写的这个Web.sitemap站点导航文件。 再加入一个TreeView控件 窗体页面设计代码
% Page LanguageC# AutoEventWireuptrue CodeBehindDefault.aspx.cs InheritsTreeView.Default %!DOCTYPE htmlhtml xmlnshttp://www.w3.org/1999/xhtml
head runatservermeta http-equivContent-Type contenttext/html; charsetutf-8 /title/title
/head
bodyform idform1 runatserverdiv/divasp:TreeView IDTreeView1 runatserver ImageSetArrowsParentNodeStyle Font-BoldFalse /HoverNodeStyle Font-UnderlineTrue ForeColor#5555DD /SelectedNodeStyle Font-UnderlineTrue ForeColor#5555DD HorizontalPadding0px VerticalPadding0px /%-- Nodesasp:TreeNode Text软件开发系列图书 Value软件开发系列图书asp:TreeNode Text.NET版 Value.NET版asp:TreeNode TextC# 2008程序设计 Value 2008程序设计/asp:TreeNodeasp:TreeNode TextASP.NET 4.0从入门到精通 ValueASP.NET 4.0从入门到精通/asp:TreeNodeasp:TreeNode TextSliverLight 2.0开发人员指南 ValueSliverLight 2.0开发人员指南/asp:TreeNodeasp:TreeNode TextWCF程序设计 ValueWCF程序设计/asp:TreeNodeasp:TreeNode TextWF本质论 ValueWF本质论/asp:TreeNode/asp:TreeNode/asp:TreeNode/Nodes--%NodeStyle Font-NamesTahoma Font-Size10pt ForeColorBlack HorizontalPadding5px NodeSpacing0px VerticalPadding0px //asp:TreeViewasp:TreeView IDTreeView2 runatserver ImageSetContacts NodeIndent10HoverNodeStyle Font-UnderlineFalse /NodeStyle Font-NamesVerdana Font-Size8pt ForeColorBlack HorizontalPadding5px NodeSpacing0px VerticalPadding0px /ParentNodeStyle Font-BoldTrue ForeColor#5555DD /SelectedNodeStyle Font-UnderlineTrue HorizontalPadding0px VerticalPadding0px //asp:TreeViewasp:TreeView IDTreeView3 runatserver DataSourceIDSiteMapDataSource1/asp:TreeViewasp:SiteMapDataSource IDSiteMapDataSource1 runatserver //form
/body
/html
后台代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;namespace TreeView
{public partial class Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){// 以编程的方式给TreeView对象添加节点//第一种直接编程添加TreeView节点// 新建一个TreeNode对象TreeNode rootNode new TreeNode(软件开发系列图书);// 将rootNode对象添加到TreeView对象的Nodes节点这是必须的否则TreeView将不会呈现节点TreeView1.Nodes.Add(rootNode);// 继续添加子节点TreeNode childNode new TreeNode(.NET版);childNode.ChildNodes.Add(new TreeNode(C# 2008程序设计));childNode.ChildNodes.Add(new TreeNode(ASP.NET从入门到精通));childNode.ChildNodes.Add(new TreeNode(SilverLight2.0开发人员指南));childNode.ChildNodes.Add(new TreeNode(WCF程序设计));rootNode.ChildNodes.Add(childNode);//第二种通过编程绑定站点地图信息添加TreeView节点// 以下是TreeView2的使用导航功能的代码// 初始化根节点TreeNode node new TreeNode(首页);// 调用地柜方法遍历添加节点LoadSiteMap(SiteMap.RootNode, node);TreeView2.Nodes.Add(node);//第三种通过编程绑定SiteMapDataSource控件添加TreeView节点// 设计界面上增加了一个TreeView3并新增一个SiteMapDataSource1然后将二者通过数据源选项绑定}protected void LoadSiteMap(SiteMapNode node, TreeNode tvNode){// 获取根节点的子节点int count node.ChildNodes.Count;// 这里循环遍历节点for (int i 0; i count; i){// 获取根节点的子节点SiteMapNode smNode node.ChildNodes[i];// 从子节点获取导航信息TreeNode tempNode new TreeNode(smNode.Title, , , smNode.Url, );tvNode.ChildNodes.Add(tempNode);if (smNode.HasChildNodes){// 如果当前节点还有子节点则调用递归过程进行遍历LoadSiteMap(smNode, tempNode);}}}}
}运行结果 4、绑定到XML文件
TreeView具有显示层次结构数据的优势而开发人员通常使用XML文件来保存层次结构的数据TreeView控件通过与XmlDataSource控件的结合使绑定XML文件变得非常简单。 XML文件代码
?xml version1.0 encodingutf-8 ?
Books Title图书展示区Category idsoftware text软件编程类book idbook1 textASP.NET程序设计/book idbook2 textC# 2008 网络技术详解//CategoryCategory idhardware text硬件编程类book idbook3 textMySQL数据库设计 /book idbook4 textLinux设备驱动程序开发//Category
/Books
TreeView4与XmlDataSource控件代码
asp:TreeView IDTreeView4 runatserver ImageSetXPFileExplorer NodeIndent15 DataSourceIDXmlDataSource1HoverNodeStyle Font-UnderlineTrue ForeColor#6666AA /NodeStyle Font-NamesTahoma Font-Size8pt ForeColorBlack HorizontalPadding2px NodeSpacing0px VerticalPadding2px /SelectedNodeStyle BackColor#B5B5B5 Font-UnderlineFalse HorizontalPadding0px VerticalPadding0px /ParentNodeStyle Font-BoldFalse //asp:TreeViewasp:XmlDataSource IDXmlDataSource1 runatserver DataFile~/Book.xml OnTransformingXmlDataSource1_Transforming/asp:XmlDataSource
这样给TreeView绑定数据源看起来挺简单的不过不能直接绑定到SqlDataSource或者ObjectDataSource控件。
5、按需加载节点
如果要加在到TreeView控件中的数据量非常大一次性加载将显著增加服务器端的负载和客户端内存的占比量并且会造成请求的延迟。TreeView 控件提供了按需加载的特性来解决这个问题。在首次加载时TreeView只显示顶级节点的少量数据当用户单击TreeView中的展开节点图标时将再次从服务器端加载所需要的的数据。
% Page LanguageC# AutoEventWireuptrue CodeBehindDefault.aspx.cs InheritsPopulateOnDemand.Default %!DOCTYPE htmlhtml xmlnshttp://www.w3.org/1999/xhtml
head runatserver
meta http-equivContent-Type contenttext/html; charsetutf-8/title/title
/head
bodyform idform1 runatserverdiv/divasp:TreeView IDTreeView1 runatserver OnTreeNodePopulateTreeView1_TreeNodePopulateNodesasp:TreeNode PopulateOnDemandtrue Text按需加载顶层节点 Value按需加载顶层节点/asp:TreeNode/Nodes/asp:TreeView/form
/body
/html
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;namespace PopulateOnDemand
{public partial class Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}protected void TreeView1_TreeNodePopulate(object sender, TreeNodeEventArgs e){for (int i 0; i 3; i){TreeNode newNode new TreeNode();newNode.Text 动态加载的节点 i.ToString();// 这里将新建的节点的PopulateOnDemand属性也设置为True将会形成一个无限递归newNode.PopulateOnDemand true;// TreeNodeEventArgs中的Node属性表示当前的节点e.Node.ChildNodes.Add(newNode);}}}
}6、带复选框的TreeView控件
将绑定节点的ShowCheckBoxes属性设置为true进行节点的复选设置。距离例子在实际应用中再查询吧。
三、Menu控件
ASP.NET提供了另一个重量级的导航控件Meun。使用该控件开发人员可以在网页上模拟Windows的菜单导航效果。ASP.NET的Menu有两种模式
静态模式每个菜单项是完全分开的用户可以点击菜单中的任何菜单项。动态模式默认值显示部分菜单内容当用户移动鼠标到静态内容页上时弹出子菜单项。
1、使用Menu控件
新建Menu项目并拖入Menu控件初始化设置 在设计模式下手动写入静态的菜单项
% Page LanguageC# AutoEventWireuptrue CodeBehindDefault.aspx.cs InheritsMenu.Default %!DOCTYPE htmlhtml xmlnshttp://www.w3.org/1999/xhtml
head runatserver
meta http-equivContent-Type contenttext/html; charsetutf-8/title/title
/head
bodyform idform1 runatserverdiv/divasp:Menu IDMenu1 runatserver BackColor#FFFBD6 DynamicHorizontalOffset2 Font-NamesVerdana Font-Size0.8em ForeColor#990000 StaticSubMenuIndent10pxDynamicHoverStyle BackColor#990000 ForeColorWhite /DynamicMenuItemStyle HorizontalPadding5px VerticalPadding2px /DynamicMenuStyle BackColor#FFFBD6 /DynamicSelectedStyle BackColor#FFCC66 /StaticHoverStyle BackColor#990000 ForeColorWhite /StaticMenuItemStyle HorizontalPadding5px VerticalPadding2px /StaticSelectedStyle BackColor#FFCC66 /Itemsasp:MenuItem Text首页 Value首页/asp:MenuItemasp:MenuItem Text公司介绍 Value公司介绍asp:MenuItem Text公司信息 Value公司信息/asp:MenuItemasp:MenuItem Text公司规模 Value公司规模/asp:MenuItemasp:MenuItem Text公司人员 Value公司人员/asp:MenuItem/asp:MenuItemasp:MenuItem Text产品信息 Value产品信息asp:MenuItem Text硬件产品 Value硬件产品/asp:MenuItemasp:MenuItem Text软件产品 Value软件产品/asp:MenuItemasp:MenuItem Text专利产品 Value专利产品/asp:MenuItem/asp:MenuItemasp:MenuItem Text服务中心 Value服务中心asp:MenuItem Text服务事项 Value服务事项/asp:MenuItemasp:MenuItem Text服务申报 Value服务申报/asp:MenuItemasp:MenuItem Text服务建议 Value服务建议/asp:MenuItem/asp:MenuItemasp:MenuItem Text关于 Value关于/asp:MenuItem/Items/asp:Menu/form
/body
/html
运行结果 Menu两个重要属性控制菜单是静态显示还是动态显示
属性说明StaticDisplayLevels控制静态显示的菜单层次该属性默认值为1表示只显示asp:MenuItem中第一层嵌套的节点MaxiumDynamicDisplayLevels控制动态显示的节点层次数。默认值是3表示可以动态地弹出3个层次的菜单。如果设置值为0则不动态显示任何菜单项。
通常这两个属性可以搭配使用以获得菜单的静态和动态的显示效果。
每个MenuItem有多个属性。如下
属性说明Text显示在每个菜单项上的文本ToolTip当鼠标悬停在菜单上时显示的信息Value存储一个附加的菜单项的数据NavigateUrl当单击菜单项时自动跳转到的Url地址。也可以处理Menu.MenuItemClick事件执行相应的行为Target当NavigateUrl属性设置后Target属性用于设置目标Url打开的框架或窗体Selectable指定菜单项是否可以被用户选择ImageUrl在菜单项的文本左线显示的图片UrlPopOutImageUrl如果包含子菜单则在菜单项文本的右侧显示的头像SeparatorUrl菜单项分隔项的图片Url
2、以编程的方式添加菜单项
Menu控件提供了Items集合的属性这是一个MenuItemCollection集合类型的属性可以向该属性添加菜单项来实现动态添加菜单项的效果。
我们将原来静态添加的菜单项先注释然后再页面的Page_Load中动态添加
窗体代码
% Page LanguageC# AutoEventWireuptrue CodeBehindDefault.aspx.cs InheritsMenu.Default %!DOCTYPE htmlhtml xmlnshttp://www.w3.org/1999/xhtml
head runatserver
meta http-equivContent-Type contenttext/html; charsetutf-8/title/title
/head
bodyform idform1 runatserverdiv/divasp:Menu IDMenu1 runatserver BackColor#FFFBD6 DynamicHorizontalOffset2 Font-NamesVerdana Font-Size0.8em ForeColor#990000 StaticSubMenuIndent10pxDynamicHoverStyle BackColor#990000 ForeColorWhite /DynamicMenuItemStyle HorizontalPadding5px VerticalPadding2px /DynamicMenuStyle BackColor#FFFBD6 /DynamicSelectedStyle BackColor#FFCC66 /StaticHoverStyle BackColor#990000 ForeColorWhite /StaticMenuItemStyle HorizontalPadding5px VerticalPadding2px /StaticSelectedStyle BackColor#FFCC66 /%-- Itemsasp:MenuItem Text首页 Value首页/asp:MenuItemasp:MenuItem Text公司介绍 Value公司介绍asp:MenuItem Text公司信息 Value公司信息/asp:MenuItemasp:MenuItem Text公司规模 Value公司规模/asp:MenuItemasp:MenuItem Text公司人员 Value公司人员/asp:MenuItem/asp:MenuItemasp:MenuItem Text产品信息 Value产品信息asp:MenuItem Text硬件产品 Value硬件产品/asp:MenuItemasp:MenuItem Text软件产品 Value软件产品/asp:MenuItemasp:MenuItem Text专利产品 Value专利产品/asp:MenuItem/asp:MenuItemasp:MenuItem Text服务中心 Value服务中心asp:MenuItem Text服务事项 Value服务事项/asp:MenuItemasp:MenuItem Text服务申报 Value服务申报/asp:MenuItemasp:MenuItem Text服务建议 Value服务建议/asp:MenuItem/asp:MenuItemasp:MenuItem Text关于 Value关于/asp:MenuItem/Items--%/asp:Menu/form
/body
/html
后台代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;namespace Menu
{public partial class Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){MenuItem mi new MenuItem();mi.Text 首页;mi.ToolTip 显示网站的首页;Menu1.Items.Add(mi);MenuItem companymi new MenuItem(公司信息);companymi.ChildItems.Add(new MenuItem(公司信息));companymi.ChildItems.Add(new MenuItem(公司规模));companymi.ChildItems.Add(new MenuItem(公司人员));Menu1.Items.Add(companymi);MenuItem productmi new MenuItem(产品信息);productmi.ChildItems.Add(new MenuItem(硬件产品));productmi.ChildItems.Add(new MenuItem(软件产品));productmi.ChildItems.Add(new MenuItem(专利产品));Menu1.Items.Add(productmi);MenuItem servicemi new MenuItem(服务信息);servicemi.ChildItems.Add(new MenuItem(服务事项));servicemi.ChildItems.Add(new MenuItem(服务申请));servicemi.ChildItems.Add(new MenuItem(服务建议));Menu1.Items.Add(servicemi);MenuItem aboutmi new MenuItem(关于);Menu1.Items.Add(aboutmi);}}
}运行结果 3、使用Menu控件导航
Menu控件作为一种导航控件同样可以轻松绑定到SiteMapDataSource控件来实现站点导航。
新建项目MenuNavigate Web.site站点地图文件代码
?xml version1.0 encodingutf-8 ?
siteMap xmlnshttp://schemas.microsoft.com/AspNet/SiteMap-File-1.0 siteMapNode url~/Default.aspx title首页 description网站首页!-- 这是产品分类节点 --siteMapNode title产品分类 description企业经营的产品siteMapNode url~/Products/HardwareProduct.aspx title硬件产品 description包括主机、显示器、网络终端、收银机、ATM等设备/siteMapNode url~/Products/SoftwareProduct.aspx title软件产品 description包括ERP、CRM、Web系统、Windows系统等//siteMapNodesiteMapNode title售后服务 description软硬件的售后服务siteMapNode url~/Services/ServiceCenter.aspx title服务中心 description直接进入本公司服务中心登记服务/siteMapNode url~/Services/ServiceNote.aspx title服务须知 description在开始登记前先阅读这里的条款//siteMapNode/siteMapNode
/siteMap
运行结果 4、一个站点地图示例 站点地图Web.sitemap中定义的站点导航代码
?xml version1.0 encodingutf-8 ?
siteMap xmlnshttp://schemas.microsoft.com/AspNet/SiteMap-File-1.0 siteMapNode url title首页 descriptionsiteMapNode title产品siteMapNode urlDefault.aspx?nodehardware title硬件siteMapNode title硬件/siteMapNode title键盘/siteMapNode title网卡/siteMapNode title显示器/siteMapNode title整机//siteMapNodesiteMapNode urlDefault.aspx?nodesoftware title软件siteMapNode title电子表格/siteMapNode title文档处理器/siteMapNode title电子邮件/siteMapNode title图像处理/siteMapNode title游戏软件//siteMapNodesiteMapNode urlDefault.aspx?nodebooks title书籍siteMapNode title编程/siteMapNode title调试/siteMapNode title测试/siteMapNode titleWeb应用程序/siteMapNode titleWinForm应用程序//siteMapNode/siteMapNodesiteMapNode title服务siteMapNode urlDefault.aspx?nodeconsulting title咨询siteMapNode title流程/siteMapNode title管理/siteMapNode title招聘//siteMapNodesiteMapNode urlDefault.aspx?nodedevelopment title开发siteMapNode titleWeb应用程序/siteMapNode title企业级应用程序/siteMapNode title数据库应用程序//siteMapNode/siteMapNodesiteMapNode title支持siteMapNode urlDefault.aspx?nodedrivers title驱动siteMapNode title声卡/siteMapNode title网络/siteMapNode title打印机/siteMapNode titleMedom//siteMapNodesiteMapNode urlDefault.aspx?nodemanuals title手册siteMapNode title应用程序/siteMapNode title故障诊断/siteMapNode title安装/siteMapNode titleInternet//siteMapNodesiteMapNode urlDefault.aspx?nodeupdates title更新siteMapNode title发行版/siteMapNode title游戏包//siteMapNode/siteMapNode/siteMapNode
/siteMap 5、绑定到XML文件 这里绑定的项还要绑定一下 XML文件代码
?xml version1.0 encodingutf-8 ?
Books Title软硬件书籍区Category idcategory1 title软件书籍区book idbook1 titleASP.NET程序设计/bookbook idbook2 titleC#程序设计/bookbook idbook3 titleDELPHI2009程序设计/bookbook idbook4 titleC程序设计/bookbook idbook5 titleJava程序设计/book/CategoryCategory idcategory2 title硬件书籍区book idbook1 titlePC升级与维护大全/bookbook idbook2 titleTCP/IP路由技术/bookbook idbook3 title思科教程/bookbook idbook4 title汇编语言程序设计/bookbook idbook5 title单片机程序设计/book/Category
/Books
窗体设计代码
% Page LanguageC# AutoEventWireuptrue CodeBehindDefault.aspx.cs InheritsBingdingToXml.Default %!DOCTYPE htmlhtml xmlnshttp://www.w3.org/1999/xhtml
head runatserver
meta http-equivContent-Type contenttext/html; charsetutf-8/title/title
/head
bodyform idform1 runatserverdiv/divasp:Menu IDMenu1 runatserver BackColor#E3EAEB DataSourceIDXmlDataSource1 DynamicHorizontalOffset2 Font-NamesVerdana Font-Size0.8em ForeColor#666666 OrientationHorizontal StaticSubMenuIndent10pxDynamicHoverStyle BackColor#666666 ForeColorWhite /DynamicMenuItemStyle HorizontalPadding5px VerticalPadding2px /DynamicMenuStyle BackColor#E3EAEB /DynamicSelectedStyle BackColor#1C5E55 /StaticHoverStyle BackColor#666666 ForeColorWhite /StaticMenuItemStyle HorizontalPadding5px VerticalPadding2px /StaticSelectedStyle BackColor#1C5E55 //asp:Menuasp:XmlDataSource IDXmlDataSource1 runatserver DataFile~/Books.xml/asp:XmlDataSource/form
/body
/html
运行结果 6、Menu控件样式
Menu控件与TreeView控件类似提供了大量的外观控制项。
以下是Menu控件的样式
静态模式样式动态模式样式样式说明StaticMenuStyleDynamicMenuStyle设置Menu控件的整个外观样式StaticMenuItemStyleDynamicMenuItemStyle设置单个菜单项的样式StaticSelectedStyleDynamicSelectedStyle设置所选择的菜单项的样式StaticHoverStyleDynamicHoverStyle设置当鼠标悬停在菜单项上时的样式
7、为Menu控件应用模板
ASP.NET中的Menu控件是一个强大的导航控件允许开发人员创建复杂的菜单结构。通过使用模板Templates你可以自定义Menu控件的外观和行为以满足特定的需求。以下是如何在ASP.NET中为Menu控件使用模板的详细介绍。 基本概念
ASP.NET Menu控件支持以下几种模板
StaticItemTemplate用于静态菜单项的模板。 DynamicItemTemplate用于动态菜单项的模板。 StaticMenuItemTemplate用于静态菜单项的容器模板。 DynamicMenuItemTemplate用于动态菜单项的容器模板。 示例代码
以下是一个示例展示如何为Menu控件使用模板
2.1. ASPX页面
% Page LanguageC# AutoEventWireuptrue CodeFileMenuTemplate.aspx.cs InheritsMenuTemplate %
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtml
head runatservertitleMenu Template Example/titlestyle.menu-item {padding: 5px;background-color: #f0f0f0;border: 1px solid #ccc;margin: 2px;}.menu-item:hover {background-color: #e0e0e0;}/style
/head
bodyform idform1 runatserverasp:Menu IDMenu1 runatserver OrientationHorizontalStaticItemTemplatediv classmenu-item%# Eval(Text) %/div/StaticItemTemplateDynamicItemTemplatediv classmenu-item%# Eval(Text) %/div/DynamicItemTemplate/asp:Menu/form
/body
/html
2.2. 代码隐藏文件C#
using System;
using System.Web.UI.WebControls;public partial class MenuTemplate : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){BindMenu();}}private void BindMenu(){MenuItem home new MenuItem(Home, Home);MenuItem about new MenuItem(About, About);MenuItem services new MenuItem(Services, Services);MenuItem contact new MenuItem(Contact, Contact);Menu1.Items.Add(home);Menu1.Items.Add(about);Menu1.Items.Add(services);Menu1.Items.Add(contact);MenuItem webDesign new MenuItem(Web Design, WebDesign);MenuItem seo new MenuItem(SEO, SEO);services.ChildItems.Add(webDesign);services.ChildItems.Add(seo);}
}
