ASP-NET-MVC3中文版教程

ASP NET MVC3 快速入門快速入門 第一節(jié)第一節(jié) 概述概述 1 11 1 本教程的學(xué)習(xí)內(nèi)容本教程的學(xué)習(xí)內(nèi)容 在本教程中 你將學(xué)會如下內(nèi)容 如何創(chuàng)建一個 ASP NET MVC 的工程 如何創(chuàng)建 ASP NET MVC 的控制器 controller 與視圖 view 如何使用 Entity Framework code first 范例來創(chuàng)建一個新的數(shù)據(jù)庫 如何獲取和顯示數(shù)據(jù) 如何編輯數(shù)據(jù)并且進行數(shù)據(jù)的有效性驗證 1 21 2 創(chuàng)建工程創(chuàng)建工程 如果要創(chuàng)建一個 ASP NET MVC3 的工程時 首先運行 Visual Web Developer 2010 Express 并且在起始頁 start page 中選擇 新建項目 Visual Web Developer 是一個集成開發(fā)環(huán)境 你可以使用它來進行各種應(yīng)用程序的開 發(fā) 在 Visual Web Developer 的菜單的下面有一個工具條 可以直接點擊工具條中的各個 工具按鈕來進行各種操作 也可以直接點擊菜單中的各個菜單項來進行各種操作 此處我 們點擊 文件 菜單中的 新建項目 菜單項 圖 1 1 Visual Web Developer 2010 Express 中的起始頁 1 31 3 創(chuàng)建你的第一個應(yīng)用程序創(chuàng)建你的第一個應(yīng)用程序 你可以使用 Visual Basic 或 Visual C 作為開發(fā)語言來創(chuàng)建應(yīng)用程序 在本教程中 選擇 C 來作為開發(fā)語言 點擊 新建項目 菜單項后 在打開的 新建項目 對話框中 雙擊左邊的 Visual C 使其成為展開狀態(tài) 然后點擊 Web 點擊右邊的 ASP NET MVC 3 Web 應(yīng)用程序 然后在下方的名稱文本框中填入應(yīng)用程序的名稱 在本教程中命 名為 MvcMovie 然后點擊確定按鈕 圖 1 2 在新建項目對話框中選擇 ASP NET MVC3 應(yīng)用程序并為應(yīng)用程序命名 在接下來打開的 新 ASP NET MVC 3 項目 對話框中 點擊選中 Internet 應(yīng)用程 序 在 視圖引擎 下拉框中保持默認(rèn)的 Razor 選項不作修改 Razor 視圖是 ASP NET MVC3 種新增的一種十分重要的視圖類型 使用它可以使得 Web 應(yīng)用程序的開發(fā)變 得更加方便快捷 在后文中將對此進行詳細介紹 圖 1 3 選擇項目模板與視圖引擎 點擊確定按鈕 Visual Web Developer 會為你所創(chuàng)建的 ASP NET MVC 項目提供一個默 認(rèn)模板 這樣的話你就擁有了一個可以立刻運行的應(yīng)用程序 默認(rèn)的模板中提供的是一個 很簡單的顯示 歡迎使用 ASP NET MVC 文字的應(yīng)用程序 你可以以此作為你的開發(fā)起點 圖 1 4 Visual Web Developer 提供了一個默認(rèn)的應(yīng)用程序模板 點擊 調(diào)試 菜單中的 啟動調(diào)試 菜單項 該菜單項的快捷鍵為 F5 Visual Web Developer 將啟動一個內(nèi)置的服務(wù)器 并且在該服務(wù)器中打開當(dāng)前 Web 應(yīng)用程序的主頁 如圖 1 5 所示 圖 1 5 ASP NET MVC3 的默認(rèn)應(yīng)用程序模板的調(diào)試畫面 請注意該頁面在瀏覽器中的地址為 http localhost 4423 其中 localhost 代表了本機上你剛剛創(chuàng)建的 Web 應(yīng)用程序的臨時網(wǎng)站地址 4423 代表了 Visual Web Developer 使用的一個隨機端口 每次調(diào)試的時候 Visual Web Developer 都會使用這個 端口來作為內(nèi)置服務(wù)器的端口號 在各計算機上 該端口號都是不相同的 因為該端口號 是 Visual Web Developer 隨機選擇的 在這個模板應(yīng)用程序的頁面的右上角 提供了兩個按鈕與一個 登錄 鏈接 點擊 登錄 鏈接 頁面跳轉(zhuǎn)到登錄頁面 點擊 主頁 按鈕 頁面返回到主頁 點擊 關(guān)于 按鈕 頁面跳轉(zhuǎn)到 關(guān)于 頁面 接下來 讓我們開始逐步將這個默認(rèn)的應(yīng)用程序修改為我們所要的應(yīng)用程序 在這個 過程中逐步了解 ASP NET MVC 3 的有關(guān)知識 首先 讓我們關(guān)閉瀏覽器并開始代碼的修改 工作 第二節(jié)第二節(jié) 添加一個控制器添加一個控制器 MVC 的全稱為 model view controller 模型 視圖 控制器 MVC 是一種開發(fā)應(yīng)用程序 的模式 這個模式已經(jīng)具有了很好的框架架構(gòu) 并且十分容易維護 使用 MVC 開發(fā)出來的 應(yīng)用程序一般包括以下幾塊內(nèi)容 控制器 Controller 控制器類處理客戶端向 Web 應(yīng)用程序發(fā)出的請求 獲取數(shù) 據(jù) 并指定返回給客戶端 用來顯示處理結(jié)果的視圖 模型 Model 模型類代表了應(yīng)用程序的數(shù)據(jù) 這些數(shù)據(jù)通常具有一個數(shù)據(jù)驗證 邏輯 用來使得這些數(shù)據(jù)必須符合業(yè)務(wù)邏輯 視圖 View 視圖類是 Web 應(yīng)用程序中用來生成并顯示 HTML 格式的服務(wù)器端對 客戶端請求的響應(yīng)結(jié)果的模板文件 在本教程中 將全面介紹這些概念 并且向你展示如何利用它們來搭建一個應(yīng)用程序 首先 讓我們來創(chuàng)建一個控制器 controller 類 在解決方案資源管理器中 鼠標(biāo)右 擊 Controllers 文件夾 并且點擊添加 控制器 如圖 2 1 所示 圖 2 1 添加控制器 在彈出的 添加控制器 對話框中 將控制器命名為 HelloWorldController 然后 點擊添加按鈕 如圖 2 2 所示 圖 2 2 命名控制器 觀察解決方案資源管理器中新增加了一個文件 名字為 HelloWorldController cs 并且該文件呈打開狀態(tài) 如圖 2 3 所示 圖 2 3 控制器代碼 修改打開的 HelloWorldController cs 文件 在 HelloWorldController 類中 創(chuàng)建如 代碼清單 2 1 中所示的兩個方法 控制器將返回一個 HTML 格式的字符串 代碼 2 1 控制器中創(chuàng)建方法 public class HelloWorldController Controller GET HelloWorld public string Index return 這是我的默認(rèn)action GET HelloWorld Welcome public string WelCome return 這是我的 Welcome 方法 在這個修改后的 HelloWorldController 控制器中 第一個方法名為 Index 現(xiàn)在讓我 們從瀏覽器中調(diào)用該方法 運行應(yīng)用程序 按 F5 鍵或 Ctrl F5 鍵 在打開的瀏覽器中的 地址欄后面 添加 HelloWorld 路徑 譬如 在我的計算機上 瀏覽器中地址為 http localhost 4423 HelloWorld 畫面顯示如圖 2 4 所示 由于在 Index 方法中 直接返回了一個 HTML 格式的字符串 所以在瀏覽器中將該字符串顯示出來 圖 2 4 HelloWorldController 控制器中 Index 方法的運行結(jié)果 在 ASP NET MVC 中 可以根據(jù)瀏覽器中的輸入地址來調(diào)用不同的控制器或控制七種不 同的方法 ASP NET MVC 的默認(rèn)的映射邏輯使用如下所示的格式來決定應(yīng)該調(diào)用什么控制 器或控制器中的什么方法 Controller ActionName Parameters URL 地址的第一部分決定調(diào)用哪個控制器類 所以 HelloWorld 映射到 HelloWorldController 控制器類 第二部分決定調(diào)用控制器中的哪個方法 所以 HelloWorld Index 將會調(diào)用 HelloWorldController 控制器類的 Index 方法 由于 Index 方法是控制器類的默認(rèn)方法 可以另外指定控制器類的默認(rèn)方法 所以也可只輸 入 HelloWorld 來調(diào)用該方法 在瀏覽器的地址欄中 輸入 http localhost xxxx HelloWorld Welcome 將會 調(diào)用 HelloWorldController 控制器類的 Welcome 方法 該方法返回 這是我的 Welcome 方 法 文字 所以瀏覽器中顯示該文字 如圖 2 5 所示 圖 2 5 HelloWorldController 控制器中 Welcome 方法的運行結(jié)果 接下來 讓我們修改 Welcome 方法 以便在 URL 地址欄中可以傳遞一些參數(shù)給該方法 例如 HelloWorld Welcome name Scott 運行該應(yīng)用程序 在瀏覽器中輸入 http localhost xxxx HelloWorld Welcome name Scott 這段代碼表示 Index 方法使用一個視圖模板來在瀏覽器中生成 HTML 格式的頁面文件 接著 讓我們來添加一個 Index 方法所使用的視圖模板 在 Index 方法中點擊鼠標(biāo)右鍵 然后點擊 添加視圖 將會彈出一個 添加視圖 對話框 圖 3 1 添加視圖 圖 3 2 添加視圖對話框 在該對話框中 不做任何修改 直接點擊添加按鈕 觀察解決方案資源管理器中 在 MvcMovie 項目下的 Views 文件夾下創(chuàng)建了一個 HelloWorld 文件夾 并且在該文件夾中創(chuàng) 建了一個 Index cshtml 文件 同時該文件呈打開狀態(tài) 如圖 3 3 所示 圖 3 3 視圖模板文件被創(chuàng)建并呈打開狀態(tài) 讓我們在該文件中追加一些文字 代碼如代碼清單 3 1 所示 代碼 3 1 Index cshtml 視圖模板文件 ViewBag Title 首頁 首頁 這是我的第一個視圖模板 運行應(yīng)用程序 輸入地址 http localhost xxxx HelloWorld 由于在 Index 方 法中并沒有做任何事情 只是簡單地一行代碼 return View 該行代碼表示我們使用 一個視圖模板文件來在瀏覽器中展示響應(yīng)結(jié)果 因為我們并沒有顯式指定使用哪個視圖模 板文件 所以使用了默認(rèn)的 Views 文件夾下的 HelloWorld 文件夾下的 Index cshtml 視圖 模板文件 該視圖模板文件中只有簡單的兩行文字 在瀏覽器中的顯示結(jié)果如圖 3 4 所示 圖 3 4 在瀏覽器中顯示視圖 看上去還不錯 但是請注意 該網(wǎng)頁的標(biāo)題為 首頁 但是網(wǎng)頁中的大標(biāo)題文字卻為 我的 MVC 應(yīng)用程序 需要修改一下 3 23 2 修改視圖修改視圖 修改應(yīng)用程序的頁面布局修改應(yīng)用程序的頁面布局 首先 讓我們修改頁面大標(biāo)題中的 我的 MVC 應(yīng)用程序 文字 這段文字是所有頁面 中的公共大標(biāo)題 在這個應(yīng)用程序中 雖然所有頁面中都顯示了這個共同的大標(biāo)題 但只 有一處地方對其進行了設(shè)置 打開解決方案資源管理器中 Views 文件夾下的 Shared 文件夾 下的 Layout cshtml 文件 該文件被稱為布局頁面 位于公有文件夾 Shared 下 被所有 其他網(wǎng)頁所共用 圖 3 5 公有布局頁面 布局模板頁允許你統(tǒng)一在一個地方指定整個 Web 應(yīng)用程序或 Web 網(wǎng)站的所有 HTML 頁面 的布局方法 請注意文件底部的 RenderBody 代碼行 RenderBody 是一個占位符 代表了所有你創(chuàng)建出來的實際應(yīng)用的視圖頁面 在這里統(tǒng)一指定 將布局模板文件中的 我的 MVC 應(yīng)用程序 修改為 我的 MVCMovie 應(yīng)用程序 代碼如下所示 我的 MVCMovie 應(yīng)用程序 運行應(yīng)用程序 注意網(wǎng)頁中的大標(biāo)題被修改為 我的 MVCMovie 應(yīng)用程序 點擊 關(guān)于 鏈接 你可以看見 關(guān)于 頁面中的大標(biāo)題也被修改為 我的 MVCMovie 應(yīng)用程 序 由此可以看出一旦修改了布局頁面中的某處地方 該修改將會被應(yīng)用到所有頁面中 圖 3 6 在布局頁面中修改了網(wǎng)頁中顯示的大標(biāo)題 完整的 Layout cshtml 文件中的代碼如代碼清單 3 2 所示 代碼清單 3 2 Layout cshtml 文件中的完整代碼 ViewBag Title 我的 MVCMovie 應(yīng)用程序 Html Partial LogOnPartial Html ActionLink 主頁 Index Home Html ActionLink 關(guān)于 About Home RenderBody 現(xiàn)在 讓我們修改 Index 視圖頁面的標(biāo)題 打開 Views 文件夾下的 HelloWorld 文件夾下的 Index cshtml 文件 這里我們修改兩處 地方 首先 修改瀏覽器中的標(biāo)題 然后修改標(biāo)簽中的小標(biāo)題文字 修改后代碼如代 碼清單 3 3 所示 代碼清單 3 3 修改后的 Index cshtml 視圖模板文件 ViewBag Title 電影清單 我的電影清單 這是我的第一個視圖模板 ViewBag 對象的 Title 屬性代表了顯示該頁面時的瀏覽器中的標(biāo)題文字 讓我們回頭看 一下布局模板文件 在該文件的區(qū)段中的標(biāo)簽中使用了這個值來作為瀏覽器 中的網(wǎng)頁標(biāo)題 同時 通過這種方法 你可以很容易地在你的視圖模板文件與布局模板文 件之間進行參數(shù)的傳遞 運行應(yīng)用程序 在地址欄中輸入 http localhost xxxx HelloWorld 注意瀏覽器中的網(wǎng) 頁標(biāo)題 頁面中的小標(biāo)題文字都變?yōu)樾薷暮蟮臉?biāo)題文字 如果沒有發(fā)生變化的話 則可能 你的網(wǎng)頁被緩存住了 可以按 Ctrl F5 鍵來在重新刷新頁面時取消緩存 同時也請注意 Layout cshtml 文件中的占位符中的內(nèi)容被替換成了 Index cshtml 視圖模 板中的內(nèi)容 所以瀏覽器中展示的是一個單一的 HTML 文件 瀏覽器中的運行結(jié)果如圖 3 7 所示 圖 3 7 修改了標(biāo)題后的 Index 視圖模板文件 此處 我們的數(shù)據(jù) 這是我的第一個視圖模板 文字 是被直接書寫在文件中的 也 就是說我們使用到了 MVC 應(yīng)用程序的 V 視圖 View 與 C 控制器 Controller 接下來 我 們講解一下如何創(chuàng)建一個數(shù)據(jù)庫并從該數(shù)據(jù)庫中獲取模型數(shù)據(jù) 3 33 3 將控制器中的數(shù)據(jù)傳遞給視圖將控制器中的數(shù)據(jù)傳遞給視圖 在我們使用數(shù)據(jù)庫并介紹模型之前 首先我們介紹一下如何將控制器中的信息傳遞給 視圖 瀏覽器接收到一個 URL 請求后 將會調(diào)用控制器類來進行響應(yīng) 你可以在控制器類 中進行對接收到的頁面參數(shù)進行處理的代碼 你可以在控制器類中書寫從數(shù)據(jù)庫中獲取數(shù) 據(jù)的代碼 你也可以在控制器類中書寫代碼來決定返回給客戶端什么格式的響應(yīng)文件 控 制器可以利用視圖模板文件來生成 HTML 格式的響應(yīng)文件并顯示在瀏覽器中 控制器類負責(zé)提供視圖模板文件在生成 HTML 格式的響應(yīng)文件時所需要的任何數(shù)據(jù)或 對象 一個視圖模板文件不應(yīng)該執(zhí)行任何業(yè)務(wù)邏輯 也不應(yīng)該直接和數(shù)據(jù)庫進行交互 它 只能和控制器類進行交互 獲取控制器類所提供給它的數(shù)據(jù) 這樣可以使你的代碼更加清 晰 容易維護 現(xiàn)在在我們的應(yīng)用程序中 HelloWorldController 控制器類中的 Welcome 方法帶有兩個 參數(shù) name 與 numTimes Welcome 方法直接向瀏覽器輸出這兩個參數(shù)的參數(shù)值 這里 我 們修改該方法使其不再直接輸出數(shù)據(jù) 而是使用一個視圖模板 該視圖模板將生成一個動 態(tài)的響應(yīng)流 這意味著我們需要將數(shù)據(jù)從控制器類傳遞給視圖以便利用該數(shù)據(jù)來生成該響 應(yīng)流 我們在該控制器類中將視圖模板所需要的數(shù)據(jù)送入一個 ViewBag 對象中 該對象可 以被視圖模板直接接收 打開 HelloWorldController cs 文件 修改 Welcome 方法 在該方法中為 ViewBag 對象 添加一個 Message 屬性與 NumTimes 屬性 并且將屬性值分別設(shè)定為經(jīng)過處理后的 name 參數(shù)值與 numTimes 參數(shù)值 ViewBag 對象是一個動態(tài)對象 你可以為它添加任何屬性并賦 上屬性值 在未賦值之前該屬性是不生效的 直到你賦值為止 修改后的 HelloWorldController cs 文件中的代碼如代碼清單 3 4 所示 代碼清單 3 4 修改后的 HelloWorldController cs 文件 using System Web using System Web Mvc namespace MvcMovie Controllers public class HelloWorldController Controller GET HelloWorld public ActionResult Index return View GET HelloWorld Welcome public ActionResult Welcome string name int numTimes 1 ViewBag Message Hello name ViewBag NumTimes numTimes return View 現(xiàn)在 ViewBag 對象中已經(jīng)包含了數(shù)據(jù) 它將被自動傳遞給視圖 接下來 我們需要創(chuàng)建一個 Welcome 視圖模板 在 調(diào)試 菜單中 點擊 生成 MvcMovie 將應(yīng)用程序進行編譯 如圖 3 8 所示 圖 3 8 編譯應(yīng)用程序 接下來 在 Welcome 方法中點擊鼠標(biāo)右鍵 然后點擊 添加視圖 彈出對話框如圖 3 9 所示 圖 3 9 為 Welcome 方法添加視圖 在該對話框中不做任何修改 直接點擊添加按鈕 View 文件夾下的 HelloWorld 文件夾 中自動被創(chuàng)建了一個 Welcome cshtml 文件 打開該文件 在元素下添加代碼 讓瀏覽 器顯示 URL 地址中傳入的 name 參數(shù)中設(shè)定的文字 顯示次數(shù)等于 URL 地址中傳入的 numTimes 參數(shù)中設(shè)定的次數(shù) 修改后的 Welcome cshtml 文件中的代碼如代碼清單 3 5 所 示 代碼清單 3 5 修改后的 Welcome cshtml 文件 ViewBag Title Welcome Welcome for int i 0 i ViewBag NumTimes i ViewBag Message 運行應(yīng)用程序 并且在地址欄中輸入 http localhost xx HelloWorld Welcome name Scott set public string Title get set public DateTime ReleaseDate get set public string Genre get set public decimal Price get set 我們將利用 Movie 類來代表數(shù)據(jù)庫中的 movie 電影 每一個 Movie 對象的實例對應(yīng)于 數(shù)據(jù)表中的一行 Movie 類中的每一個屬性被映射到數(shù)據(jù)表的每一列 在同一個 Movie cs 文件中 追加如下所示的 MovieDBContext 類 public class MovieDBContext DbContext public DbSet Movies get set MovieDBContext 類代表了 Entity Framework 中的 movie 數(shù)據(jù)庫的上下文對象 用來處 理數(shù)據(jù)的存取與更新 MovieDBContext 對象繼承了 Entity Framework 中的 DbContext 基礎(chǔ) 類 為了能夠引用 DbContext 類 你需要在 Movie cs 文件的頭部追加如下所示的 using 語 句 using System Data Entity 完整的 Movie cs 文件中的代碼如代碼清單 4 1 所示 代碼清單 4 1 完整的 Movie cs 文件 using System using System Data Entity namespace MvcMovie Models 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 public class MovieDBContext DbContext public DbSet Movies get set 如果要從數(shù)據(jù)庫中存取數(shù)據(jù) 類似以上所示的代碼是必須要寫的 在下一節(jié)中 我們 將要創(chuàng)建一個新的 MoviesController 類 用來顯示數(shù)據(jù)庫中的數(shù)據(jù) 并且允許用戶創(chuàng)建一 個新的 movie 電影 的列表 第五節(jié)第五節(jié) 從控制器訪問模型中的數(shù)據(jù)從控制器訪問模型中的數(shù)據(jù) 5 15 1 從控制器訪問模型中的數(shù)據(jù)從控制器訪問模型中的數(shù)據(jù) 在本節(jié)中 我們將要創(chuàng)建一個新的 MoviesController 類 并且書寫代碼來獲取數(shù)據(jù)庫 中的數(shù)據(jù) 并通過視圖模板來顯示在瀏覽器中 鼠標(biāo)右擊 Controllers 文件夾 點擊 添加 菜單下的 控制器 菜單項 將會彈出一個 添 加控制器 對話框 如圖 5 1 所示 圖 5 1 添加控制器 在該對話框中將控制其命名為 MoviesController 然后點擊添加按鈕 該對話框被關(guān)閉 觀察解決方案資源管理器中 Controllers 文件夾下增加了一個名為 MoviesController cs 的文 件 并且呈打開狀態(tài) 讓我們更新 MoviesController 類中的 Index 方法 以便獲取 movie 電 影 清單 這里需要注意的是 為了引用我們前面創(chuàng)建的 MovieDBContext 類 你需要在文件頭部 追加如下所示的兩個 using 語句 using MvcMovie Models using System Linq 修改 MoviesController 類中的代碼為代碼清單 5 1 中所示代碼 代碼清單 5 1 MoviesController 類中的完整代碼 using MvcMovie Models using System Linq using System using System Web Mvc namespace MvcMovie Controllers public class MoviesController Controller MovieDBContext db new MovieDBContext public ActionResult Index var movies from m in db Movies where m ReleaseDate new DateTime 1984 6 1 select m return View movies ToList 這段代碼實施了一個 LINQ 查詢來獲取 1984 年夏天之后發(fā)行的所有電影 我們還需要 一個視圖模板來顯示這個電影清單 所以在 Index 方法內(nèi)點擊鼠標(biāo)右鍵 然后點擊 添加視 圖 來添加一個視圖 由于這里我們需要將一個 Movie 類傳遞給視圖 所以在 添加視圖 對話框中 與本教 程中前幾次在該對話框中之行的操作有所不同 前幾次我們都是直接點擊添加按鈕來創(chuàng)建 一個空白的視圖模板 但是這一次我們想讓 Visual Web Developer 為我們自動創(chuàng)建一個具有 一些默認(rèn)處理的強類型的視圖 所以我們勾選 創(chuàng)建強類型視圖 復(fù)選框 在模型類下拉框 中選擇 Movie MvcMovie Models 如果模型類中不存在這個類 請先點擊調(diào)試菜單下的 生成 MvcMovie 生成該類 在支架模板下拉框中選擇 List 最后勾選 引用腳本 復(fù)選框 如圖 5 2 所示 圖 5 2 添加強類型視圖 點擊添加按鈕 Visual Web Developer 自動生成一個視圖 并且自動在視圖文件中添加 顯示電影清單所需要的代碼 這里 我們首先用與前面修改 HelloWorld 控制器所用的視圖 中的標(biāo)題同樣的方法來修改這個 Movies 控制器所用視圖中的標(biāo)題 代碼清單 5 2 為修改后的這個視圖中的完整代碼 在這段代碼中 我們將 releaseDate 發(fā)行日期 屬性的格式化字符串從原來的 0 g 修改為 0 d 長日期修 改為短日期 將 Price 票價 屬性的格式化字符串從原來的 0 F 修改為 0 c float 類型修改為貨幣類型 另外 將列表標(biāo)題中的文字全部修改為中文名稱 代碼清單 5 2 Movies 控制器所用視圖中的完整代碼 model IEnumerable ViewBag Title 電影清單 我的電影清單 Html ActionLink 追加 Create 電影名稱 發(fā)行日期 種類 票價 foreach var item in Model Html ActionLink 編輯 Edit new id item ID Html ActionLink 查看明細 Details new id item ID Html ActionLink 刪除 Delete new id item ID item Title String Format 0 d item ReleaseDate item Genre String Format 0 c2 item Price 5 25 2 強類型模型與強類型模型與 model model 關(guān)鍵關(guān)鍵字字 在本教程的前文中 我們介紹了一個控制器可以使用 ViewBag 對象來將數(shù)據(jù)或?qū)ο髠?遞到視圖模板中 ViewBag 是一個動態(tài)對象 它提供了一種便利的 后期綁定的方法來將 信息從控制器傳遞到視圖中 ASP NET MVC 也提供了一種利用強類型的方法來將數(shù)據(jù)或?qū)ο髠鬟f到視圖模板中 這 種強類型的方法為你的編碼過程提供了很豐富的編輯時的智能輸入提示信息與非常好的編 譯時的檢查 接下來我們將結(jié)合這種方法與我們的 Movies 控制器 MoviesController 與視 圖模板 Index cshtml 一起使用 請注意在我們的 MoviesController 控制器的 Index 方法中 我們在調(diào)用 View 方法時傳 入了一個參數(shù) 代碼如下所示 public class MoviesController Controller MovieDBContext db new MovieDBContext public ActionResult Index var movies from m in db Movies where m ReleaseDate new DateTime 1984 6 1 select m return View movies ToList 請注意如下這一行代碼表示將一個 movies 列表從控制器傳遞到了視圖中 return View movies ToList 通過在視圖模板文件的頭部使用 model 語句 視圖模板可以識別傳入的參數(shù)中的對 象類型是否該視圖模板所需要的對象類型 請記住當(dāng)我們在創(chuàng)建這個 Movies 控制器所使用 的模板時 我們在 添加視圖 對話框中勾選了 創(chuàng)建強類型視圖 復(fù)選框 在模型類下 拉框中選擇了 Movie MvcMovie Models 在支架模板下拉框中選擇了 List 所以 Visual Web Developer 自動在我們的視圖模板文件的第一行中添加了如下所示的語句 model IEnumerable model 關(guān)鍵字允許我們在視圖模板中直接訪問在控制器類中通過使用強類型的 模型 而傳遞過來的 Movie 類的列表 例如 在我們的 Index cshtml 視圖模板中 我們可以通過 foreach 語句來遍歷這個強類型的模型 訪問其中的每一個 Movie 對象 代碼如下所示 foreach var item in Model Html ActionLink 編輯 Edit new id item ID Html ActionLink 查看明細 Details new id item ID Html ActionLink 刪除 Delete new id item ID item Title String Format 0 d item ReleaseDate item Genre String Format 0 c2 item Price 因為這里的 模型 是強類型的 IEnumerable 所以在循環(huán)遍歷時 模型 中 的每一個項目 item 也是一個強類型的 Movie 對象 可以直接訪問該對象的每一個 屬性 同時這也意味著我們可以在編譯時檢查我們的代碼 同時在書寫代碼時也可以使用 代碼編輯器提供的智能輸入提示信息 如圖 5 3 所示 圖 5 3 可以使用強類型 模型 所帶來的智能輸入提示信息 5 35 3 與與 SQLSQL ServerServer ExpressExpress 結(jié)合使用結(jié)合使用 我們在本節(jié)前面創(chuàng)建了一個 MovieDBContext 類 用來連接數(shù)據(jù)庫 并將數(shù)據(jù)庫中的記 錄映射到 Movie 對象 你也許會問一個問題 怎樣定義數(shù)據(jù)庫連接 接下來我們通過在 web config 文件中增加一些連接信息來定義一個數(shù)據(jù)庫的連接 打開應(yīng)用程序根目錄下的 Web config 文件 請注意不是 Views 文件夾下的 Web config 文件 如圖 5 4 所示 圖 5 4 打開應(yīng)用程序根目錄下的 Web config 文件 在 Web config 文件的元素中追加類似如下所示的連接字符串 connectionString 屬性的值表示我們想要使用 SQL Server Express 的一個本地實例中的 Movies 數(shù)據(jù)庫 當(dāng)你安裝 Visual Web Developer Express 的時候 安裝過程中也會同時自動 在你的計算機中安裝 SQL Server Express 你可以利用它來進行有關(guān)數(shù)據(jù)庫的管理工作 運行應(yīng)用程序 在瀏覽器中輸入 http localhost xxxx Movies 瀏覽器中將會顯示一 張空的電影列表 如圖 5 5 所示 圖 5 5 數(shù)據(jù)庫中沒有數(shù)據(jù)時將默認(rèn)顯示空的列表 EF code first 如果發(fā)現(xiàn)使用我們提供的連接字符串而連接到的數(shù)據(jù)庫中沒有 Movies 數(shù) 據(jù)庫 它將自動為我們創(chuàng)建一個 你可以在類似 C Program Files Microsoft SQL MSSQL10 SQLEXPRESS MSSQL DATA 這樣的 SQL Server 的安裝目錄下去查看是否該數(shù)據(jù)庫 已被創(chuàng)建 另外注意 在本教程的前面部分中 我們采用如下所示的代碼創(chuàng)建了一個 Movie 模型 using System using System Data Entity namespace MvcMovie Models 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 public class MovieDBContext DbContext public DbSet Movies get set 如您所見 當(dāng)我們第一次使用 MoviesController 控制器類來訪問 MovieDBContext 所指 向的實例時 Entity Framework 可以自動為你創(chuàng)建一個新的 Movies 數(shù)據(jù)庫 并且將 MovieDBContext 類的 Movies 屬性映射到一個新的 Movies 表 并且自動將它創(chuàng)建 這個表 中的每一行被映射到一個新的 Movie 類的實例 Movies 表的每一列被映射到 Movie 類的一 個屬性 你可以使用 SQL Server Management Studio 來查看使用模型創(chuàng)建出來的數(shù)據(jù)庫與數(shù)據(jù)表 在 Windows 的開始菜單中打開 SQL Server Management Studio 并且連接到 Web config 中所配置的數(shù)據(jù)庫 如圖 5 6 所示 圖 5 6 使用 SQL Server Management Studio 連接數(shù)據(jù)庫 點擊 連接 按鈕進行連接 查看數(shù)據(jù)庫 可以看見 Movies 數(shù)據(jù)庫與數(shù)據(jù)表已被創(chuàng)建 如圖 5 7 所示 圖 5 7 Movies 數(shù)據(jù)庫與數(shù)據(jù)表已被創(chuàng)建 鼠標(biāo)右擊 Movies 數(shù)據(jù)表 并且點擊 設(shè)計 如圖 5 8 所示 圖 5 8 點擊 設(shè)計 查看 Movies 表的屬性 你可以看見 Movies 表中各字段的屬性 其中 ID 字段被自動設(shè)定為自增長主鍵 如圖 5 9 中所示 圖 5 9 查看 Movies 表中各字段屬性 這里請注意 Movies 表中各字段是如何映射到 Movie 類中各屬性上的 Entity Framework code fist 自動在你創(chuàng)建的 Movie 類的基礎(chǔ)上創(chuàng)建了這張 Movies 數(shù)據(jù)表 你現(xiàn)在已經(jīng)可以訪問數(shù)據(jù)庫中的 Movies 數(shù)據(jù)表 并且有了一個簡單的頁面來顯示這個 表中的內(nèi)容 在下一節(jié) 我們將增加一個追加數(shù)據(jù)的方法和一個追加數(shù)據(jù)的視圖 并且向 數(shù)據(jù)庫中追加一些數(shù)據(jù) 第六節(jié)第六節(jié) 增加追加數(shù)據(jù)的方法和視圖增加追加數(shù)據(jù)的方法和視圖 在本節(jié)中我們將要在數(shù)據(jù)庫中追加并保存一些數(shù)據(jù) 我們將要創(chuàng)建一個表單以及一些 表單輸入控件 用來輸入數(shù)據(jù)信息 當(dāng)用戶提交表單時將把這些用戶輸入的信息保存在數(shù) 據(jù)庫中 我們可以通過在瀏覽器中輸入 http localhost xx Movies Create 這個 URL 地址來 訪問這個表單 6 16 1 顯示追加信息時所用表單顯示追加信息時所用表單 首先 我們需要在我們的 MoviesController 類中追加一個 Create 方法 該方法返回一 個視圖 該視圖中包含了用戶輸入信息時所要用到的表單 public ActionResult Create return View 現(xiàn)在讓我們來實現(xiàn)這個 Create 方法中所要返回的視圖 我們將在這個視圖中向用戶顯 示追加數(shù)據(jù)時所需要用到的表單 在 Create 方法中點擊鼠標(biāo)右鍵 并點擊上下文菜單中的 添加視圖 在 添加視圖 對話框中選擇 創(chuàng)建強類型視圖 將模型類指定為 Movie 在支架模板 中選擇 Create 如圖 6 1 所示 圖 6 1 添加追加數(shù)據(jù)時所用視圖 點擊添加按鈕 Views 文件夾下的 Movies 文件夾中將會自動添加一個名為 Create cshtml 的視圖模板文件 因為你在支架模板中選擇了 Create 所以支架模板 會在該視圖模板文件中自動生成一些默認(rèn)代碼 打開該文件進行查看 在該文件中已經(jīng)自 動創(chuàng)建了一個 HTML 表單 以及一段用來顯示校驗時錯誤信息的文字 Visual Web Developer 檢查 Movies 類 并自動創(chuàng)建與該類中每個屬性相對應(yīng)的元素以及 元素 支架模板自動生成的創(chuàng)建數(shù)據(jù)所用視圖中的代碼如代碼清單 6 1 所示 代碼清單 6 1 支架模板自動生成的創(chuàng)建數(shù)據(jù)所用視圖中的代碼 model MvcMovie Models Movie ViewBag Title Create Create using Html BeginForm Html ValidationSummary true Movie Html LabelFor model model Title Html EditorFor model model Title Html ValidationMessageFor model model Title Html LabelFor model model ReleaseDate Html EditorFor model model ReleaseDate Html ValidationMessageFor model model ReleaseDate Html LabelFor model model Genre Html EditorFor model model Genre Html ValidationMessageFor model model Genre Html LabelFor model model Price Html EditorFor model model Price Html ValidationMessageFor model model Price Html ActionLink Back to List Index 這段代碼中使用了幾個 HTML 幫助器的方法來幫助簡化 HTML 標(biāo)簽的書寫方法 Html LabelFor 幫助器用于顯示字段名 Title ReleaseDate Genre 或者 Price Html EditorFor 幫助器用于顯示一個提供給用戶輸入信息的 HTML 的元素 Html ValidationMessageFor 幫助器用于顯示一個針對屬性的校驗信息 請注意我們的視圖模 板的頂部有一個 model MvcMovie Models Movie 的聲明 該聲明將我們的視圖模板中的 模型 強類型化成一個 Movie 類 運行應(yīng)用程序 在瀏覽器中輸入 http localhost xx Movies Create 瀏覽器中顯示如圖 6 2 所示 圖 6 2 支架模板自動生成的視圖 在書寫中文網(wǎng)站或中文 Web 應(yīng)用程序的時候 可以將代碼清單 6 1 中的代碼修改為代 碼清單 6 2 中所示代碼 代碼清單 6 2 將支架模板自動生成的代碼進行漢化 model MvcMovie Models Movie ViewBag Title 追加電影信息 追加電影信息 using Html BeginForm Html ValidationSummary true 電影 標(biāo)題 Html EditorFor model model Title Html ValidationMessageFor model model Title 發(fā)行日期 Html EditorFor model model ReleaseDate Html ValidationMessageFor model model ReleaseDate 種類 Html EditorFor model model Genre Html ValidationMessageFor model model Genre 票價 Html EditorFor model model Price Html ValidationMessageFor model model Price Html ActionLink 返回電影列表 Index 修改完畢后重新運行程序 然后訪問 http localhost xx Movies Create 這個地址 瀏覽器中顯示如圖 6 3 所示 圖 6 3 中文化后的追加電影信息畫面 鼠標(biāo)右擊瀏覽器中顯示的該頁面 點擊 顯示源代碼 顯示出來的源代碼如代碼清單 6 3 所示 為了突出本節(jié)內(nèi)容 只顯示與本節(jié)中相關(guān)部分 代碼清單 6 3 追加電影信息畫面在瀏覽器中的 HTML 代碼 追加電影信息 追加電影信息 電影 標(biāo)題 發(fā)行日期 種類 票價 返回電影列表 從這段代碼中可以看出 表單的 action 屬性被設(shè)置為 Movies Create 當(dāng)點擊追加按 鈕時會把表單中各文本框中的數(shù)據(jù)提交到服務(wù)器端進行保存 6 26 2 處理處理 HTTP POSTHTTP POST 到此為止 我們已經(jīng)實現(xiàn)了顯示追加數(shù)據(jù)所用表單的所需代碼 我們的下一步是編寫 代碼來進行表單提交到服務(wù)器后的處理 我們將要獲取用戶在數(shù)據(jù)庫中輸入的信息并且將 它們作為一個新的 Movie 保存到數(shù)據(jù)庫中 為了實現(xiàn)這一處理 我們需要在 MoviesController 類中追加第二個 Create 方法 這個 Create 方法具有一個 HttpPost 屬性 它意味著我們將要用它來處理提交到 Movies Create 這個 URL 地址的請求 另外 所有提交到 Movies Create 這個 URL 地址的非 POST 的請求 即 GET 請求 將被第一個 Create 方法進行處理 即簡單地返回一個空的表單 代碼清單 6 4 中所示代碼為 MoviesController 類中的兩個 Create 方法的全部代碼 代碼清單 6 4 MoviesController 類中的兩個 Create 方法的全部代碼 public ActionResult Create return View HttpPost public ActionResult Create Movie newMovie if ModelState IsValid db Movies Add newMovie db SaveChanges return RedirectToAction Index else return View newMovie 之前我們介紹了 ASP NET MVC 可以自動地將一個 URL 地址中的查詢字符串中的參數(shù) 例如 傳遞到 HelloWorld Welcome name Scott db SaveChanges return RedirectToAction Index else return View newMovie ModelState IsValid 屬性用來檢查提交的表單中的數(shù)據(jù)是否能夠被用來創(chuàng)建一個 Movie 對象 如果數(shù)據(jù)是有效的 我們的代碼將把提交上來的這個 Movie 類追加在 MoviesDBContext 對象的實例中的 Movies 集合中 調(diào)用我們的 MoviesDBContext 對象實例 的 SaveChanges 方法將把這個 Movie 對象保存在數(shù)據(jù)庫中 保存數(shù)據(jù)完畢后 代碼把畫面 重定向到 MoviesController 類的 Index 方法中 瀏覽器中將會打開電影清單顯示畫面 并且 在電影清單中顯示剛才追加的這條數(shù)據(jù) 如果提交的值是無效的 將會返回到電影信息追加畫面中 并且在表單的各輸入控件 中顯示各自的提交的值 各輸入控件的 Html ValidationMessageFor 幫助器將會顯示對應(yīng)的 出錯信息 6 36 3 追加一條電影信息追加一條電影信息 運行應(yīng)用程序 在瀏覽器中輸入 http localhost xx Movies Create 在表單中輸入 一條電影信息 然后點擊追加按鈕 如圖 6 4 所示 圖 6 4 追加電影信息 點擊追加按鈕進行提交 表單中輸入的這條電影信息將會保存到數(shù)據(jù)庫中 保存后瀏 覽器中將打開電影清單畫面 并且將這條追加的電影顯示在清單中 如圖 6 5 所示 圖 6 5 追加后電影將顯示在電影清單中 你可能已經(jīng)注意到了在這個電影清單畫面中將剛才追加的電影票價顯示成了 10 元 而 不是用戶輸入的 9 99 元 這是因為當(dāng)前該數(shù)據(jù)表中 Decimal 類型的默認(rèn)精度只能識別與處 理整數(shù)值 并且自動將小數(shù)部分四舍五入 關(guān)于如何解決這個問題 我們將在下一節(jié)中對 模型進行一些調(diào)整的時候會同時進行介紹 現(xiàn)在我們已經(jīng)有了一個 Web 應(yīng)用程序的雛形 我們可以在數(shù)據(jù)庫中追加數(shù)據(jù) 顯示數(shù) 據(jù) 代碼清單 6 5 是現(xiàn)在這個 MoviesController 類的