【.NET全栈】ASP.NET开发Web应用——站点导航技术

文章目录


前言

大型的企业级网站,可能有成百上千个网页,导航变得十分重要。

好的导航系统能够方便用户在多个页面间来回浏览,增加了应用程序的可交互性。

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页面

csharp 复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SiteMap3.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>首页</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            我是首页!
        </div>
        
    </form>
    <asp:SiteMapPath ID="SiteMap" runat="server"></asp:SiteMapPath>
</body>
</html>

HardwareProduct.aspx页面

csharp 复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HardwareProduct.aspx.cs" Inherits="SiteMap3.Products.HardwareProduct" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>硬件产品</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            主机、显示器、网络终端、收银机和ATM等设备在现代生活中扮演着重要角色。主机是计算机的核心部件,包含CPU、内存等,负责数据处理。显示器则是将电子信号转换为可视图像的输出设备,提供清晰的视觉体验。网络终端通过网络获取资源,简化多用户环境下的设备管理。收银机广泛应用于商业领域,实现高效准确的交易处理。ATM作为银行自助服务终端,提供24小时便捷的金融服务。这些设备共同促进了信息化、自动化的发展,提升了工作效率与生活质量。
        </div>
    </form>
    <asp:SiteMapPath ID="SiteMap" runat="server"></asp:SiteMapPath>
</body>
</html>

SoftwareProduct.aspx页面

csharp 复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SoftwareProduct.aspx.cs" Inherits="SiteMap3.Products.SoftwareProduct" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>软件产品</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            ERP(企业资源规划)、CRM(客户关系管理)、Web系统以及Windows系统等,是现代企业运营与管理的基石。ERP系统整合了企业内部的各项资源,优化了业务流程,提升了管理效率;CRM系统则专注于客户关系的维护与管理,帮助企业深入理解客户需求,增强客户满意度与忠诚度。Web系统作为互联网时代的产物,为企业搭建了线上服务平台,实现了信息的快速传递与交互。而Windows系统,作为广泛应用的操作系统,为上述各类软件提供了稳定、易用的运行环境,支持着企业日常工作的顺利进行。这些系统相互协作,共同推动了企业的数字化转型与智能化升级。
        </div>

        <asp:SiteMapPath ID="SiteMap" runat="server"></asp:SiteMapPath>
    </form>
    
</body>
</html>

ServiceCenter.aspx页面

csharp 复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ServiceCenter.aspx.cs" Inherits="SiteMap3.Services.ServiceCenter" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>服务中心</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            当您需要享受专业的服务与支持时,欢迎您直接步入本公司服务中心。我们的服务中心以客户为中心,致力于为每一位访客提供高效、便捷的登记服务体验。一踏入中心,您将被温馨的环境和专业的团队所包围。只需简短的登记流程,即可迅速连接至所需的服务资源。无论是咨询解答、技术支持还是产品维护,我们都将全力以赴,确保您的需求得到及时响应与满足。在这里,每一次服务都是我们对品质的承诺,每一份满意都是您对我们工作的肯定。选择本公司服务中心,让优质服务触手可及。
        </div>
        
    </form>
    <asp:SiteMapPath ID="SiteMap" runat="server"></asp:SiteMapPath>
</body>
</html>

ServiceNote.aspx页面

csharp 复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ServiceNote.aspx.cs" Inherits="SiteMap3.Services.ServiceNote" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>服务须知</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            在开始登记服务之前,我们诚挚地邀请您花几分钟时间仔细阅读这里的条款与条件。这些条款不仅是我们服务提供的基础框架,也是保障您权益与明确双方责任的重要依据。通过认真阅读,您将了解到服务的具体内容、范围、限制以及可能涉及的费用情况。同时,条款中也明确了隐私保护政策,确保您的个人信息在处理过程中得到妥善保护。我们理解这些条款可能涉及较多细节,但请您放心,我们的目标是确保每一次服务都建立在透明、公正、相互尊重的基础上。因此,在开始登记前,请您务必仔细阅读并理解这些条款,以便更好地享受我们提供的服务。
        </div>
        
    </form>
     <asp:SiteMapPath ID="SiteMap" runat="server"></asp:SiteMapPath>
</body>
</html>

Web.sitemap站点地图页面

csharp 复制代码
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://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系统等"/>

    </siteMapNode>

    <siteMapNode title="售后服务"  description="软硬件的售后服务">

      <siteMapNode url="~/Services/ServiceCenter.aspx" title="服务中心"  description="直接进入本公司服务中心登记服务"/>
      <siteMapNode url="~/Services/ServiceNote.aspx" title="服务须知"  description="在开始登记前,先阅读这里的条款"/>

    </siteMapNode>

  </siteMapNode>
</siteMap>

运行结果:

2、使用SiteMapPath控件

SiteMapPath控件已经在上面的案例中使用,是在站点地图结构、结构中对应的页面做好以后,分别在各个页面的窗体中加入SiteMapPath控件。

csharp 复制代码
<asp:SiteMapPath ID="SiteMap" runat="server"></asp:SiteMapPath>

一个页面中的添加如下:

csharp 复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SiteMap3.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>首页</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            我是首页!
        </div>
        
    </form>
    <asp:SiteMapPath ID="SiteMap" runat="server"></asp:SiteMapPath>
</body>
</html>

接下来介绍一些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控件应用模板

相关推荐
小tenten37 分钟前
js延迟for内部循环方法
开发语言·前端·javascript
幻影浪子44 分钟前
Web网站常用测试工具
前端·测试工具
暮志未晚Webgl1 小时前
94. UE5 GAS RPG 实现攻击击退效果
java·前端·ue5
二川bro1 小时前
Vue2 和 Vue3 区别 — 源码深度解析
前端
软件技术NINI1 小时前
vue组件通信,点击传值,动态传值(父传子,子传父)
前端·javascript·vue.js
暖锋丫2 小时前
echarts实现湖南省地图并且定时轮询
前端·javascript·echarts
余生逆风飞翔2 小时前
前端代码上传文件
开发语言·前端·javascript
weixin_mouren2 小时前
3.2 Upload源码分析 -- ant-design-vue系列
前端·javascript·vue.js·anti-design-vue
吾门2 小时前
.NET编程——利用C#调用海康机器人工业相机SDK实现回调取图与软触发取图【含免费源码】
c#·.net·相机
流烟默3 小时前
Vue2/Vue3中编程式路由导航实践总结
前端·javascript·vue.js·vue路由导航