NVelocity介紹

.NET 平台模板引擎,為 Java 平台 Velocity 的 .NET 移植版本。

介紹

廣泛運用於 ASP.NET 專案;
ASP.NET MVC 內建 Razor 模板引擎;

若傳統 .aspx 頁面專案想要導入 MVC 架構,不少開發者會選擇 NVelocity。

NVelocity 早已停止維護,僅適合舊版 .NET Framework 歷史專案使用;新專案建議優先採用 Razor、Handlebars.NET 等現代模板引擎。

版本與 .NET Framework 對照表

.NET Framework 版本NVelocity 版本
.NET 4.01.0(官方最新版)
.NET 2.00.5
.NET 1.00.48

Velocity 是資深 Java 模板引擎,語法簡潔,使用 #$ 做為模板標記;NVelocity 完整移植這套語法;

下載

官方最後更新時間為2018年,最新版本為1.2.0

讀者可以透過下方連結取得原始碼

此專案為開源專案,存放於 GitHub castleproject/NVelocity: Castle’s NVelocity

官方提供的套件不含預編譯 DLL,讀者下載原始碼後可自行編譯,或是直接將專案匯入方案中使用。

使用 Visual Studio 開啟 sln 方案檔

最後釋出版本是以 .NET Core 2.1 建置,建議開發者將其升級至 .NET 4.8

編譯完成後,輸出目錄即可取得 DLL 檔案

接著將 NVelocity.dll 匯入其他 ASP.NET Web 專案即可。

匯入專案

專案參考組件:NVelocity.dll
核心優勢:透過此模板引擎,能輕鬆實現網站多模板切換(換膚)功能

在網站根目錄建立資料夾 Themes,做為所有模板的根目錄
在 Themes 底下建立多個主題資料夾,範例如下:

於網站根目錄建立 Themes 資料夾,做為主題存放目錄

主題目錄

新增 default 資料夾做為預設模板
後續可依需求新增 Themes/blue、Themes/dark 等多套模板

網站根目錄
└── Themes
    ├── default      # 預設主題模板檔
    ├── dark         # 深色主題模板檔
    └── blue         # 藍色主題模板檔Code language: PHP (php)

程式執行時讀取設定檔取得目前啟用的主題名稱,NVelocity 便會載入對應主題目錄內的模板;
切換模板的原理:修改設定指向不同主題資料夾,無需異動商業邏輯程式;
適合舊式 ASP.NET WebForm(aspx)專案實作前台頁面換膚功能。

aspx

在網站根目錄建立新的 Register.aspx 頁面,做為示範頁面。

Themes/default 目錄新增模板檔 register.htm,此檔為 NVelocity 模板,放置 HTML 與 Velocity 語法。

打開 Register.aspx僅保留頁面指令,刪除所有其他 HTML 內容:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="NVelocityStudy.Web.Register" %>Code language: HTML, XML (xml)

aspx 不再負責頁面渲染,只做為進入點,由後端程式呼叫 NVelocity 載入 register.htm 模板並輸出內容。

網站根目錄
├─ Register.aspx          # 存取入口
├─ Register.aspx.cs       # 後端邏輯
└─ Themes
    └─ default
        └─ register.htm   # NVelocity模板頁面Code language: CSS (css)

接下來在 Register.aspx.cs 撰寫程式,指定載入目前主題底下的 register.htm、傳入資料模型,最後輸出 HTML。

切換主題時,只需要修改主題目錄指向,引擎就會載入對應資料夾內的 register.htm

aspx.cs

開啟後端程式檔 Register.aspx.cs,在 Page_Load 方法撰寫 NVelocity 渲染邏輯,頁面載入時執行模板解析與輸出。

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace NVelocityStudy.Web
{
    public partial class Register : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // 在此撰寫NVelocity載入模板、渲染頁面的程式碼
        }
    }
}Code language: C# (cs)

在Page_Load加入以下程式

protected void Page_Load(object sender, EventArgs e)
{
    //第一步 建立Velocity引擎實體 VelocityEngine
    VelocityEngine ve = new VelocityEngine();

    //第二步 初始化引擎設定
    ExtendedProperties pros = new ExtendedProperties();
    pros.AddProperty(RuntimeConstants.RESOURCE_LOADER, "file"); // 使用檔案模式載入模板
    pros.AddProperty(RuntimeConstants.FILE_RESOURCE_LOADER_PATH, Server.MapPath(@"")); // 模板根目錄
    ve.Init(pros); // 使用設定初始化引擎

    //第三步 讀取模板檔案
    Template template = ve.GetTemplate("themes/default/register.htm");

    //第四步 建立內容環境,傳入變數至模板
    IContext context = new VelocityContext();
    context.Put("websiteName", "FoxDevelop");
    context.Put("domainName", "foxdevelop.com");

    //第五步 合併模板與資料,產生HTML
    StringWriter writer = new StringWriter();
    template.Merge(context, writer); //渲染結果存入writer

    //第六步 輸出頁面
    Response.Write(writer.ToString().Replace("\r\n", "<br/>"));
}Code language: C# (cs)

這段程式會讀取HTML模板檔、建立變數,用來置換模板內的佔位符

  1. 實體化 VelocityEngine 獨立引擎物件,與全域靜態 Velocity.Init() 不同,支援多組獨立設定。
  2. 引擎初始化與設定
  • RESOURCE_LOADER=file:指定使用本機檔案載入模板;
  • FILE_RESOURCE_LOADER_PATH:設定模板搜尋根路徑;
  • ve.Init(pros):載入設定完成初始化。
  1. 載入模板 GetTemplate() 依據設定的根路徑,讀取 themes/default/register.htm 模板檔。
  2. VelocityContext 資料環境context.Put(鍵, 值):將 C# 變數傳入模板,在htm內使用$websiteName$domainName取值。
  3. 模板 Merge 渲染template.Merge(環境, 輸出串流),把變數填入模板,產生完整HTML字串;使用StringWriter接收渲染後文字。
  4. Response 輸出 將最終HTML傳送給瀏覽器;Replace("\r\n","<br/>"):把原始換行符轉換為HTML換行標籤。

htm模板

修改主題目錄內的register.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    網站:$websiteName <br />
    網域名稱:$domainName
</body>
</html>Code language: HTML, XML (xml)

上方兩個$xxxxxxx 就是Page_Load建立變數的佔位符,渲染過程會自動替換成對應內容。

  1. 變數標記 $變數名稱 $websiteName$domainName 屬於 NVelocity (VTL) 變數語法。程式內透過 context.Put("websiteName", "FoxDevelop") 指定值,渲染時引擎自動置換:
  • $websiteNameFoxDevelop
  • $domainNamefoxdevelop.com

執行結果

網站:FoxDevelop
網域名稱:foxdevelop.comCode language: CSS (css)

NVelocity介紹

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *