Taurus.MVC WebMVC 入門開發教程7：部分檢視和頁面片段（結束篇）

路过秋天發表於2024-03-02
MVCWeb

本系列的目錄大綱為：

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 中使用部分檢視和頁面片段來提高程式碼的複用性和可維護性。

我們瞭解了部分檢視和頁面片段的基本概念，並學習瞭如何建立和使用它們。

本系列入門教程，就到此結束，後續看有需要，再補充教程。

相關文章