網頁

2012年2月29日 星期三

ASP.NET MVC 3 使用新的專案樣板–MVC Themed App


雖然說ASP.NET MVC 4會有新的專案預設樣版,不會再是千篇一律的藍色樣式,

ASP.NET MVC 4 Overview - Part 2: Default template changes and Adaptive Rendering using Viewport and CSS Media Queries

但是要等到ASP.NET MVC 4發佈也還需要一段時間,而平常專案開發的時候也不會是去使用預設的專案樣板,

在做一些簡單的專案時,會想要花功夫找樣板套用的工程師應該是不多,

我就是這樣的程式開發人員,對於預設樣板早就看到膩了,但是要花時間找一個免費的樣板來套用…想到就懶呀!

 

前幾天在更新VS2010的Extensions的時候,閒來無事就盯著VS2010擴充管理員的線上圖庫,一頁一頁的看,

看看是不是有新鮮的擴充可以裝來玩玩,因為主要是開發MVC專案,所以就下了關鍵字做搜尋,

然後就看了一個不曾看過的新東西…

SNAGHTML1b04523



MVC Themed App

這可以用來快速建立一個是用MVC Themem APP內建樣式的ASP.NET MVC 3專案。

Visual Studio Gallery:MVC Themed App
http://visualstudiogallery.msdn.microsoft.com/3f98d8eb-75b8-4913-963a-8d37f4326e88

Introducing the MVC Themed Web App Project Template
http://www.mythicalmanmoth.com/?p=358

 

「MVC Themed App」是根據Rails的「Web App Theme rails generator」,作者移植到ASP.NET MVC,

github – web-app-theme
https://github.com/pilu/web-app-theme

線上範例(可以切換內建的多種網站樣式)
http://pilu.github.com/web-app-theme/

 

其實MVC Themed App的部落格介紹文章說明的相當清楚,但我還是實地記錄安裝與使用的過程。

 



安裝

使用VS2010的擴充管理員,在線上圖庫中找到「MVC Themed App」後就直接下載,

SNAGHTML1b71e13

當下載完成後就會顯示安裝介面,只要按下「安裝」按鍵後就可以了。

SNAGHTML1b87e3c

 

建立專案並使用MVC Themed App的專案樣板

當VS2010完成安裝MVC Themed App之後,我是建議要新開啟VS2010,

重新開啟VS2010後,接下來我們要新建立一個專案,

不過要注意的是,雖然這個Project Template是給MVC專案使用,卻無法在Web的範本中找到,

SNAGHTML1c02110

而是必須在「Visual C#」底下才能找到,

SNAGHTML1c120c2

我們選擇使用「MVC Themed App」範本來建立專案,建立好的專案目錄架構如下:

image

在還沒有做任何的程式變動的情況下,直接按「F5」來執行網站,

image

執行後所呈現的是一個使用預設樣式的網頁。

 

修改使用樣式

「MVC Theme App」提供了以下幾種樣式:

  • activo
  • amro
  • bec
  • bec-green
  • blue
  • default
  • djime-cerulean
  • drastic dark
  • kathleene
  • olive
  • orange
  • red
  • reidb-greenish
  • warehouse

如果說要修改使用的樣式,可以開啟「~/Views/Shared/_Layout.cshtml」這個主版頁面檔案來做修改,

對了,「MVC Themed App」所使用的View Engine為Razor,

image

如上圖中,預設的樣式就是「default」,要修改使用的樣式就把這邊的值做修改,

例如我們將顯示的樣式修改為「orange」,來看看套用之後的樣子,

image

套用「djime-cerulean」樣式,

SNAGHTML1d3328d

 

修改使用的jQuery版本

「MVC Themed App」所使用的jQuery預設版本為「v1.6.4」,使用CDN的方式載入jQuery以及jQuery UI,

所以不要一直往「~/Scripts」目錄去找為何沒有jQuery檔案,

依照「_Layout.cshtml」的內容,我們可以在「~/App_Code.Assets.cshtml」中去找到方法,

image

所以可以在「Assets.cshtml」中去修改jQuery的helper方法內容,

去修改為你想要用的 jQuery與jQuery UI版本,或是將jQuery檔案複製到「~/Scripts」目錄中,

如果是繼續沿用CDN的方式載入jQuery,但又想要讓網站讀取到最新的jQuery版本,可以修改為以下的方式,

以下的方式我會把「Assets.cshtml」中的jQuery與jQuery UI區隔開來,

@helper jQuery()
{
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
}
@helper jQueryUI()
{
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" type="text/javascript"></script>
}

image

如此就可以使用CDN載入最新版本的jQuery,

image

不過最好還是用指定版本號的方式,這樣才不會造成所寫的javascript程式因為jQuery版本的不同而產生的混亂,

目前在Google CDN中可以取得library的版本如下,

jQuery最新的版本為:v1.7.1

jQuery UI最新的版本為:v1.8.16

http://code.google.com/intl/zh-TW/apis/libraries/devguide.html

@helper jQuery()
{
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
}
@helper jQueryUI()
{
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
}

 

 

CodeTemplates

「MVC Themed App」已經有建立好Controller與View的T4 Template,所以當產生一個新的Controller時,

可以勾選「為Create、Update、Delete和Details案例加入動作方法」,如下:

SNAGHTML173a90

如此一來就會依據「~/CodeTemplates/AddController/Controller.tt」這個樣板來產生Controller,

而這個新的Controller就會有預設建立好的Create, Update, Delete, Details動作方法,如下:

public class ProductController : Controller
{
    //
    // GET: /Product/
 
    public ActionResult Index()
    {
        return View();
    }
 
    //
    // GET: /Product/Details/5
 
    public ActionResult Details(int id)
    {
        return View();
    }
 
    //
    // GET: /Product/Create
 
    public ActionResult Create()
    {
        return View();
    } 
 
    //
    // POST: /Product/Create
 
    [HttpPost]
    public ActionResult Create(FormCollection collection)
    {
        try
        {
            // TODO: Add insert logic here
 
            return RedirectToAction("Index");
        }
        catch
        {
            return View();
        }
    }
    
    //
    // GET: /Product/Edit/5
 
    public ActionResult Edit(int id)
    {
        return View();
    }
 
    //
    // POST: /Product/Edit/5
 
    [HttpPost]
    public ActionResult Edit(int id, FormCollection collection)
    {
        try
        {
            // TODO: Add update logic here
 
            return RedirectToAction("Index");
        }
        catch
        {
            return View();
        }
    }
 
    //
    // GET: /Product/Delete/5
 
    public ActionResult Delete(int id)
    {
        return View();
    }
 
    //
    // POST: /Product/Delete/5
 
    [HttpPost]
    public ActionResult Delete(int id, FormCollection collection)
    {
        try
        {
            // TODO: Add delete logic here
 
            return RedirectToAction("Index");
        }
        catch
        {
            return View();
        }
    }
}

而「~/CodeTemplates/AddView/」目錄下有兩個ViewEngine對應的View CodeTemplates,

如果ViewEngine是使用Razor,那就會使用「/CSHTML」目錄下的T4 Templates,

image

而在使用時,當我們在Controller的Action方法要產生一個對應的View時,

先指定對應的Model類別,接著就可以依據Action方法來選擇要使用哪一個T4 Template,

按下「加入」後就會依據「Create.tt」來建立Product / Create 的View,

image

 

 

Membership

這一個Membership Provider是採用一個叫做「CodeFirst Membership Provider」的CodePlex專案,

http://codefirstmembership.codeplex.com/

有興趣了解的人可以自行前往,基本上「MVCThemedApp」的Membership Provider是完全的複製過來,

不過「MVCThemedApp」對於Membership Provider的設定有漏了一小部分,

沒有去注意發現的話,這個部分還真的會讓人覺得迷迷糊糊的。

 

「MVC Themed App」的「~/Membership」目錄中包含有:

CodeFirstMembershipProvider.cs與CodeFirstRoleProvider.cs,

而在「~/Models」目錄下也建立好Role與User類別與AccountModel,

image

另外在「~/Context」目錄下也包含了EF Database Context Class以及Initializer,

image

這個「DataContextInitializer.cs」會自動建立一個新的帳號:Demo,帳號的密碼為:123456,

並且賦予這著帳號為Admin的角色,

public class DataContextInitializer : DropCreateDatabaseIfModelChanges<DataContext>
{
    protected override void Seed(DataContext context)
    {
        // Create a new Demo User
        MembershipCreateStatus Status;
        Membership.CreateUser("Demo", "123456", "demo@demo.com", null, null, true, out Status);
        Roles.CreateRole("Admin");
        Roles.AddUserToRole("Demo", "Admin");
    }
}

在Global.asax中的Application_Start()方法會做這些初始動作:

protected void Application_Start()
{
    Database.SetInitializer<DataContext>(new DataContextInitializer());
    AreaRegistration.RegisterAllAreas();
 
    RegisterGlobalFilters(GlobalFilters.Filters);
    RegisterRoutes(RouteTable.Routes);
}

不過這些都必須要先修改好Web.Config中的資料庫連接字串的修改,

原本預設的資料庫連接字串為:

  <connectionStrings>
    <add name="DataContext" connectionString="Data Source=(local);Initial Catalog=MVCThemedApp;Integrated Security=SSPI;" providerName="System.Data.SqlClient"/>
  </connectionStrings>

這邊就必須要先修改好資料庫的連線資訊,我這邊就改成我的資料庫連線,如下:

<connectionStrings>
  <!--<add name="DataContext" connectionString="Data Source=(local);Initial Catalog=MVCThemedApp;Integrated Security=SSPI;" providerName="System.Data.SqlClient"/>-->
  <add name="DataContext" connectionString="Data Source=192.168.137.228;Initial Catalog=MVCThemedApp;Persist Security Info=True;User ID=testdb;password=test1234;" providerName="System.Data.SqlClient"/>
</connectionStrings>

而有一個地方必須要注意到,這也就是我之前所說「有缺漏」的地方,

(其實也不是有漏,而是MVCThemedApp的說明網頁中對於這一個項目只有輕輕帶過)

原本在Web.Conofig的appSettings是只有以下的內容:

  <appSettings>
    <add key="webpages:Version" value="1.0.0.0"/>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
  </appSettings>

在專案的建置與執行上是沒有任何地方出現錯誤,但唯獨在做Logon與Register的時候就會跟你說資料庫錯誤,

或是Membership Provider有問題等等的錯誤發生,

而MVCThemedApp的說明網頁中也真的沒有對這個地方有比較詳細的說明,

原本的說明網頁是這樣說的:

Web.config – Make sure you change the connectionString value. Currently it assumes you have SQL server on your local machine and admin right to the local server. By default it will create a MVCThemedApp database with the necessary code-first Membership provider tables.

大意就是說,只要我們去修改原本預設的資料庫連線字串,並確保所提供的資料庫連線帳號有管理SQL的權限,

當專案執行時,就會在資料庫中去建立一個「MVCThemedApp」的DB,並且建立第一筆的會員資料等……。

 

但是當我在執行專案時卻什麼事情也沒有發生,資料庫也從來沒有建立「MVCThemedApp」的DB,

於是就直接看「CodeFirst Membership Provider」的專案內容,仔細比對之後就看到問題了,

以下是CodeFirst Membership Provider的Web.Config中AppSettings的設定內容:

  <appSettings>
    <add key="webpages:Version" value="1.0.0.0"/>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
    <add key="DatabaseInitializerForType CodeFirstMembershipSharp.DataContext, CodeFirstMembershipSharp" value="CodeFirstMembershipSharp.DataContextInitializer, CodeFirstMembershipSharp"/>
  </appSettings>

很明顯就可以看出,MVCThemedApp缺少了第四項的設定,沒有去指定要去初始化建立的型別,

所以也就不會在專案第一次執行的時候去建立「MVCThemedApp」Database了,

所以我們就在AppSettings中加上第四個設定,而這個設定並不是完全的照抄過來,而是要做一點點的修改,

  <appSettings>
    <add key="webpages:Version" value="1.0.0.0"/>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
    <add key="DatabaseInitializerForType MVCThemedApp1.DataContext, MVCThemedApp1" value="MVCThemedApp1.DataContextInitializer, MVCThemedApp1"/>
  </appSettings>

其實修改的地方就是把Namespace給改成目前專案的Namespace名稱,如此一來就可以在專案第一次執行時去建立DB了,

原本的Database還沒有建立「MVCThemedApp」DB

image

執行專案之後,「MVCThemedApp」DB就建立了,

image

建立的Table

image

建立的第一筆使用者資料

image

登入前的頁面(可以看到MainNavigation還有Logon與Register的項目)

SNAGHTMLaccd40

登入後(MainNavigation已經沒有Logon與Register的項目)

image

 


有關於「MVC Themed App」的說明就講到這裡,其他的地方就可以參照作者的網頁說明內容,

有關Membership的地方,其實並不一定要用它內建的,也是可以自己做一個登入與會員管理,

像我就是比較習慣這樣做,而且它預設的Membership是CodeFirst的,這是我並沒有特別深入的領域,

總之,「MVC Themed App」可作為原本預設MVC Project Template之外的專案範本選擇,

它有不錯的樣式結構,也可以選擇你所喜歡的樣式,除此之外也可以參考它的T4 Template的作法,

提供一個不一樣的MVC專案範本給大家參考參考!

 

參考連結:

Visual Studio Gallery:MVC Themed App
http://visualstudiogallery.msdn.microsoft.com/3f98d8eb-75b8-4913-963a-8d37f4326e88

Introducing the MVC Themed Web App Project Template
http://www.mythicalmanmoth.com/?p=358

 

Web App Theme rails generator

github – web-app-theme
https://github.com/pilu/web-app-theme

線上範例(可以切換內建的多種網站樣式)
http://pilu.github.com/web-app-theme/

 

CodeFirst Membership Provider
http://codefirstmembership.codeplex.com/

 

 

以上

5 則留言:

  1. 請問,
    使用MVC Themed App,
    修改T4 Templates部份顯示內容為中文,
    但是會出現亂碼~

    回覆刪除
    回覆
    1. 你好,我這邊的操作並不會出現亂碼,不曉得你修改 T4 Template 後存檔的檔案編碼為何?須為 UTF-8 編碼。

      刪除
    2. 抱歉,
      應該是裡面的 jquery.dataTables.js 顯示列表筆數及搜尋筆數等(this.oLanguage)修改為中文
      於網頁顯示時會出現亂碼
      我的專案設定是UTF-8,但該如何看「存檔的檔案編碼」..

      刪除
    3. hello, 因為你第一次的詢問內容是提問 T4 Template 相關,直到你再次詢問才知道怎麼操作以及是要處理什麼,既然是修改jQuery.dataTables.js 那就可以很明確知道怎麼解決啦!

      http://www.datatables.net/plug-ins/i18n
      DataTable - Internationalisation,這一頁的內容就有解法,我側試過後是沒有問題的.

      刪除
    4. 感謝您的解惑,已解決了~~^^

      刪除