2013年7月6日 星期六

Visual Studio 2013 Preview 的 ASP.NET MVC 5 初體驗

上個月底釋出 Windows 8.1 Preview 與 Visual Studio 2013 Preview 之後，我也跟著搶鮮下載以及安裝，我是安裝在 VM 裡面去體驗，整體的感覺還不錯，尤其是 Visual Studio 2013 Preview，將 Visual Studio 2012 以及歷次 Update 所添加與更新的功能做得更加完整，讓我對 VS2013 的 Release 相當期待。

這一篇文並不是 Visual Studio 2013 與 ASP.NET MVC 5 的教學文章，只是記錄下在 Visual Studio 2013 Preview 裡使用 ASP.NET MVC 5 的體驗以及標示與 ASP.NET MVC 5 之前版本的差異，讓大家可以有個初步的了解，因為目前所釋出的 VS2013 還只是 Preview 版本，所以這一篇文章裡所描述的內容可能與之後所發行的正式版本會有所出入，在這邊先告訴大家。

 

ASP.NET MVC 5 官方教學課程 - Getting Started with ASP.NET MVC 5

http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started

上面的連結是由 ASP.NET 所發表的 ASP.NET MVC 5 官方教學課程，建議各位可以先前往瀏覽。

 

既然 ASP.NET MVC 5 的官方教學課程都已經出來了，那麼我這邊還需要說什麼呢？其實大家都心知肚明，很多人對於英文的文件或是教學內容總是大略的看過而已，並不會詳細地去瀏覽，也有很多開發人員目前所使用的版本還是停留在  ASP.NET MVC 2 或 3，覺得短時間內並不會有機會使用 ASP.NET MVC 4 以上的版本開發，所以都會選擇略過這樣的英文教學內容。

其實我是覺得既使短時間內在工作上不會用到這麼新的版本來開發，但是對於新的技術還是有必要花時間去做了解，現在的網站開發技術翻新的時間是越來越短，可能去年大家很注目、很夯的技術，到了今年卻無聲無息地，甚至於已經被新的技術所取代，版本的更新那就不用多講了，一年之內就有不同版本的更新，新的技術永遠都學不完也追不上，雖然學不完也趕不及，但至少也要花點時間去做個了解，這樣才不會等到真正要用的時候還要花更多的時間去從頭學起，總之要隨時隨地做準備。

 

建立專案

進入正題，網路上已經有很多人陸續發表過文章說明在 VS2013 Preview 開發 ASP.NET MVC 5 有什麼樣的新變化，我這邊會著重幾個比較明顯的變化與不同點來做說明。

首先在「新增專案」裡與以往最大的不同就是不會有分什麼 ASP.NET WebForm 專案或是 ASP.NET MVC 專案，而是只有一個「ASP.NET Web 應用程式」以及「可攜式類別庫」可以選擇，這樣的改變是因應去年所提出的「One ASP.NET」概念，

image

選擇「ASP.NET Web 應用程式」之後就是看要開發什麼樣的 ASP.NET 專案，當選擇 Web Forms 時，其核心參考就會預設選擇 Web Forms，當然也可以再勾選 MVC 與 Web API，

image

如果是 MVC 專案的話，預設核心參考為 MVC 然後可以再去勾選加入 Web Forms 與 Web API，

image

 

以下是新增一個「Web Forms」專案但加入 MVC 與 Web API 資料夾與核心參考的專案結構，

image

以下是新增一個「MVC」專案但加入 Web Forms 與 Web API 資料夾與核心參考的專案結構（這個好像比較看不出有什麼變化），

image

不過當我加入一個 WebForms 的網頁檔案並且設定為啟始頁，

image

此專案的執行結果如下，

image

image

 

看完前面的混合專案，現在則是開啟一個單純的 ASP.NET MVC 5 專案，而 .NET Framework 版本所選擇的是 4.5，建立後的專案結構如下（就跟 ASP.NET MVC 4 差不多），

image

直接執行網站，所看到的網站樣式已經全部使用 Twitter Bootstrap，

image

無論是 MVC 還是 Web Forms 預設的網站樣式改為 Twitter Bootstrap，這個是比較明顯的改變之一，在其他部落格也已經多次講到這部份，所以我就不再多說，而還不熟悉 Twitter Bootstrap 的朋友可以到 Twitter Bootstrap 的官網去做認識，或是可以到「ASP.net MVC 4 網站開發美學」作者之一的 KKBruce（MS MVP）所建立的非官方中文網站去學習。

Twitter Bootstrap 官網

Twitter Bootstrap 非官方中文網站：Bootstrap中文教學 by KKBruce

 

有關 「One ASP.NET」的官方敘述如下：

One ASP.NET

“With the release of Visual Studio 2013, we have taken a step towards unifying our set of experiences so that you should be able to achieve the same set of functionality no matter how you started building your ASP.NET application. For. Eg. You can scaffold Web API’s in a Web Forms project so that you can mix and match technologies of your choice. One ASP.NET is all about making it easier as a developer to do the things you love in ASP.NET. One ASP.NET should give developers the confidence that, no matter what they choose, they are still developing on a trusted underlying framework — ASP.NET.”

http://www.asp.net/vnext/overview/latest/release-notes#TOC6

 

Controller

再來就是另一個比較大的改變「新增 Controller」，在之前版本的 ASP.NET MVC 專案裡要新增一個 Controller 檔案可以在方案總管的 Controllers 目錄以按下滑鼠右鍵後去選擇加入 Controller，

image

或是以新增項目的方式，選擇加入控制器類別，

image

但是在 ASP.NET MVC 5 要新增一個 Controller 時就無法沿用上面的兩種方式，滑鼠右鍵的選單項目裡並沒有「加入 > 控制器」的選項，

image

直接使用加入新項目的方式，也沒有看到控制器的選項，

image

在 ASP.NET MVC 5 裡要加入 Controller 必須要使用 Scaffold（支架），

image

從支架的選項裡去選擇要新增的 Controller 項目，

image

跟以前一樣，除了可以新增一個空白的 Controller 之外，也可以新增一個使用 EF 資料內容並產生 CRUD 內容的控制器，或是新增一個有 CRUD 方法內容的控制器，

image

這邊我選擇建立的是「具有讀取/寫入動作的 MVC 5 控制器」，

image

image

所建立的 Controller 程式內容如下，

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace Mvc5_Project.Controllers
{
    public class FoobarController : Controller
    {
        //
        // GET: /Foobar/
        public ActionResult Index()
        {
            return View();
        }
 
        //
        // GET: /Foobar/Details/5
        public ActionResult Details(int id)
        {
            return View();
        }
 
        //
        // GET: /Foobar/Create
        public ActionResult Create()
        {
            return View();
        }
 
        //
        // POST: /Foobar/Create
        [HttpPost]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here
 
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
 
        //
        // GET: /Foobar/Edit/5
        public ActionResult Edit(int id)
        {
            return View();
        }
 
        //
        // POST: /Foobar/Edit/5
        [HttpPost]
        public ActionResult Edit(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here
 
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
 
        //
        // GET: /Foobar/Delete/5
        public ActionResult Delete(int id)
        {
            return View();
        }
 
        //
        // POST: /Foobar/Delete/5
        [HttpPost]
        public ActionResult Delete(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here
 
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

 

View

建立了 Controller 之後也需要建立 View，如果依照之前版本的作法，最直覺的方式就是在 Controller 程式裡的 Action 方法範圍內去按下滑鼠右鍵然後選擇加入檢視，

image

另一個方式是在 Views 目錄裡 Controller 所對應的目錄上去執行新增項目，

image

但是在 ASP.NET MVC 5 裡面就不能這麼做了，在 Action 方法內按下滑鼠右鍵是看不到加入檢視的選項，

image

有眼尖的朋友應該在前面我在說明 Controller 的時候看到「新增 Scaffold」的項目了有一些檢視的選項，沒錯！在 ASP.NET MVC 5 裡要新增 View 也是需要從 Scafflod（支架）裡面去新增，以 FoobarController 要新增一個 Index View 的步驟如下，

一、先在 Views 目錄裡新增加一個「Foobar」的目錄，以對應 FoobarController

image

二、在 Foobar 目錄按下滑鼠右鍵，並且選擇「加入 > 支架」

image

三、在「新增 Scaffold」裡選擇要加入的檢視

image

支架裡有關檢視的項目有「刪除」「空白」「空白且不含模型」「建立」「清單」「詳細資料」「編輯」，這邊我所選擇建立的是「空白」，

image

按下新增後會出現一個「加入檢視」的視窗，這邊要填入檢視名稱、模型類別、檢視選項等等，這裡就跟之前版本的建立方式類似，

image

這邊有遇到一個問題，就是在之前版本去新增一個 View 的時候，我們可以不用選擇模型類別然後甚至於 Layout（版面配置頁）也可以不用選擇的情況下就可以完成新增一個 View 檔案，

image

但是在 VS 2013 Preview 的 ASP.NET MVC 5 去新增一個空白的檢視，如果不指定模型類別的話，視窗下面的那個「加入」按鍵，這個按鍵的狀態都會是 disable，

image

一定要選個模型類別才會 Enable，

image

這是因為我們在「新增 Scaffold」選擇檢視項目時，所選的檢視項目不同的關係，如果選擇的是加入「空白」檢視，加入檢視時就一定要選擇模型類別，如果想要建立的是一個完全空白的檢視就必須要選「空白且不含模型」，

SNAGHTML3c71db1

這樣在「加入檢視」的視窗中就沒有模型類別的項目，

image

 

Model

前面提到了 Controller 與 View，而 Model 呢？這部份我沒有做太多的研究，應該是在 Code First 下會有一些更改，不過我對 Code First 實在是不熟，而使用 Database First 的情況下則是沒有太大的改變，如果要說的話，那就是 ASP.NET MVC 5 所使用的 Entity Framework 為 6.0 beta 1 ，

image

 

而使用 VS2013 Preview 不是只能開發 ASP.NET MVC 5 而已，一樣可以開發 ASP.NET MVC 4，至於 ASP.NET MVC 4 之前的版本，現在所看到的並沒有項目可選，

image

然後在 VS 2013 Preview 裡面去開發 ASP.NET MVC 4 網站的方式就跟在 VS 2012 裡面開發是一樣的，新增 Controller, View 等內容都還是跟以前一樣，並不會把 ASP.NET MVC 5 Scaffold 那套拿過來用，網站樣式並不會跟著改成 Bootstrap 樣式。

這一篇粗淺的內容就講到這裡，說明了一些 ASP.NET NET MVC 5 的小小變化，讓大家可以對 ASP.NET MVC 5 有一些認識，這些內容是目前 Preview 版本為基礎，在日後的正式發行版本可能會再做修改。

 

延伸閱讀：

ASP.NET vNext : The Official Microsoft ASP.NET Site

ASP.NET Scaffolding Overview : The Official Microsoft ASP.NET Site

ASP.NET Scaffolding with Web Forms : The Official Microsoft ASP.NET Site

Creating ASP.NET Web Projects in Visual Studio 2013 : The Official Microsoft ASP.NET Site

(CodePlex) Entity Framework - Documentation > Roadmap - Entity Framework 6

Visual Studio 2013 Preview Downloads | Microsoft (官方正體中文版下載)

 

以上

張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問，因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過，請多多使用「詢問與建議」(在左邊，就在左邊)，另外比較深入的問題討論，或是有牽涉到你實作程式碼的內容，不適合在留言板裡留言討論，請務必使用「詢問與建議」功能（可以夾帶檔案），謝謝。