[.net 物件導向程式設計深入]（6）.NET MVC 6 —— 模型、檢視、控制器、路由等的基本操作

yubinfeng發表於2016-02-28

物件程式設計MVC模型路由

[.net 物件導向程式設計深入]（6）.NET MVC 6 —— 模型、檢視、控制器、路由等的基本操作

1. 使用Visual Studio 2015建立Web App

（1）檔案>新建>專案，選擇Web>ASP.NET Web 應用程式

（2）在新專案MyFirstWebApp對話方塊中，選擇ASP.NET 5模板>Web Application

由於是RC版，這裡的”新增單元測試“暫時不能選，上面的WebForms MVC WebAPI將合併，前面一節介紹過了，因此也不需要再選。點確定，完成一個MVC6專案建立。

（3）執行專案

F5在除錯模式下執行，或 Ctrl+F5非執行模式下執行

小技巧：啟動應用程式 Ctrl+F5（非除錯模式）允許您更改程式碼，檔案儲存，重新整理瀏覽器，檢視程式碼的變化。很多開發者喜歡使用非除錯模式來快速啟動應用程式並檢視變化。

預設專案是一個響應式的頁面，當瀏覽器視窗縮小或在小螢幕裝置上開啟時，可以看到導航顯示，如下：

2.專案結構

我們先看一下MVC6和MVC5的專案結構差異：

下面是MVC5專案結構

下面是MVC6專案結構

可以，看到和MVC5相比，專案結構差異比較大

(1)專案檔案變成了xproj(MVC5專案檔案是csproj)

(2)程式配置檔案變為config.json(MVC5則是web.config)

(3)增加了project.json 主要用於專案配置，負責程式集、專案部署設定，部分功能類似於MVC5的package.config.

(4)package.json 這個檔案在MVC6中是NPM的配置檔案，基於Nodejs的包管理器。

(5)gulpfile.js 是gulp配置檔案，gulp是基於Nodejs的Javascript工作管理員，在ASP.NET 5中主要管理NPM和Bower中的內容。

(6)Stratup.cs 程式啟動入口，類似於原來的Global.asax

(7)Project_Readme.html 專案說明檔案，沒什麼具體作用。

(8)wwwroot 靜太資原始檔（如css,images,js等）的存放目錄

(9)Dependencies Bower和NPM的依賴管理包。

(10)References 程式集引用，和以前類似，但現在有版本區分(如ASP.NET 5.0 和ASP.NET Core 5.0)

想深入瞭解MVC6專案結構的朋友，可以參考文章：http://www.cnblogs.com/TomXu/p/4496407.html

3.新增控制器(Controller)

在專案資料夾Controllers右擊，選新增>新建項

在開啟的對話方塊中，選擇MVC控制器類，取名HelloWorldController.cs

我們開啟剛才建立的控制器HelloWorldController.cs更改為如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Mvc;

// For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860

namespace MyFirstWebApp.Controllers
{
    public class HelloWorldController : Controller
    { 

        // GET: /HelloWorld/ 

        public string Index()
        {
            return "這是我的預設動作...";
        }

        // 
        // GET: /HelloWorld/Welcome/ 

        public string Welcome()
        {
            return "我是一個歡迎方法...";
        }
    }
}

View Code

讓上面的方法返回一個字串，F5執行，然在地址後面加上helloworld，重新整理一下瀏覽器，效果如下：

我們開啟Startup.cs檔案，看一下路由

先找到如下程式碼:

路由設定的是預設控制器=Home,方法預設為 Index 引數預設為 id

路由設定格式為：/[Controller]/[ActionName]/[Parameters]

我們上面指定的控制器，則開啟預設的方法Index,如果我們指定方法，執行結果如下：

接著我們看一下引數：

增加如下方法到HelloWorldController.cs

  public string Welcome2(string name, int ID = 1)
  {           
            return HtmlEncoder.Default.HtmlEncode(
                "hello,name:" + name + ",id:" + ID);
 }

注意：上面使用的程式碼htmlencoder.default.htmlencode保護應用程式免受惡意輸入（如JavaScript）。

ID有一個預設值，我們傳入引數ID時，預設顯示1

傳入兩個引數：

4.新增檢視（View）

（1）先在專案的View目錄上建立一個跟控制器同名的資料夾 HelloWorld

比如：檢視名為HelloWorld，則對應的控制器名為：HelloWorldController

（2）在檢視資料夾HelloWorld中建立檢視名為：ViewShow.cshtml,

替換檢視檔案如下：

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

並在HelloWorldController,新增同名方法，程式碼如下：

 public IActionResult ViewShow()
 {
      return View();
 }

然後執行如下圖所示地址：

控制器方法View() 為返回檢視

5.新增模型（Modle）

模型新增實際是新增一個類檔案，這裡只是簡單建立一個實體，後面會完整介紹

右擊專案資料夾Models,新增一個類檔案，名為：Movie.cs

內容如下：

public class Movie
{
    public int ID { get; set; }
    public string Title { get; set; }
    public DateTime ReleaseDate { get; set; }
    public string Genre { get; set; }
    public decimal Price { get; set; }
}