[MVC] View切換不同主題

  最近要作一個網站,在UI的呈現上,需讓使用者可以自行挑選色系及版型。實作前,先去參考了WordPress的作法,是根據設定來讀取themes目錄下的程式如: .php,.css.js 等。對照在.NET MVC上,要如何實作? 研究一下相關文章後,可以透過ViewEngine的實作,來達到所需要的功能。網站開工前,先作了一個簡單的POC來驗證一下。

ThemeViewEngine實作

預設的ViewEngine讀取方式不變(若沒有對應的Theme,使用預設),新增一個ThemeViewEngine來讀取Theme目錄底下的View。如下圖

image_thumb

建立ThemeViewEngine

覆寫相關取得MasterView、View、PartialView的方法。將字串路徑#Theme#取代成使用者挑選的Theme

image_thumb5

將ThemeViewEngine加入到ViewEngines集合內,本例插入最前面的位置,目的為找不到Theme時,則取最上層的View

image_thumb6

測試程式

HomeController.cs

Index設定呈現的內容以及新增ChangeTheme Action來作切換Theme

image_thumb1

Views

最上層及Theme底下新增Index View,作不同css及版型(本例:1~4欄)的呈現。

image_thumb15


呈現效果

image_thumb12
image_thumb13

image_thumb14

原始碼下載:https://github.com/kimx/DynamicViewLab

參考來源

http://weblogs.asp.net/imranbaloch/view-engine-with-dynamic-view-location

這個網誌中的熱門文章

IIS 設定只允許特定IP進入