Taurus.MVC WebMVC 入门开发教程7：部分视图和页面片段（结束篇）
本系列的目录大纲为：
Taurus.MVC WebMVC 入门开发教程1：框架下载环境配置与运行 Taurus.MVC WebMVC 入门开发教程2：一个简单的页面呈现 Taurus.MVC WebMVC 入门开发教程3：数据绑定Model Taurus.MVC WebMVC 入门开发教程4：数据列表绑定List<Model> Taurus.MVC WebMVC 入门开发教程5：表单提交与数据验证 Taurus.MVC WebMVC 入门开发教程6：路由配置与路由映射 Taurus.MVC WebMVC 入门开发教程7：部分视图和页面片段（结束篇）
前言：
在本篇 Taurus.MVC WebMVC 入门开发教程的第七篇文章中，
我们将深入探讨如何使用部分视图和页面片段来提高代码的复用性和可维护性。
部分视图和页面片段是 Web 开发中常用的技术，能够帮助我们更好地组织和管理页面的结构和内容。
了解部分视图和页面片段
在 Taurus.MVC WebMVC 中，部分视图（Partial View）是一种可在其他视图中重复使用的视图片段。
它们通常用于显示页面的一部分内容，例如页眉、页脚、侧边栏等。
通过使用部分视图，我们可以将页面分割为多个独立的部分，便于管理和维护。
页面片段（Page Fragment）是指页面中的某个具体部分，可以是一个 HTML 片段、一段文本、一个表单等。
通过使用页面片段，我们可以将页面的不同部分进行精细化的管理，使得页面结构更加清晰和灵活。
创建部分视图
在 Taurus.MVC WebMVC 中，创建部分视图非常简单。
首先，在 Views 文件夹下创建一个名为 Shared 的文件夹（如果已经存在则忽略），然后在该文件夹下创建任意的如： foot.html 的部分视图文件。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<footer class="footer" id="footer">
<div class="container">
<p class="text-muted">Author : 路过秋天 Copyright 2016-2096 Powered by Aster All Rights Reserved.</p>
</div>
</footer> </body>
</html>
上述代码是一个简单的 foot.html 部分视图，用于显示网站的页脚内容。
在视图中使用部分视图的页面片段
在需要使用部分视图的视图文件中，使用 Html的 itemref 属性引入部分视图。
itemref的语法为：页面名称.节点ID（或标签tag）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欢迎来到 Taurus.MVC WebMVC</title>
</head>
<body>
<h1>用户列表</h1>
<ul id="list">
<li>姓名：${Name}，年龄：${Age}</li>
</ul>
<div itemref="foot.footer"></div>
</body>
</html>
上述代码将 foot.html 部分视图的页面片段，通过指定【页面名称.节点ID名称】嵌入到了 index.html 视图文件中，使得页面可以显示包含在 foot.html 中的内容。
页面片段高级使用：
这次，我们在 Views 文件夹下创建一个名为 Shared 的文件夹（如果已经存在则忽略），
然后在该文件夹下创建任意的如： myhead.html 的部分视图文件：
<!DOCTYPE html>
<html>
<head>
<title itemref="title"></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="taurus,taurus mvc,mvc,asp.net mvc,cyq.data" />
<meta name="description" content="Taurus.MVC is a simple mvc or webapi framework for asp.net" />
<meta name="author" content="Aster(路过秋天)" />
<link rel="stylesheet" href="/Views/styles/css/bootstrap.min.css" />
<script src="/Views/styles/js/bootstrap.min.js"></script>
</head>
</html>
上述代码定义了一个名为 head.html 的部分视图文件，用于统一页面的head部分。
同样 head 里包含了在各页面通用的样式和脚本。
下面我们试着来引用它：
回到我们之前教程里创建的 index.html 页面，在 head 标签添加 itemref 属性，并指向 myhead.head：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head itemref="myhead.head">
<title>欢迎来到 Taurus.MVC WebMVC</title>
</head>
<body>
<h1>用户列表</h1>
<ul id="list">
<li>姓名：${Name}，年龄：${Age}</li>
</ul>
<div itemref="foot.footer"></div>
</body>
</html>
完成代码后，接下来，我们来看看程序运行的结果：
运行程序：
此时我们运行程序，输出结果和预期的一致，如下图：
在结果输出中，我们可以清晰的看到，head 节点已被替换成页面片段的节点。
同时标题，仍保留了 index.html 的标题。
这是怎么实现的呢？
由于不同的面页，有不同的标题，或者总有区异化的地方，对于这种情况，我们可以在部分视图中使用 itemref，再次引用回去。
因此，我们可以看到，在 head.html 中，也使用了 itemref 属性，它指向了 title 标签（注意，这里直接没有使用页面名称 xxx.即当前页面）。 通过二次引用，title 标签被指向 index 原来的页面的标签，于是显示了："欢迎来到 Taurus.MVC WebMVC“的标题。 有点类似于定义虚方法，留给引用者重写该内容。
需要注意的是，上述示例中，使用是使用标签的 tag 属性引用的，而不是ID，对于这种情况，框架默认会取第1个tag。
因此，如果你在程序中，通过xxx.tag 来引用时，应该确保该节点的唯一性。
总结
通过本篇教程，我们学习了如何在 Taurus.MVC WebMVC 中使用部分视图和页面片段来提高代码的复用性和可维护性。
我们了解了部分视图和页面片段的基本概念，并学习了如何创建和使用它们。
本系列入门教程，就到此结束，后续看有需要，再补充教程。
Taurus.MVC WebMVC 入门开发教程7：部分视图和页面片段（结束篇）的更多相关文章
- Taurus.MVC WebAPI 入门开发教程1：框架下载环境配置与运行（含系列目录）。
前言: Taurus.MVC 微服务版本已经发布了:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单. 以前都是框架发布时写点相关功能点的文章,没有形成 ...
- Taurus.MVC WebAPI 入门开发教程2：添加控制器输出Hello World。
系列目录 1.Taurus.MVC WebAPI 入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...
- Taurus.MVC WebAPI 入门开发教程3：路由类型和路由映射。
系列目录 1.Taurus.MVC WebAPI 入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...
- Taurus.MVC WebAPI 入门开发教程4：控制器方法及参数定义、获取及基础校验属性【Require】。
系列目录 1.Taurus.MVC WebAPI 入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...
- Taurus.MVC WebAPI 入门开发教程5：控制器安全校验属性【HttpGet、HttpPost】【Ack】【Token】【MicroService】。
系列目录 1.Taurus.MVC WebAPI 入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...
- Taurus.MVC WebAPI 入门开发教程6：全局控制器DefaultController与全局事件。
系列目录 1.Taurus.MVC WebAPI 入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...
- Taurus.MVC WebAPI 入门开发教程8：WebAPI文档与自动化测试。
系列目录 1.Taurus.MVC WebAPI 入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...
- Taurus.MVC 微服务框架 入门开发教程：项目集成：4、默认安全认证与自定义安全认证。
系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...
- Taurus.MVC 微服务框架 入门开发教程：项目部署：1、微服务应用程序常规部署实现多开，节点扩容。
系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...
- Taurus.MVC 微服务框架 入门开发教程：项目部署：2、让Kestrel支持绑定多个域名转发，替代Ngnix使用。
系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...
随机推荐
- uni-app中使用map
uni-app中使用地图显示当前的位置 我们现在的需求是,显示用户在地图上所处的位置. 有的小伙伴可能会说,这个是不是需要接入第三方的地图. 其实是不需要的,从目前这个需求来看. 我们只需要引入uni ...
- file文件转为base64
场景描述 在工作中,我们经常需要进行文件上传. 比如在进行图片上传的时候, 我们需要将上传的图片展示出来. 这个时候我们就需要将file文件转化为base64. 将file文件转化为base64 // ...
- Docker系列教程01--简介
Docker 入门教程 作者: 阮一峰 日期: 2018年2月 9日 2013年发布至今, Docker 一直广受瞩目,被认为可能会改变软件行业. 但是,许多人并不清楚 Docker 到底是什么, ...
- 微信小程序-双线程渲染模型
微信小程序双线程渲染模型 小程序的运行环境分成渲染层和逻辑层: WXML 模板和 WXSS 样式工作在渲染层,通过 WebView 进行渲染 小程序会为每一个界面都创建一个 WebView 来渲染这个 ...
- SpringBoot2.7集成Swagger3
1.引入pom坐标 <!--swagger--> <dependency> <groupId>io.springfox</groupId> <ar ...
- 将Windows系统设置为NTP服务器之NetTime
之前写过一个将Windows系统设置NTP服务器的随笔,是通过修改Windows的注册表来实现NTP服务器,现在有个更简单的方式,安装一个小插件即可将Windows设置为NTP服务器. 插件 NetT ...
- Visual Studio 2022 企业版 离线包 下载
今天安装了Visual Studio 2022 企业版工具,觉得改进还是有一定的,下面提供下载及序列号: 链接:https://pan.baidu.com/s/1qvzg8WtsgaCxrD3M4Y0 ...
- 性价比超频我都要 两大内存绝技带来20%性能提升！技嘉雪雕Z790 AORUS LITE AX-W主板评测
一.前言:主打性价比.两大内存绝技加持的技嘉Z790主板 要说现在最主流的装机方案,那必然是13代酷睿+700系主板.我们此前曾测试过技嘉的Z790钛雕主板,独有的顶级表现让人印象深刻,不过近6K的价 ...
- Docker从认识到实践再到底层原理（二-3）｜LXC容器
前言 那么这里博主先安利一些干货满满的专栏了! 首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助. 高质量博客汇总 然后就是博主最近最花时间的一 ...
- CH59X/CH58X/CH57X sleep模式下串口唤醒收发数据
整体程序逻辑: 下方的具体程序及使用是基于CH592进行的 SLEEP模式睡眠唤醒是由协议栈管理的,还在睡眠时,无法接收到数据. 已经通过使能HAL_SLEEP开启睡眠.如果需要在睡眠时实时接收串口传 ...