4.建立第一個MVC項目

第2章          Hello MVCWorld

 

內容摘要

• 初始化開發環境
• 建立第一個ASP.NETMVC應用程式
• 控制器、活動和視圖
• 簡單資料訪問

 

本章我們將引入貫穿本書第1部分的樣本程式——GuestBook。通過GuestBook，使用者向網站中發布他們的名字以及訊息，同時可以瀏覽其他使用者發布的訊息。雖然GuestBook比較簡單，但我們將用它學習ASP.NET MVC的核心概念。

本書的第1部分，我們將構建這個樣本。我們將從檢查進行ASP.NETMVC開發所必須的開發工具開始，接下來建立GuestBook網站的初始架構，並研究建立一個MVC程式時，預設產生的組件。最後將學習如何使用Entity Framework 4.1的新特性訪問SQL SERVER COMPACT資料庫。

第3章將在本章內容的基礎上引入視圖的概念，同時介紹如何使用Razor視圖引擎和HTML輔助方法構建使用者介面元素。第4章將會深入學習控制器，同時介紹如何對MVC程式進行單元測試。

現在，我們就開始學習如何搭建開發環境。

2.1 初始化開發環境

在你開始建立GuestBook程式之前，首先要保證你的開發環境已經正確配置。首先你需要安裝Visual Studio 2010。你可以通過以下幾種方式擷取Visual Studio。

• 安裝試用版，：http://www.microsoft.com/visualstudio/en-us/try(本書翻譯時，可以安裝
  VisualStudio 2012試用版了)。
• 使用免費的Visual Web Developer 2010 Express，馬上我們將學習如何安裝它。

在VS2010中，預設提供了ASP.NET MVC2.0,所以你必須安裝獨立的安裝包才能在VS2010中開發MVC3和4應用程式。最簡單的方式就是通過微軟的Web PlatForm Installer安裝。

2.1.1 通過Web PlatForm Installer安裝MVC

Web PlatForm Installer可以協助你非常輕鬆的通過微軟網站安裝不同的組件到你的機器上，其中包括：IIS Express,SQL SERVER EXPRESS,SQL SERVER COMPACT,MVC以及Visual Web Developer Express。

Web PlatForm Installer允許你獨立安裝各個工具，同時你也可以通過Visual Studio sp1 Pack for Visual Studio and Visual Web Developer安裝包一次安裝上述所有工具。你可以在HTTP://www.ASP.NET/MVC中單擊綠色的按鈕下載安裝。2.1。

                             

圖2.1 單擊安裝按鈕將開始下載Web PlatForm Installer,並開始安裝必須的組件 

單擊此按鈕，將下載一個Web PlatForm Installer引導程式，並開始安裝ASP.NET MVC以及其他組件，包括IIS EXPRESS,SQL SERVER COMPACT 4，SQL SERVER EXPRESS和Web Deploy Tool.如果你已經安裝Visual Studio 2010，將會安裝Visual Studio Sp1,反之，將會下載Visual Web Developer 2010
Express 並安裝。（MVC在兩個開發環境中沒有任何差別）。在翻譯本書時，微軟發行Visual Studio 2012，安裝過程與前述一致。

如果你想自訂安裝需要的包，你可以單擊安裝頁面左下角的“Items to Be Installed”按鈕。

如果你不想使用Web PlatForm Installer安裝，你可以收到安裝ASP.NET MVC以及必須的組件。獨立安裝包可以在HTTP://www.ASP.NET/MVC處下載。

Web PlatFormInstaller——不僅局限於微軟技術

除了可以擷取最新版本的微軟的網路工具，還可以利用Web Platform Installer快速安裝許多其他的Web應用程式。包括：基於.NET的應用程式（開源的Umbraco
CMS，DotNetNuke）,使用PHP開發的程式（WordPress，一個流行的部落格平台）。

至此，你應該安裝了開發ASP.NET MVC程式所必須的軟體環境。接下來我們將建立你的第一個應用程式。

2.2 建立第一個MVC應用程式

我們將使用預設範本建立一個新的應用程式，然後讓其顯示一些動態內容。最後我們將查看組成一個標準MVC項目的不同組件。

2.2.1       建立新項目

開啟Visual Studio 2010（或visual Web Developer Express），選擇“檔案”—“建立項目”，2.2。

選擇左邊的“Visual C#”—“Web”，在右邊將出現很多用於Web 應用程式開發的模板，本例中，需要選中ASP.NET MVC 4 WEB 應用程式。如果沒有看到此模板，檢查在對話方塊的頂端，模板架構是否選中.NET Framework 4（是4.5）。

將項目名稱改為：GuestBook，並儲存到恰當的位置。（預設是C:\users\<your username>\Documents\VisualStudio 2010\Projects）。

圖2.2  建立項目對話方塊，此處選擇ASP.NET MVC 4 Web應用程式

單擊“確定”按鈕，Visual Studio將開啟另外一個對話方塊，2.3。

你可以選擇開發所需的模板。“空”模板預設建立空的項目架構，“Internet應用程式”建立了一些基礎的布局和驗證。“Intranet應用程式”有點類似“Internet應用程式”，但是使用Windows驗證，而不是Internet應用程式使用的Forms驗證。簡單起見，選擇“Internet應用程式”模板。

接下來，你可以選擇視圖引擎。本例中，使用預設視圖引擎，即Razor視圖引擎（在MVC3發布時引入）。當然，你也可以選擇傳統的Web Form視圖引擎（在MVC1和2中只能使用此引擎）。我們將會在第3章和17章，更深入學習視圖引擎。

最後，你可以決定是否要建立一個單元測試項目。對大多數程式而言，為了保證程式的正確性，建議建立單元測試項目，並進行單元測試。雖然我們直到第4章才開始學習單元測試的內容，但此處先把單元測試項目一起建立出來。單擊“確定”建立項目。

圖2.3 建立項目對話方塊，你可以選擇項目模板和是否建立對應的測試專案

建立項目成功後，就可以運行項目。你可以通過ctrl+f5快速鍵或者單擊Visual Studio 工具列中的debug，運行項目。這將會啟動ASP.NET Development Server，並在預設的瀏覽器中開啟應用程式。2.4。

圖2.4  建立的項目包含一些預設頁面，可以協助我們快速開始

在我們繼續深入之前，先瀏覽一下預設項目模板中的各個組成部分。

2.2.2       預設項目模板一覽

當你開啟建立的項目，在方案總管中，會發現在預設項目中包含幾個檔案夾和相應的檔案。2.5。

圖2.5  使用預設項目模板建立的項目包含的控制器、模型、視圖和指令檔。

預設項目模板中的每個檔案和檔案夾都擔當不同的角色。接下來將順次學習：

App_Data檔案夾

可以使用App_Data檔案夾存放資料庫、XML檔案或任何其他應用程式所使用的資料。ASP.NET運行時預設支援該檔案夾並阻止使用者直接存取該檔案中的檔案。只有應用程式可以讀寫此檔案夾中的內容。

Content檔案夾

該檔案存放了項目部署時需要的非代碼資源檔。典型資源檔包括圖片和CSS檔案。預設情況下，該檔案夾包含一個網站使用的預設的css檔案（Site.css），還包含一個名為themes子檔案夾，其中放置了jQuery UI（用於使用者介面的用戶端架構，我們將在第7章學習它）需要的一些圖片和css。

Controller檔案夾

回顧一下第1章，控制器充當橋樑作用，它接收請求，處理輸入並選擇一個恰當的活動執行（比如：顯示一個視圖）。在ASP.NET MVC中，控制器以類的形式出現在Controller檔案夾中。在本例中，該檔案夾包含兩個控制器——HomeController(用於處理對Home頁面的請求)，另一個是AccountController（用於處理驗證），我們將會在2.2.3節再次學習控制器。

Model檔案夾

該檔案中包含了表示應用程式商務邏輯核心概念的一些類，或者是為特定視圖封裝資料的一些類（即視圖模型）。隨著應用程式處理功能的增加，你可能更願意用一個類庫項目來存放這些類，但對於一些小型項目而言，將這些類放在本檔案夾是個不錯的選擇。在本例中，只有一個模型類檔案——AccountModels.cs，該檔案定義了預設項目模板中與驗證相關的幾個類。

Scripts檔案夾

你可以把項目中用到的javascript檔案放在此檔案中，本例中，該檔案夾包含很多js檔案，包括開源的jQuery庫（我們將在第7章深入學習jQuery）和用於用戶端驗證的一些指令碼。

Views檔案夾

本檔案夾包括呈現使用者介面用到的模板，每一個模板都表示為一個Razor視圖（以.csHTML為尾碼的檔案），這些檔案放置在特殊命名的子檔案中，這些子檔案夾的名稱與控制這些視圖模板顯示的控制器的名稱相同。如果聽起來有些拗口，不用擔心，我們將會在2.2.3節深入研究控制器、活動和視圖之間的關係。

Global.asax

Global.asax檔案位於網站根目錄下，包含了應用程式啟動時，首先要執行的一些初始化代碼，例如路由註冊代碼（下一節將學習什麼是路由）。

Web.config

Web.config檔案位於網站根目錄下，包含了ASP.NET MVC程式正確運行所必須的配置細節資訊。

至此，我們已經快速的瀏覽了預設項目模板產生的一些檔案夾和檔案。接下來，將會更深入的學習作為核心概念的控制器、活動和視圖之間的互動。在建立我們自己的控制器之前，將使用系統預設建立的HomeController來示範這個互動過程。

2.2.3       控制器、活動和動態顯示

通過第1章的學習，我們知道控制器充當協調員的角色。它可以接受各種輸入，比如通過表單資料或者通過URL，並將委託給特定的視圖呈現頁面。

控制器和活動方法

在ASP.NETMVC中，使用類表示控制器，這些控制器類都繼承自Controller。這些類中的每個方法（即所謂的活動）都與特定的URL想對應。我們將使用Controller檔案夾下的HomeController示範這種映射關係。HomeController類的代碼如下：

代碼2.1  預設的HomeControllerusing System.Web.MVC;namespace Guestbook.Controllers{public class HomeController : Controller         {public ActionResult Index()                        {ViewBag.Message = "Modify this template to jump-start";return View();}public ActionResult About(){ViewBag.Message = "Your quintessential. . . ";return View();}public ActionResult Contact(){ViewBag.Message = "Your quintessential contact. . . ";return View();}}}

 HomeController是非常簡單的控制器類，如果一個類繼承自Controller而且類名以Controller為尾碼，則說明該類是控制器類。

該類還有其他的兩個活動方法。活動是控制器類中的公用（public）方法，用來處理特定的URL請求。在此處，活動被命名為Index和About。由於這些活動在HomeController類中，所以可以通過以下URL:/Home/Index和/Home/About分別訪問。如果你的網站的網域名稱為MySite.com，那麼訪問Home活動的完整的URL就是HTTP://MySite.com/Home/Index。如果使用者在瀏覽器的地址欄中輸入以上URL，ASP.NET
MVC架構就會初始化一個HomeController類的執行個體，而且會調用其中的Index活動方法。

路由機制——映射URL到活動

你可能會問，架構是如何知道將特定的url映射到對應的控制器活動的呢？你可以通過查看Global.asax檔案的RegisterRoutes方法找到答案，該方法定義了路由規則，指定了如何將URL映射到一個控制器或活動。下面是該方法的定義。

代碼2.2 路由定義public static void RegisterRoutes(RouteCollection routes){routes.IgnoreRoute("{resource}.axd/{*pathInfo}");routes.MapHTTPRoute(name: "DefaultApi",routeTemplate: "api/{controller}/{id}",defaults: new { id = RouteParameter.Optional });routes.MapRoute(name: "Default",url: "{controller}/{action}/{id}",defaults: new { controller = "Home",action = "Index", id = UrlParameter.Optional });}

 

 DefaultApi程式碼片段是專門針對Web API的，我們將在第24章深入學習。在代碼中我們看到定義了兩個入口，第1個是IgnoreRoute，主要用於通知架構匹配一些特殊的路徑，此處告知架構不應處理任何以.axd為尾碼的檔案，比如Trace.axd。第2個是MapRoute，定義了URL的處理方式。預設的路由暫時可以滿足我們的需要，但以後你可以添加更多的路由規則以映射應用程式特定格式的url。

每個路由都有一個名稱①，一個url定義模式②和可選擇的預設值③。當我們請求“/”時，它不匹配任何URL片段，所以將使用預設值：

• Controller——“Home”
• Action—“Index”
• id——可選，可以在url中省略掉id。

由於有預設值的存在，你可以省略部分url片段，但實現相同的效果。再一次假設你的網站網域名稱是MySite.com，以下url:HTTP://MySite.com/Home/Index，HTTP://MySite.com/Home和HTTP://MySite.com都將會觸發HomeController的Index活動方法。

注意：

路由模板{controller}/{action}/{id}是一個通用的路由，可以用來響應不同的Web請求。用花括弧{}表示的標記和單詞將匹配MVC架構能夠理解的值。

我們感興趣的最通用的值是controller和action。Controller路由值由架構傳遞給controller factory，用於執行個體化控制器。這也將是本章剩餘的內容要使用的路由，所以我們將使用如下格式的url， HTTP://網域名稱/controllername/actionname。我們將在第9章更深入學習路由。

在代碼2.1中，Index活動方法包含兩行代碼：

ViewBag.Message ="Modify this template to jump-start your ASP.NET MVC application.";

return View();

第1行代碼向ViewBag隨意指定了一些文本。第2行通知架構應該呈現一個視圖。

ViewBag本質上是一個字典（Dictionary）資料結構，它用來儲存資料，這些資料以後可以在視圖中訪問。它使用了.NET4中的動態語言特性，可以在其中快速的定義屬性。例如你只需要一行代碼就可以為ViewBag添加另一個屬性：

public ActionResult Index()

{

ViewBag.Message ="Modify this template to jump-start your ASP.NET MVC

application.";

ViewBag.CurrentDate =DateTime.Now;

return View();

}

這裡我們為ViewBag建立了一個屬性CurrentDate，用來儲存當前的日期和時間。我們不用修改類的定義就可以快速建立該屬性。現在我們就可以在視圖中訪問該屬性了，當我們調用return view()語句時，視圖將呈現。

View()方法（傳回值是一個ViewResult的執行個體）通知架構應該呈現一個視圖。此處，我們並沒有指定要呈現的視圖的名稱，因此架構將嘗試尋找項目Views檔案夾下面的與控制器同名（此處為Home）的子檔案夾，並調用與活動名稱（即Index）相同的視圖，然後呈現。

視圖

在圖2.4中，你會發現在Views/Home子檔案夾中，確實存在一個名為Index.csHTML的檔案。開啟後，你會看到如下標記語言：

@{

ViewBag.Title ="Home Page";

}

@section featured {

<sectionclass="featured">

<div class="content-wrapper">

<hgroup class="title">

<h1>@ViewBag.Title.</h1>

<h2>@ViewBag.Message</h2>

</hgroup>

<p>The current date is@ViewBag.CurrentDate.ToLongDateString()</p>

<p>

To learn more about ASP.NET MVC visit <ahref="HTTP://ASP.NET/

MVC" title="ASP.NET MVC Website">HTTP://ASP.NET/MVC</a>.

   ...

</p>

</div>

</section>

}

…

Index視圖中混合了C#代碼和HTML標記語言，檔案的頂端包含的代碼塊用來設定頁面的標題，同時在<h2>元素中顯示訊息，通過調用@ViewBag.Message將在控制器中設定的ViewBag的Message屬性的內容輸出。

你還可以修改視圖以顯示我們添加到ViewBag中的CurrentDate屬性資訊。只需要添加如下代碼即可：

<p>Thecurrent date is @ViewBag.CurrentDate.ToLongDateString()</p>

注意@首碼用於在C#代碼和HTML標記之間轉換。最終顯示結果2.6。

圖2.6  在頁面顯示ViewBag中自訂的內容

我們通過預設的HomeController示範了在MVC項目中控制器和視圖的基本用法，但只是向頁面輸出一個簡單的字串訊息是沒有多大的吸引力的，下一節我們將為應用程式添加互動功能，將允許使用者通過程式添加一些資訊條目到GuestBook。