Microsoft Word - ch02.docx

02 ASP.NET MVC CRUD 初體驗 起初, 神創造天地 地是空虛混沌, 淵面黑暗 ; 神的靈運行在水面上 神說 : 要有光, 就有了光 ( 創世記 1:1-3) 學習目標 新增 修改 刪除 查詢是 Web 應用程式常見的功能 本章將帶領初學者由建立資料庫開始, 學習如何設計具有新增 修改 刪除 查詢作業的 ASP.NET MVC 應用程式 並瞭解 ASP.NET MVC 的運作模式 專案架構與網址路由設定

跟著實務學習 ASP.NET MVC- 第 次寫 MVC 就上手 2.1 ASP.NET MVC 的運作模式 開發 ASP.NET MVC 應用程式之前, 有必要瞭解其運作模式 ( 以下說明示範不包含 Model 的使用 ) 1. 當用戶端使用者由瀏覽器送出一個請求 (Request), 這個請求可能是輸入一段網址 點按超連結或是按下表單的傳送按鈕 2. 用戶端所送出的請求會傳送到應用程式伺服器的 ASP.NET MVC 的路由表 Routing 進行比對, 比對完成 Routing 會執行對應的控制器 (Controller) 中的動作 (Action) 方法 3. Controller 控制器處理完使用者的請求之後, 接著會將結果傳送給指定的檢視 View 4. 最後再將 View 檢視以 HTML 網頁呈現在使用者的瀏覽器上 Routing 2-2

Chapter 2 ASP.NET MVC CRUD 初體驗 若使用者進行資料存取, 即會使用到 Model 模型, 則 ASP.NET MVC 運作模式如下 : 1. 用戶端使用者由瀏覽器送出一個請求 (Request) 2. 用戶端所送出的請求傳送到應用程式伺服器的 ASP.NET MVC 的 Routing 進行比對, 比對完成 Routing 會執行對應的控制器 (Controller) 中的動作 (Action) 方法 3. Controller 控制器透過 Model 模型來存取資料來源 4. Controller 控制器將取得 Model 模型的資料結果傳送至指定的 View 檢視 5. 最後將 View 檢視與 Model 模型結果編譯成 HTML 網頁並呈現在使用者的瀏覽器上 2-3

跟著實務學習 ASP.NET MVC- 第 次寫 MVC 就上手 2.2 ASP.NET MVC 的 CRUD 作業 在資料庫程式設計中,CRUD 字母縮寫即是 Create Read Update 以及 Delete, 它代表的是操作資料庫應用程式的新增 讀取 ( 查詢 ) 修改和刪除四項作業, 字母縮寫會對應到 SQL 語法和 HTTP 方法 (RESTful API) 的操作, 如下圖 : 操作 SQL HTTP Create INSERT PUT / POST Rade(Retrieve) SELECT GET Update(Modify) UPDATE PUT / POST / PATCH Delete(Destroy) DELETE DELETE 透過下面範例一步步帶領讀者, 由建立專案開始, 體會開發一個待辦事項功能的 ASP.NET MVC 網站有多麼容易, 此網站可新增 刪除 修改 讀取待辦事項 ttodo 資料表 2.2.1 開啟與執行 ASP.NET MVC Web 專案 在開始練習製作 ASP.NET MVC 專案時, 先學會如何開啟與執行本書範例的專案, 將有助於您瞭解範例的功能與學習的重點 上機練習 Step 01 複製專案檔 將書附光碟 ch02 資料夾複製到 C:\MVC 資料夾下 Step 02 開啟 Visual C# 的 ASP.NET Web 應用程式專案進入 VS 2017 整合開發環境, 執行 檔案 (F)/ 開啟 (O)/ 專案 / 方案 (P) 開啟 開啟專案 視窗, 接著請選取 C:\MVC\ch02\slnToDo 資料夾下的 slntodo.sln 方案檔並按下鈕開啟該 Web 方案 2-4

Chapter 2 ASP.NET MVC CRUD 初體驗 Step 03 執行結果 本例是可新增 修改 刪除 檢視 ASP.NET MVC 的待辦事項管理系統 請按下執行程式鈕並測試本例功能 1. 網站執行時出現待辦事項列表記錄, 待辦事項有編號 標題 圖示 完成日等四個欄位, 每一筆記錄可使用編輯 (Edit) 和刪除 (Delete) 記錄的功能 ; 如下圖若按下 Delete 的連結會出現對話方塊再次詢問是否刪除該筆記錄 2-5

跟著實務學習 ASP.NET MVC- 第 次寫 MVC 就上手 2. 當在上圖按下 Edit 連結時會切換到修改記錄的頁面, 網頁會出現舊的資料記錄, 且圖示使用下拉式清單呈現, 完成日使用日期清單呈現 ; 修改完成之後可按下鈕更新待辦事項資料 3. 按下 待辦事項新增 連結會連結至待辦事項新增的頁面, 在此網頁可輸入待辦事項的標題 圖示 完成日的資料, 編號欄位為自動標號所以不用輸入資料, 接著再按下鈕 新增待辦事項記錄後即會回到列表頁面觀看新增後的結果 2-6

Chapter 2 ASP.NET MVC CRUD 初體驗 2.2.2 建立 ASP.NET MVC Web 專案與資料庫 上機練習 Step 01 建立 Visual C# 的 ASP.NET Web 應用程式專案進入 VS 2017 整合開發環境, 執行 檔案 (F)/ 新增 (N)/ 專案 (P) 開啟下圖 新增專案 視窗, 接著依下圖操作在 C:\MVC\ch02 資料夾下建立名稱為 slntodo 方案, 專案名稱命名為 prjtodo, 專案範本為 空白, 核心參考為 MVC 2-7

跟著實務學習 ASP.NET MVC- 第 次寫 MVC 就上手 Step 02 在專案中加入欲使用的圖檔將 ch02 資料夾下的 images 資料夾拖曳到 prjtodo 專案下, 結果專案下會加入 images 資料夾, 該資料夾會有 0.png 和 1.png 圖檔 (0.png 代表重要事項圖示 ;1.png 代表普通事項圖示 ) 2-8

Chapter 2 ASP.NET MVC CRUD 初體驗 Step 03 建立專案使用的 dbtodo.mdf 代辦事項資料庫 本例的 Model 模型可用來存取 dbtodo.mdf 資料庫的 ttodo 資料表, 請依下列步驟建立 dbtodo.mdf 資料庫內含 ttodo 資料表, 該資料表的欄位如下 : 資料表名稱 主鍵值欄位 ttodo fid 欄位名稱資料型態長度允許 null 預設值備註 fid int 否 ftitle nvarchar 50 是標題 fimage nvarchar 50 是 編號識別規格設為 True; 識別值種子為 1; 識別值增量為 1; 待辦事項重要程度 0.png: 重要 1.png: 普通 fdate date 是完成日 ( 期限日期 ) 1. 在方案總管的 App_Data 資料夾按滑鼠右鍵, 由快顯功能表執行 加入 (D)/ 新增項目 (W) 指令 2. 接著開啟下圖 加入新項目 視窗, 請依圖示操作新增 dbtodo.mdf 資料庫 完成之後方案總管 App_Data 資料夾下會出現 dbtodo.mdf 資料庫 2-9

跟著實務學習 ASP.NET MVC- 第 次寫 MVC 就上手 3. 在上圖 dbtodo.mdf 快按滑鼠左鍵兩下會開啟伺服器總管 請在伺服器總管點按 dbtodo.mdf, 並在 資料夾 按滑鼠右鍵由快顯功能表執行 加入新的資料表 (T) 指令, 接著依圖示操作新增 ttodo 資料表有 fid ftitle fimage fdate 四個欄位 2-10

Chapter 2 ASP.NET MVC CRUD 初體驗 [ 註 ] 欄位前面若有圖示, 表示該欄位為主索引鍵 若要將欄位指定為主索引鍵, 只要點選該欄位並執行 設定主索引鍵 (K) 指令即可, 如左下圖 ; 若要移除主索引鍵, 只要點選該欄位並執行 移除主索引鍵 (K) 指令即可, 如右下圖 2-11

跟著實務學習 ASP.NET MVC- 第 次寫 MVC 就上手 4. 在 ttodo 資料表上按滑鼠右鍵由快顯功能表執行 顯示資料表資料 (S) 指令, 接著請在 ttodo 資料表窗格內輸入兩筆待辦事項記錄 Step 04 建立可存取 dbtodb.mdf 資料庫的 Model(ADO.NET 實體資料模型 ) 1. 在方案總管的 Models 資料夾按滑鼠右鍵並執行快顯功能表的 加入 (D)/ 新增項目 (W) 指令新增 ADO.NET 實體資料模型, 將該檔名設為 dbtodomodel.edmx (.edmx 副檔名可省略不寫, 該檔是用來記錄資料庫所對應的實體模型 ) 2-12

Chapter 2 ASP.NET MVC CRUD 初體驗 2. 當新增 dbtodomodel.edmx 的 ADO.NET 實體資料模型後, 即會開啟 實體資料模型精靈 視窗, 該視窗會一步步指引使用者完成模型 2-13

跟著實務學習 ASP.NET MVC- 第 次寫 MVC 就上手 2-14

Chapter 2 ASP.NET MVC CRUD 初體驗 3. 完成上面步驟後, 實體資料模型會建立在 Models 資料夾下 接著會進入下圖 Entity Designer 實體資料模型設計工具的畫面, 可以發現設計工具內含 ttodo 實體資料模型 2-15

跟著實務學習 ASP.NET MVC- 第 次寫 MVC 就上手 4. 請選取方案總管視窗的專案名稱 (prjtodo) 並按滑鼠右鍵執行快顯功能表的 建置(U) 指令編譯整個專案, 此時就可以使用 Entity Framework 來存取 ttodo 資料表 2.2.3 ASP.NET MVC 讀取作業 在上節建立好可以連接 ttodo.mdf 資料庫以及存取 ttodo 資料表的 Model, 接著練習將 ttodo 資料表內的所有記錄顯示在網頁上 上機練習 Step 01 建立 Home 控制器在方案總管的 Controllers 資料夾按滑鼠右鍵並執行快顯功能表的 加入 (D)/ 控制器 (T) 指令新增 HomeController.cs 控制器檔案, 控制器類別會繼承自 Controller 類別, 該控制器內含名稱為 Index 的 Action 動作方法 2-16

Chapter 2 ASP.NET MVC CRUD 初體驗 [ 註 ] 控制器類別名稱一定要使用 Controller 當結尾 2-17

跟著實務學習 ASP.NET MVC- 第 次寫 MVC 就上手 Step 02 撰寫 HomeController 控制器的 Index 的 Action 方法 當執行 http://localhost/home/index 時會執行 HomeController 的 Index 動作方法請撰寫如下灰底處的程式碼 FileName: Controllers/HomeController.cs 01 using System; 02 using System.Collections.Generic; 03 using System.Linq; 04 using System.Web; 05 using System.Web.Mvc; 06 07 using prjtodo.models; 08 namespace prjtodo.controllers 09 { 10 public class HomeController : Controller 11 { 12 dbtodoentities db = new dbtodoentities(); 13 14 // GET: Home 15 public ActionResult Index() 16 { 2-18

Chapter 2 ASP.NET MVC CRUD 初體驗 17 var todos=db.ttodo.orderbydescending(m => m.fdate).tolist(); 18 return View(todos); 19 } 20 } 21 } 1) 第 1-5 行 : 預設引用的命名空間 2) 第 7 行 : 存取 dbtodo.mdf 資料庫的 dbtodoentities 類別物件置於 Models 資料夾, 因此請引用 prjtodo.models 命名空間 3) 第 12 行 : 建立 dbtodoentities 類別 db 物件 4) 第 17 行 : 將 ttodo 資料表內的記錄依 fdate 欄位進行遞減排序並轉成串列再將結果指定 todos 變數 5) 第 18 行 : 將 todos 待辦事項的所有記錄傳到 Index.cshtml 的 View 檢視頁面 Step 03 建立 Index.cshtml 待辦事項列表 View 檢視頁面 1. 在 Index 的 Action 動作方法上按滑鼠右鍵並執行快顯功能表的 新增檢視 (D) 指令 2. 在加入檢視視窗指定檢視名稱為 Index ; 範本 (T) 為 List ; 模型類別 (M) 為 ttodo ; 資料內容類別 (D) 為 dbtodoentities ; 並勾選使用版面配置 頁 (U), 最後按下 Index.cshtml 檢視頁面 鈕 結果方案總管的 Views/Home 資料夾下會新增 2-19

跟著實務學習 ASP.NET MVC- 第 次寫 MVC 就上手 3. 按下執行程式鈕觀看網頁執行結果 2-20

Chapter 2 ASP.NET MVC CRUD 初體驗 4. 上圖標題欄位希望呈現中文名稱 影像 (fimage) 欄位以圖示顯示 待辦事項的完成日以日期顯示, 因此需要修改 Index.cshtml 檢視頁面的程式碼, 請將如下刪除線的程式碼刪除並修改成粗體字或指定的程式碼 FileName:Views/Home/Index.cshtml 01 @model IEnumerable<prjToDo.Models.tToDo> 02 03 @{ 04 待辦事項 ViewBag.Title = "Index"; 05 } 06 待辦事項 07 <h2>index</h2> 08 待辦事項新增 09 <p> 10 @Html.ActionLink("Create New", "Create") 11 </p> 12 <table class="table"> 13 <tr> 14 <th> 15 編號 16 </th> 17 <th> 18 標題 19 @Html.DisplayNameFor(model => model.ftitle) 20 </th> 21 <th> 2-21

跟著實務學習 ASP.NET MVC- 第 次寫 MVC 就上手 22 圖示 23 @Html.DisplayNameFor(model => model.fimage) 24 </th> 25 <th> 26 結案日 27 @Html.DisplayNameFor(model => model.fdate) 28 </th> 29 <th></th> 30 </tr> 31 32 @foreach (var item in Model) { 33 <tr> 34 <td> 35 @item.fid 36 </td> 37 <td> 38 @Html.DisplayFor(modelItem => item.ftitle) 39 </td> 40 <td> 41 <img src="~/images/@item.fimage" width="32" /> 42 @Html.DisplayFor(modelItem => item.fimage) 43 </td> 44 <td> 45 @DateTime.Parse(item.fDate.ToString()).ToShortDateString() 46 @Html.DisplayFor(modelItem => item.fdate) 47 </td> 48 <td> 49 @Html.ActionLink("Edit", "Edit", new { id=item.fid }) 50 @Html.ActionLink("Details", "Details", new { id=item.fid }) 51 @Html.ActionLink("Delete", "Delete", new { id=item.fid }) 52 </td> 53 </tr> 54 } 55 56 </table> 2-22

Chapter 2 ASP.NET MVC CRUD 初體驗 2.4 ASP.NET MVC 路由 (Routing) ASP.NET MVC 是以網址路由 (Routing) 規範方式將 URL 模式對應到實體檔案, 也就是說將 URL 模式連結至控制器, 而不是網頁, 而網址路由是定義在 App_Start 資料夾的 RouteConfig.cs 檔案中 上圖 RegisterRoutes 靜態方法中使用 routes.maproute() 方法定義預設的路由, MapRoute() 方法分別定義三個參數, 其說明如下 : 1. name: 設定路由名稱 2. url: 設定網址對應到控制器 (Controller) 動作(Action 方法 ) 以及路由值 (id, 即 Url 參數 ) 規則 3. defaults: 設定控制器 (Controller) 動作(Action 方法 ) 以及路由值 (id, 即 URL 參數 ) 的預設值 經由上面設定當程式執行時預設會啟動網址 http://localhost/home/index 代表是 ASP.NET MVC Web 應用程式專案的首頁 ; 在路由比對得到的控制器是 Home, 動作 Action 方法是 Index, 因此會執行 Controllers 資料夾下的 HomeController.cs( 即 Home 控制器 ) 的 Index() 方法, 再由 Index() 方法選擇對應的檢視頁面並傳給使用者 2-45

跟著實務學習 ASP.NET MVC- 第 次寫 MVC 就上手 2.5 習題 1. 在資料庫程式設計中,CRUD 字母所代表的縮寫下列何者錯誤? (1) C 為 Create 縮寫, 代表新增作業 (2) R 為 Read 縮寫, 代表讀取 ( 查詢 ) 作業 (3) U 為 Unit 縮寫, 代表單元作業 (4) D 為 Delete 縮寫, 代表刪除作業 2. CRUD 對應到 SQL 語法下列何者錯誤? (1) Create 對應 INSERT (2) Read 對應到 SELECT (3) Update 對應到 PUT (4) Delete 對應到 DELETE 3. CRUD 對應到 HTTP 方法 (RESTful API) 的操作下列何者錯誤? (1) Create 對應 PUT / POST (2) Read 對應到 GET (3) Update 對應到 GET (4) Delete 對應到 DELETE 4. 資料庫所對應的實體模型檔案副檔名為何? (1).html (2).cs (3).edmx (4).csv 5. 當建立 Home 控制器時, 控制器類別會繼承自 Controller 類別, 該控制器內含下列何者之 Action 動作方法? (1) Index (2) Get (3) Put (4) Select 6. _Layout.cshtml 版面配置頁預設使用下列何者前端套件? (1) Backbone (2) Slick (3) Bootstrap (4) Gulp 7. ASP.NET MVC 的專案架構, 下列何者錯誤? (1) 操作資料庫存取的程式置於 Models 資料夾下 (2) 檢視頁面會對應至控制器的動作 (Action) 方法名稱 (3) 控制器的名稱最後面要再加上 Controller (4) 控制器類別檔會放在 Views 資料夾下 2-46