前言:

在本篇 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:部分视图和页面片段(结束篇)的更多相关文章

  1. Taurus.MVC WebAPI 入门开发教程1:框架下载环境配置与运行(含系列目录)。

    前言: Taurus.MVC 微服务版本已经发布了:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单. 以前都是框架发布时写点相关功能点的文章,没有形成 ...

  2. Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World。

    系列目录 1.Taurus.MVC WebAPI  入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...

  3. Taurus.MVC WebAPI 入门开发教程3:路由类型和路由映射。

    系列目录 1.Taurus.MVC WebAPI  入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...

  4. Taurus.MVC WebAPI 入门开发教程4:控制器方法及参数定义、获取及基础校验属性【Require】。

    系列目录 1.Taurus.MVC WebAPI  入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...

  5. Taurus.MVC WebAPI 入门开发教程5:控制器安全校验属性【HttpGet、HttpPost】【Ack】【Token】【MicroService】。

    系列目录 1.Taurus.MVC WebAPI  入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...

  6. Taurus.MVC WebAPI 入门开发教程6:全局控制器DefaultController与全局事件。

    系列目录 1.Taurus.MVC WebAPI  入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...

  7. Taurus.MVC WebAPI 入门开发教程8:WebAPI文档与自动化测试。

    系列目录 1.Taurus.MVC WebAPI  入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...

  8. Taurus.MVC 微服务框架 入门开发教程:项目集成:4、默认安全认证与自定义安全认证。

    系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...

  9. Taurus.MVC 微服务框架 入门开发教程:项目部署:1、微服务应用程序常规部署实现多开,节点扩容。

    系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...

  10. Taurus.MVC 微服务框架 入门开发教程:项目部署:2、让Kestrel支持绑定多个域名转发,替代Ngnix使用。

    系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...

随机推荐

  1. 使用Java读取Excel文件数据

    通过编程方式读取Excel数据能实现数据导入.批量处理.数据比对和更新等任务的自动化.这不仅可以提高工作效率还能减少手动处理的错误风险.此外读取的Excel数据可以与其他系统进行交互或集成,实现数据的 ...

  2. 【K哥爬虫普法】百度、360八年恩怨情仇,robots 协议之战终落幕

    我国目前并未出台专门针对网络爬虫技术的法律规范,但在司法实践中,相关判决已屡见不鲜,K哥特设了"K哥爬虫普法"专栏,本栏目通过对真实案例的分析,旨在提高广大爬虫工程师的法律意识,知 ...

  3. 在C#或python中使用xpath解析xml

    记几个笔记 文件后缀不一定要.xml,可以是任意后缀,只要内容是符合xml和格式即可解析出来 文件编码需要是utf-8,python和c#都需要,或者xml文件头有这样一句:<?xml vers ...

  4. Win32汇编:数组与标志位测试总结

    整理复习汇编语言的知识点,以前在学习<Intel汇编语言程序设计 - 第五版>时没有很认真的整理笔记,主要因为当时是以学习理解为目的没有整理的很详细,这次是我第三次阅读此书,每一次阅读都会 ...

  5. MySQL 字符串与时间操作函数

    MariaDB [lyshark]> select Name,char_length(Name) from lyshark; -- 求字符串长度 +------------+---------- ...

  6. uni-uadmin后台管理系统|uniapp+uView跨端后台框架实例

    基于uniapp+uview+uni-ui跨平台手机端后台管理系统UniappUAdmin. uniapp-uadmin 基于uni-app+uView+uniUI研发的跨端手机后台管理系统项目.全新 ...

  7. FireDac 连接 SQL SERVER 2014 - LocalDB

    易博龙官方的文档没有更新,官方的文档只能连接local-db2012 微软官方关于local-db 2012的描述 如下: 但是现在我开始使用SQL SERVER LOCAL-DB 2014了,因为今 ...

  8. .NET Core开发实战(第35课:MediatR:让领域事件处理更加优雅)--学习笔记

    35 | MediatR:让领域事件处理更加优雅 核心对象 IMediator INotification INotificationHandler 这两个与之前的 Request 的行为是不一样的, ...

  9. NC227595 跳跳跳

    题目链接 题目 题目描述 dd在玩跳格子游戏,具体游戏规则如下, \(n\) 个格子呈环形分布,顺时针方向分别标号为 \(1\sim n\) ,其中 \(1\) 和 \(n\) 相邻,每个格子上都有一 ...

  10. python 中异常类型总结

    异常类型: 异常名称 描述BaseException             所有异常的基类SystemExit                   解释器请求退出KeyboardInterrupt  ...