前言:

在本篇 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. 记录一次RPC服务有损上线的分析过程

    1. 问题背景 某应用在启动完提供JSF服务后,短时间内出现了大量的空指针异常. 分析日志,发现是服务依赖的藏经阁配置数据未加载完成导致.即所谓的有损上线或者是直接发布,当应用启动时,service还 ...

  2. web开发的模式的介绍与身份认证

    web开发的模式的介绍 1.服务端渲染 2.前端端分离开发的web模式 服务端渲染优点与缺点 优点: 1.前端耗时少.因为服务器端负责动态生成HTML内容,浏览器只需要直接渲染页面即可.尤其是移动端更 ...

  3. 在K8S中,静态、动态、自主式Pod有何区别?

    在Kubernetes(简称K8s)中,静态Pod.自主式Pod和动态Pod是不同管理方式下的Pod类型,它们的区别主要体现在创建和管理方式上: 静态Pod: 静态Pod是由kubelet直接管理的, ...

  4. 14.3 Socket 字符串分块传输

    首先为什么要实行分块传输字符串,一般而言Socket套接字最长发送的字节数为8192字节,如果发送的字节超出了此范围则后续部分会被自动截断,此时将字符串进行分块传输将显得格外重要,分块传输的关键在于封 ...

  5. 1.1 C++ STL 字符串构造函数

    String 字符串操作容器是C++标准中实现的重要容器,其主要用于对字符串的高效处理,它和C风格中的string.h并不是同一个库,两个库有极大的差距,C库中的string.h主要面向过程提供一些处 ...

  6. Python 实现文件关键字扫描

    第一段代码用户传入一个文件夹,自动扫描文件夹内特定文件是否存在某些关键字,如果存在则输出该文件的路径信息. # coding=gbk import sys,os,re def spider(scrip ...

  7. 使用Fiddler复制并转发http响应数据

    1.安装Fiddler 略 2.编辑FiddlerScript,增加拦截判断 Goto OnBeforeResponse,跳转到指定函数,在函数中添加拦截某些http代码,如下. if (oSessi ...

  8. MySQL拓展知识

    一:视图 1:创建视图 1 --格式:CREATE VIEW 视图名称 AS SQL语句 2 CREATE VIEW v1 AS 3 SELET nid, 4 name 5 FROM 6 A 7 WH ...

  9. Intel 4工艺太难了!酷睿Ultra终于突破5GHz

    无论是14nm还是10nm,Intel这些年的新工艺都有一个通性:刚诞生的时候性能平平,高频率都上不去,只能用于笔记本移动端(分别对应5代酷睿.10代酷睿),后期才不断成熟,比如到了13代酷睿就达到史 ...

  10. PCIe诞生20年来最大变革!引入光学传输

    PCI-SIG组织官方宣布,已经成立新的光学工作组(Optical Workgroup),研究为PCIe规范引入光学传输接口的可能性. PCIe标准是Intel 2001年提出的,2003年发布1.0 ...