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

yubinfeng發表於2016-02-28

[.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; }
}

到這裡一個模型建立完成。

6.總結:

本篇內容非常容易理解,介紹了MVC6基本的控制器、檢視、模型的建立及最簡單的路由設定,雖然基礎,但這些是我們學習MVC的基礎,後面有機會繼續再介紹MVC的應用。

7.完整原始碼下載

Git地址:https://github.com/yubinfeng/BlogExamples

==============================================================================================

返回目錄

<如果對你有幫助,記得點一下推薦哦,如有有不明白或錯誤之處,請多交流>

<對本系列文章閱讀有困難的朋友,請先看 《.net 物件導向程式設計基礎》 和 《.net 物件導向程式設計進階》 >

<轉載宣告:技術需要共享精神,歡迎轉載本部落格中的文章,但請註明版權及URL>

.NET 技術交流群:467189533 .NET 程式設計

==============================================================================================

相關文章