通過本篇教程，我們學習瞭如何在 Taurus.MVC WebMVC 中使用部分視圖和頁面片段來提高代碼的復用性和可維護性。我們瞭解了部分視圖和頁面片段的基本概念，並學習瞭如何創建和使用它們。 ...
本系列的目錄大綱為：
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 中使用部分視圖和頁面片段來提高代碼的復用性和可維護性。
我們瞭解了部分視圖和頁面片段的基本概念，並學習瞭如何創建和使用它們。
本系列入門教程，就到此結束，後續看有需要，再補充教程。
| 版權聲明：本文原創發表於 博客園，作者為 路過秋天 本文歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則視為侵權。 |
個人微信公眾號
|
創業QQ群：617713515
|
Donation(掃碼支持作者)：支付寶：
|
Donation(掃碼支持作者)：微信：
|
|
|
騰訊雲產品福利專區 |
