MVC自學第二課

時間 2019-12-08

標籤 mvc 自學第二简体版

原文原文鏈接

鑑賞一個軟件開發框架最好的辦法是投入其中並使用它。本課將使用ASP.NET MVC框架建立一個簡單的數據錄入應用程序。爲簡化起見，本課涉及到的一些技術細節在這裏可能會跳過，會在之後的課程中再詳細說明。html

建立ASP.NET MVC 新項目

打開VS，在「文件」菜單中選擇「新建項目」，咱們選擇「ASP.NET MVC 3 Web 應用程序」以下圖瀏覽器

將這個項目的名稱設置爲PartyInvties, 並點擊「肯定」按鈕，你將看到另外一個對話框，以下圖所示。它讓你在三個不一樣的MVC項目模板之間進行選擇。框架

「Empty(空)」模板選項只建立一個MVC 3 應用程序所須要的最少文件和文件夾。
「Internet應用程序」選項建立一個小型的例子應用程序，你能夠在它上面進行修改，並創建其餘功能。它包括了用戶註冊與認證、導航、以及一個風格一致的視覺樣式等。
「Intranet應用程序」選項相似於「Internet應用程序」，但它是爲經過域/活動目錄體系結構進行用戶認證的環境而設計的。

如今，選擇「空」模板選項，讓「使用HTML5語義標記」複選框爲不選，點擊肯定按鈕以建立這個新項目。佈局

一旦VS建立了這個項目，你將在「解決方案資源管理器(Solution Explorer)」窗口中看到以下文件和文件夾，這是MVC 3項目默認的結構。spa

如今，直接F5試着運行一下這個應用程序，將會看到以下圖所示的結果。翻譯

此應用程序還沒有包含任何能夠運行的東西，所以會看到一個」404——未找到資源「的提示屏幕。設計

添加一個控制器

在MVC體系結構中，傳入的請求是由控制器處理的。在ASP.NET MVC中，控制器只是簡單的C#類(一般繼承自System.Web.Mvc.Controller，這是.NET框架內建的控制器基類)。在控制器中的每個public方法都稱爲一個動做方法，也就是你能夠用某個URL經過Web來調用它，以執行一個動做。MVC約定，把控制器放在一個名爲Controllers文件夾中，這是VS在創建項目時爲咱們自動建立的。3d

要把一個控制器添加到項目，右擊VS的「解決方案資源管理器」中的Controllers文件夾，並從彈出的菜單中選擇「添加」——「控制器」，以下圖所示調試

當「添加控制器」對話框出現時，將其命名爲「HomeController」，以下圖所示。這是一個約定：控制器的命名應當是有含義的，並以「Controller」結尾。code

這個對話框的「基架選項」部分容許開發者用一個帶有常規功能的末班建立一個控制器。這裏暫時不適用這一特性，所以，確保在「模板」列表中選擇了「空控制器」條目。

點擊添加按鈕，以建立這個控制器。VS會在Controller文件夾中建立一個新的C#代碼文件，其名稱爲」HomeControllers.cs「，打開它以編輯。你能夠看到這個類的名稱爲」HomeController「，並且，它派生於System.Web.Mvc.Controller。

using System.Web.Mvc;

namespace PartyInvites.Controllers
{
    public class HomeController : Controller
    {
       
        public string  Index()
        {
            return "Hello World";
        }

    }
}

個示例沒有建立任何實際意義的東西，但這是MVC的一個良好開端。上面的代碼中建立了一個名爲」Index」的動做方法，它返回字符串」Hello World「。啓動調試，會在瀏覽器中顯示這個動做方法的結果，以下圖所示

理解路由

同模型、視圖、控制器同樣，MVC應用程序也使用ASP.NET 的路由系統(Routing System)，它決定如何把URL映射到特定的控制器和動做上。

當VS建立MVC項目時，它添加了一些默認的路由，以使開發者可以開始工做。你能夠請求一下任何一個URL，它們都將被引向HomeController的Index動做上。

http://localhost:3316/

http://localhost:3316/Home/

http://localhost:3316/Home/Index

在MVC中，客戶端的所請求的URL是被映射到相應的Controller去，而後由Controller來處理業務邏輯，或許要從Model中取數據，而後再由Controller選擇合適的View返回給客戶端。再說回前面咱們運行的ASP.NET MVC程序訪問的http://localhost:3316/Home/Index這個URL，它訪問的實際上是HomeController中的Index這個Action，見下圖：

MVC遵循的路由約定你能夠打開Global.asax.cs文件來查看和編輯路由配置

咱們能夠看到這裏定義了一個名爲"Default"的路由，還定義了默認的參數。默認參數的意義在於，當咱們訪問例如http://localhost:3316/的URL的時候，他會將不存在的參數用默認的參數補上，也就是至關於訪問http://localhost:3316/Home/Index同樣。

後面的課程還會詳細講解路由的配置和原理。

渲染Web頁面

前面的例子的輸出並非HTML，只是一個字符串」Hello,World「。爲了產生一個對瀏覽器請求響應的HTML，須要建立一個視圖(View)。

建立並渲染一個視圖

修改以前的控制器以渲染一個視圖

using System.Web.Mvc;

namespace PartyInvites.Controllers
{
    public class HomeController : Controller
    {
        public ViewResult Index()
        {
            return View();
        }
    }
}

當咱們從一個動做方法返回一個ViewResult對象時，即是在指示MVC去渲染一個視圖。經過調用不帶參數的View方法來建立這個ViewResult。這告訴MVC爲這個動做去渲染一個默認視圖。

若是此時運行這個應用程序，你能夠看到，MVC框架正試圖查找要用到的默認視圖，並顯示以下圖所示的錯誤信息

從這個錯誤提示中咱們能夠看出，MVC試圖在」View「文件夾中查找叫Index的文件，以前咱們建立的示例的動做方法叫作」Index「，再聯繫MVC的路由工做原理，到這裏咱們視乎明白了一些。

用戶在瀏覽器的地址欄中輸入http://localhost:3316/Home/Index的一個URL請求，MVC路由會對這個URL進行解析，Home對應咱們建立的HomeController控制器，Index對應該控制器內的Index方法，Index方法返回的是一個ViewResult對象，這其實就是在告訴MVC去渲染一個視圖(默認視圖【路由已配置】)，可是MVC貌似在應用程序中沒有找到相關的視圖，因此就會報出以上的錯誤。

爲了建立一個視圖，右擊HomeController.cs代碼中的動做方法(在方法名上或方法體內)，並從彈出菜單中選擇」添加視圖「，打開」添加視圖「對話框，以下圖所示

去掉」使用佈局或母版頁「複選框。點擊」添加「按鈕，VS將在View/Home文件夾中建立一個名爲」Index.cshtml」的視圖文件，若是返回上面圖中的顯示錯誤信息，你便能明白，剛剛建立的這個文件與它搜索的某個位置是匹配的。

（cshtml文件擴展名錶示是一個由Razor[原諒我不知道怎麼翻譯這個單詞，確實沒找到合適的單詞]處理的C#視圖。MVC的早期版本創建在ASPX視圖引擎之上，視圖文件爲.aspx擴展名）

打開Index.csHtml文件，你將看到以下所示的內容

把以下代碼添加到Index.cshtml中

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
</head>
<body>
    <div>
       你好！哈哈O(∩_∩)O哈哈~(來自視圖！)
    </div>
</body>
</html>

(這裏用HTML標記顯示出來的信息，而不是前面那種由動做方法顯示的字符串消息)

直接F5運行這個應用程序，能夠看到相似→ →圖所示的內容。

本課最初建立Index動做方法時，它返回一個字符串值，這意味着，MVC除了把這個字符串傳遞給瀏覽器以外，未作其餘事情。如今Index方法返回一個ViewResult，這是指示MVC渲染一個視圖並返回HTML。Index.ashtml中的代碼並未告訴MVC應該使用哪一個視圖，其實它使用了命名約定，以自動一個視圖。這個約定是，視圖具備動做方法的名字，並位於以控制器命名的文件夾中——View/Home/Index.ashtml。

除了字符串和ViewResult對象以外，還能夠從動做方法返回其餘結果。例如，若是返回一個RedirectResult，可使瀏覽器被重定向到另外一個URL;若是返回一個HttpUnauthorizedResult，會強迫用戶進行登陸。這些對象統稱爲動做結果(Action Result)，並且它們都是從ActionResult類派生而來的。動做結果系統是開發者可以封裝並重用動做中經常使用響應。

好了，這節課就說到這裏。後面繼續！！！