無廢話MVC入門教程二[第一個小Demo]
學習.NET MVC 只看在《無廢話系列》足夠了，《無廢話系列》簡單、快速、直接。
本文目標
1.瞭解"模型"、"檢視"、"控制器"的建立、除錯和使用過程。
本文目錄
1.建立模型
2.建立檢視
3.建立控制器
4.除錯
5.使用模型、檢視、控制器
1.建立模型
在資料夾"Models"中建立新類，如下圖所示：
1、命名：Model的命名規則一般以Model結尾，如：以業務為主的命名UserModel或以頁面為主的命名LoginModel。
2、作用：開發過三層的朋友都知道，我們在表示層、業務邏輯層、資料操作層進行資料傳輸的時候會用到的DTO一般都單獨建立成名稱為Model的類庫專案。其實此處的Models資料夾中的類與我們曾經用到的資料傳輸物件本質上是一致的。當然也會有些區別，我們後面再說。
3、程式碼示例：
1 /* 2 * 3 * 建立人：李林峰 4 * 5 * 時 間：2013-2-24 6 * 7 * 描 述：使用者模型 8 * 9 */ 10 11 using System; 12 13 namespace MVC3.Demo.Models 14{ 15 //以業務為主的使用者模式 16 public class UserModel 17 { 18 public int UserID { get; set; } //使用者編號 19 public string UserName { get; set; } //使用者名稱 20 public string Password { get; set; } //密碼 21 public int Sex { get; set; } //性別，0男，1女 22 public int Age { get; set; } //年齡 23 public int Political { get; set; } //政治面貌 24 public int Height { get; set; } //身高 25 public int Weight { get; set; } //體重 26 public string Graduated { get; set; } //畢業院校 27 public string Professional { get; set; } //專業 28 public DateTime GraduatedDate { get; set; } //畢業日期 29 public string Address { get; set; } //現住地址 30 public string Phone { get; set; } //聯絡電話 31 public string ImagePath { get; set; } //頭相地址 32 public string Other { get; set; } //其他描述 33 } 34 35 //以頁面為主的使用者登陸模型 36 public class LoginModel 37 { 38 public string UserName { get; set; } //使用者名稱 39 public string Password { get; set; } //密碼 40 } 41 //以頁面為主的使用者註冊模式 42 public class RegeditModel 43 { 44 public string UserName { get; set; } //使用者名稱 45 public string Password { get; set; } //密碼 46 public int Sex { get; set; } //性別 47 public int Age { get; set; } //年齡 48 } 49 }
2.建立檢視
在建立檢視以前我們先要建立一個名稱為User的資料夾，在User資料夾中建立檢視("Add"-->"View")，如下圖所示：
1、名稱：同以往的名稱一樣，以頁面的功能為主，此處為：Login。
2、模板引擎：此處選擇Razor(原因請看我的上一篇文章)。
3、建立強型別檢視：此處勾選後一拉列表中會自動羅列出我們已建的模型(注意：這裡顯示的只是Build以後的，有時候剛剛建立完Model在此處是沒有的，Build以後才可以出現)，如我們剛才建立的三個Model都會在此處顯示。勾選與不勾選的區別僅僅在於建立後的View檔案中是否存在與Model關聯的程式碼，這點在程式碼塊中我會加註釋說明。
4、框架模板：只有選擇了Model class後此項才是可選的，其中有“建立、刪除、詳細、編輯、空、列表”選擇項，當選擇了其中的某項模板後VS2010會自動生成對應Model的操作程式碼。該功能實際上是VS2010的一個View程式碼生成器。
5、建立部分頁：與傳統的aspx頁面UserControl作用是一樣的，可以一次建立應用在不同的View中。
6、選擇母板頁：可選擇是否選擇母板頁
7、程式碼示例：
1 @model MVC3.Demo.Models.LoginModel 2 <!--如果是建立強型別的檢視並選擇了LoginModel，上面的程式碼則由vs自動生成，僅僅是一段程式碼，手寫的效果是一樣的，所以一般情況我不會勾選“強型別檢視”--> 3 @{ 4 Layout = null; 5 } 6 <!--Layout用於母板頁的佈局，在本系列的第四篇文章中會詳細講解--> 7 <!DOCTYPE html> 8 <html> 9 <head> 10 <title>使用者登陸</title> 11 </head> 12 <body> 13 <!--Html.BeginForm()等同於在html程式碼裡寫<form>.....</form>是一樣的--> 14 @using (Html.BeginForm()) 15 { 16 <div> 17 使用者名稱： 18 </div> 19 <div> 20 <!--建立使用者名稱文字框，等同於<input type="text" />--> 21 @Html.TextBoxFor(model => model.UserName) 22 </div> 23 <div> 24 密碼： 25 </div> 26 <div> 27 <!--建立使用者名稱文字框，等同於<input type="password" />--> 28 @Html.PasswordFor(model => model.Password) 29 </div> 30 <div> 31 <input type="submit" value="登入" /> 32 </div> 33 } 34 </body> 35 </html>
3.建立控制器
在Control資料夾中建立"UserController"，如下圖所示：
1、名稱：必須以Controller結尾。
2、模板：其中有三項可選，分別為“空、使用EF、直接讀寫”，功能類似程式碼生成器，選擇後VS2010自動在建立的類中新增方法程式碼塊。
3、程式碼示例：
1 /* 2 * 3 * 建立人：李林峰 4 * 5 * 時 間：2013-2-24 6 * 7 * 描 述：使用者控制器 8 * 9 */ 10 11 using System; 12 using System.Collections.Generic; 13 using System.Web; 14 using System.Web.Mvc; 15 16 namespace MVC3.Demo.Controllers 17 { 18 public class UserController : Controller 19 { 20 ////系統自動生成，可以刪除 21 //public ActionResult Index() 22 //{ 23 // return View(); 24 //} 25 26 //登陸控制器 27 public ActionResult Login() 28 { 29 return View(); 30 } 31 } 32 }
4、UserControl中包含一個方法Login執行Views/User/Login.schtml並返回。
4.除錯
1、除錯：MVC與傳統的ASPX頁面不同，不能通過“滑鼠右鍵-->瀏覽”直接瀏覽檢視。除錯MVC要在“MVC3.Demo專案-->右鍵點選屬性”設定起始頁，如下圖所示：
2，執行效果：按F5執行，加斷點與傳統的ASPX頁面一樣，如下圖所示。
5.使用模型、檢視、控制器
1.修改LoginControl程式碼如下：
1 /* 2 * 3 * 建立人：李林峰 4 * 5 * 時 間：2013-2-24 6 * 7 * 描 述：使用者控制器 8 * 9 */ 10 11 using System; 12 using System.Collections.Generic; 13 using System.Web; 14 using System.Web.Mvc; 15 16 namespace MVC3.Demo.Controllers 17 { 18 public class UserController : Controller 19 { 20 ////系統自動生成，可以刪除 21 //public ActionResult Index() 22 //{ 23 // return View(); 24 //} 25 26 //登陸控制器 27 public ActionResult Login() 28 { 29 return View(); 30 } 31 32 [HttpPost]//登陸控制器 33 public ActionResult Login(Models.LoginModel loginModel) 34 { 35 if (loginModel.UserName == "張三" && loginModel.Password == "123456") 36 Response.Write("正確！"); 37 else 38 Response.Write("不正確！"); 39 return View(); 40 } 41 } 42 }
在LoginControl中存在兩個同名方法Login，無引數的是在使用者通過位址列開啟登陸視窗時的方法，加了[HttpPost]的方法是使用者點選提交時處理回發時的方法。
2、MVC執行流程圖(粗略)：
3、本例執行流程：
- 使用者在位址列裡輸入http://localhost/User/Login
- 服務端路由解析地址
- 找到Contorls中UserContorl的Login方法(如果是回發則執行帶有[HttpPost]的方法)
- 執行邏輯，此處為判斷使用者名稱和密碼
- 返回相應的檢視