ASP.NET MVC5（VS 2019）邊做邊學（01）創建項目&控制器與視圖的關係

ASP.NET MVC模式已經逐步取代傳統的WebForm模式，今天直接動手，邊做邊學，來探索MVC。

首先安裝Visual Studio 2019，這種軟件建議安裝最新版。

官網地址：https://visualstudio.microsoft.com/zh-hans/vs/ ，一般下載professional版即可

安裝過程忽略，務必勾選安裝“ASP.NET和Web”和你會用的語言

第一步：創建項目

新建項目，選擇“ASP.NET Web 應用程序（.NET Framework）”

下一步，填寫項目名稱，選擇目錄，選擇.NET版本（暫選4.5），點擊創建

選擇MVC模式。右側的Web窗體如果勾選，則實現兼容WebForm，這裏不選。

點擊創建，等待幾秒，然後可以看到項目目錄。

主要的目錄結構如下

此刻，先執行生成解決方案，然後打開調試（建議在本機IIS設置項目目錄站點），看到已有的首頁內容

這是新項目自動創建的首頁和示例內容，VS已自動內置了jquery和bootstrap3.4，所以可以看到熟悉的bootstrap排版

現場的示例代碼不要刪掉，來分析一下。

我們看到的內容，都是View呈現出來的html內容，而View是由Controller操作的

展開Controller和View目錄，可以發現如下文件

名爲Home的控制文件和視圖目錄，視圖目錄中有：關於、聯繫、首頁三個文件，目測與首頁導航的鏈接對應，分別打開三個cshtml文件，可以驗證確實對應。再打開HomeController.cs文件，看到3個ActionResult的function，名稱也是對應這3個文件。

那麼，第一個問題，首頁目錄名爲什麼是Home，不應該是Index嗎？

其實，這是路由配置的結果，MVC與Webform最直接的區別就是URL路徑，MVC站點你訪問 /abc，實際不存在 /abc這個物理文件，而是訪問了控制層的 /abc，然後控制層反饋給你一個View讓你在瀏覽器看到。

路由配置在App_Start目錄下的RouteConfig.cs，打開後可以看到如下代碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace sky
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

這裏配置了一個默認路由 url: "{controller}/{action}/{id}"，同時可以看到Home被設定爲默認控制，Index被設定爲默認action。

關鍵的 url: "{controller}/{action}/{id}"

可以初步理解爲：站點URL中的二級目錄爲控制層名稱，三級目錄名是該控制層下的一個action名稱，再下級的id是該action的參數（參數是可選的）

舉例：按傳統WebForm的思路，你的網站有個管理員目錄名爲 admin，目錄下有個登錄頁，名爲 login.aspx

這樣的情況，在MVC中的做法是：首先在Controllers目錄中創建一個 admin的controller文件，按命名規則應是 adminController.cs，並在這個cs文件中寫一個 login的函數；接着，在View目錄下，創建名爲admin的目錄，在admin目錄下創建名爲 login.cshtml 的視圖文件，然後當你在瀏覽器提交 /admin/login 的時候，程序會執行 adminController對象中的名爲 login的函數，然後該函數返回指定的視圖給你，如無特別指定，就給你對應視圖層中的對於內容 View/admin/login.cshtml

我來畫個流程圖：

控制器的作用是很大的，它可以接收用戶請求的參數，處理數據，可以與Model層連接獲取數據，然後根據業務邏輯把數據傳輸到視圖。

在渲染視圖上，控制層並不是只能返回對應的視圖，也可以自定義返回其他視圖，甚至僅返回一串字符。

下面，我們來動手嘗試一下：

1、在Controllers目錄上右鍵，新建--控制器，然後選擇 MVC5控制器-空，取名爲 adminController

然後，在Views下創建 admin 目錄，右鍵admin目錄，添加-視圖，名爲 Index （暫不勾選佈局頁）

打開視圖文件後，我們在<div>標籤中輸入你好： @ViewBag.msg ，這是 admin/login 的視圖內容，代碼如下：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        你好： @ViewBag.msg ，這是 admin/index 的視圖內容
    </div>
</body>
</html>

解釋一下：

1、最頂部的代碼是微軟提供的 Razor代碼，主要是應用在視圖文件中的服務器端標記語言。Layout = null 表示該視圖不使用佈局頁。

2、@ViewBag.msg 是控制層向視圖層傳輸數據的一種方式，還有ViewDate等其他方式。

下面，我們來打開控制層文件 adminController.cs，看到代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace sky.Controllers
{
    public class adminController : Controller
    {
        // GET: admin
        public ActionResult Index()
        {
            return View();
        }
    }
}

解析：

1、頂部引用了 System.Web 和System.Web.Mvc

2、主類繼承 Controller

3、Index()的類型爲 ActionResult，這類需要返回一個 View()，如果你僅需要返回一串字符，那就可以把ActionResult改爲string

4、剛纔我們在視圖文件中輸入了 @ViewBag.msg ，這是控制層向視圖傳輸數據的方式，因此，我們在控制層代碼中要通過@ViewBag傳一個數據，我們在return View();之前加一句代碼，修改代碼爲如下：

public ActionResult Index()
{
      @ViewBag.msg = "聰明的孩子";
      return View();
}

接着，我們編譯一下，然後瀏覽器訪問 /admin/ ，我們看到頁面輸出了：

由於是Index，所以URL中不需要輸入index

此刻，已經初步理解了控制層與視圖的關係，我們來嘗試一下 /admin/login

1、Views/admin 下創建名爲 login的視圖文件，html中寫一句：這是 /admin/login 的視圖

2、adminController.cs文件中增加 login() 函數，增加後的adminController.cs如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace sky.Controllers
{
    public class adminController : Controller
    {
        // GET: admin
        public ActionResult Index()
        {
            @ViewBag.msg = "聰明的孩子";
            return View();
        }

        public ActionResult login()
        {
            return View();
        }
    }
}

3、執行編譯，然後瀏覽器訪問 /admin/login，可以看到渲染的頁面