天天看點

ASP.NET MVC 音樂商店 - 5. 通過支架建立編輯表單

在上一章,我們已經從資料庫擷取資料,然後顯示出來,這一章,我們将允許編輯資料。 

我們将要建立稱為 StoreManager 的控制器,對于這個控制器,我們将通過使用 ASP.NET MVC3 中提供的腳手架功能來實作。在添加控制器的視窗中,注意需要選中 為”建立”、”更新”、”删除”和”詳細資訊” 方案添加操作方法。

ASP.NET MVC 音樂商店 - 5. 通過支架建立編輯表單

在我們點選添加按鈕之後,你将會看到 ASP.NET MVC3 的支架機制已經為你在 Controllers檔案夾中添加了一個名為 StoreManagerController 的控制器。

原文中說:建立了一個帶有本地實體架構變量的 StoreManagerController 控制器

但是,在我的 VS2010 中實際并沒有建立實體架構變量,在前面的資料通路部分,我機器上的實體架構也是手工下載下傳,并安裝的。

原文還說,建立了 Create.cshtml,Delete.cshtml,Details.cshtml,Edit.cshtml,以及 Index.cshtml 視圖。 這些視圖使用了強類型的 Album 類型。

但是,在對話框中并沒有選擇實體類型的選項,是以,在我這裡,實際上也沒有建立相應的視圖,更沒有強類型一說了,不過,這些其實都是小問題。

ASP.NET MVC 音樂商店 - 5. 通過支架建立編輯表單

新的  StoreManager 控制器包含了 CRUD (建立,讀取,更新,删除)控制器 Action ,原文中說:這些控制器知道如何使用 Album 模型和實體架構的上下文對象來通路資料。

由于并沒有建立實體上下文對象,是以,我這裡也沒有實際的資料通路代碼存在,在下面的說明中,我們将手工建立這一部分。

是以,我們手工在控制器中增加資料通路的實體上下文對象。

這裡我們先手工生成視圖,然後再進行修改。

首先為 Index 增加強類型的視圖。需要在對話框中選中 建立強類型視圖,然後,選中模型類,在支架模闆中選擇 List,這是因為我們需要在 Index 視圖中處理專輯的清單。

ASP.NET MVC 音樂商店 - 5. 通過支架建立編輯表單

使用 List 支架之後,建立的視圖中,模型的類型将會生成為如下的實作。

記住,雖然腳手架可以為我們自動生成代碼,但隻是标準的 ASP.NET MVC 代碼, 就像我們的這個教程可以節省你的學習時間一樣,支架可以節省你手工建立控制器,以及強類型視圖的時間,但是,具體的細節内容還是需要自己來處理。

是以,讓我們來快速編輯一下 StoreManager 的 Index 視圖(/Views/StoreManager/Index.cshtml)。這個視圖通過一個 table 表格顯示專輯的清單,包含專輯的公共屬性,還帶有進行編輯/詳細内容/删除的連結。我們要删除專輯藝術家的連結,我們不需要顯示這個值,在視圖中的 <table> 部分,删除 AlbumArtUrl 相關的 <th> 和  <td> 元素,下面的代碼中高亮顯示的部分。

ASP.NET MVC 音樂商店 - 5. 通過支架建立編輯表單

這樣, Index 視圖的代碼應該如下所示:

視圖雖然修改完成了,但是 Index 方法中還沒有向視圖提供資料的代碼,修改 Index 方法,增加從資料庫中擷取資料的處理邏輯。

現在,運作程式,浏覽 /StoreManager,注意,在路由的配置中,預設的 Action 将會使用 Index,修改之後的視圖顯示了帶有編輯,詳細内容和删除連結的專輯清單。

ASP.NET MVC 音樂商店 - 5. 通過支架建立編輯表單

需要注意的是,編輯、詳細内容和删除連結的視圖需要我們手工建立之後才能使用。

我們依次建立這些視圖。将光标放置在 Edit 的 Action 方法内,單擊滑鼠右鍵,在彈出菜單中選擇添加視圖。

ASP.NET MVC 音樂商店 - 5. 通過支架建立編輯表單

建立編輯視圖的對話框,注意使用的支架為 Edit。

同樣,修改 Edit 的 Action 方法。

需要注意的是,你會看到在 Controller 中存在兩個同名的 Edit 方法,第二個方法前面使用了 [HttpPost] 标簽,這個标簽辨別當請求類型為 Post 方式的時候,将會由這個方法進行請求的處理,否則,使用第一個 Edit 方法進行處理。

在 ASP.NET MVC 中,已經不再使用視圖狀态了,在需要使用者編輯資料的時候,我們首先提供一個編輯表單,使用者得到這個編輯表單的方式一般是通過某個超級連結,這樣的請求方式 将是 GET 請求,當這樣的請求到達伺服器的時候,我們向用戶端傳回編輯頁面,允許使用者編輯資料。

在編輯資料的窗體中,我們提供一個 form 表單,這個表單的送出方式設定為 Post 方式,使用者在送出表單的時候,将填寫的資料送出到伺服器。由于此時的送出方式成為  Post 方式,這就允許我們在伺服器上通過請求的送出方式區分出來請求的類型。

這樣,我們就可以在 Controlller 中提供同名的 Action 來處理使用者的編輯操作,Get 方式的 Action 用來提供編輯表單,而 Post 方式的 Action 用來擷取使用者送出的資料。這種方式在 ASP.NET MVC 中使用很多。

修改後的 Edit 方法如下所示:

建立詳細内容視圖。注意使用的支架。

ASP.NET MVC 音樂商店 - 5. 通過支架建立編輯表單

相應修改 Details 方法的處理邏輯。

建立删除視圖的對話框,注意使用的支架模闆。

ASP.NET MVC 音樂商店 - 5. 通過支架建立編輯表單

同樣, Delete 方法也有兩個,一個用來處理 Get 方式的請求,一個用來處理點選确認删除之後的請求。

現在,可以運作一下了,通路 /StoreManager 可以得到如下的結果。

ASP.NET MVC 音樂商店 - 5. 通過支架建立編輯表單

點選編輯連結,将會顯示一個帶有專輯字段的編輯表單。

ASP.NET MVC 音樂商店 - 5. 通過支架建立編輯表單

點選位于底部的傳回清單連結,然後,點選詳細内容連結, 将會顯示單個專輯的詳細資訊。

ASP.NET MVC 音樂商店 - 5. 通過支架建立編輯表單

再來一次,回到清單,點選删除連結,現在将會看到一個确認對話框,顯示了專輯的詳細内容,請你确認是否真的需要删除。

ASP.NET MVC 音樂商店 - 5. 通過支架建立編輯表單

點選底部的删除按鈕,将會删除這個專輯,然後傳回 Index 清單視圖,專輯已經被删除了。

我們的工作還沒有完成,我們要開始對控制器和視圖的 CRUD 操作進行處理了。