[.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 "我是一個歡迎方法..."; } } }
讓上面的方法返回一個字串,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>
==============================================================================================