使用ASP.NET MVC 實作購物網站(十一) | mvc編輯
![使用ASP.NET MVC 實作購物網站(十一)](https://i.imgur.com/axBPWDg.jpg)
之前我們完成了Product的新增功能,今天我們要來完成Product的編輯功能囉。今日目標:1.在Index頁面提供編輯按鈕2.完成編輯功能與頁面3.若使用者輸入錯誤編輯的Url請求,則導回Index頁面並顯示錯誤訊息我們下列步驟進行:1.在Index頁面中,新增[編輯]與[刪除]的ActionLink,幫助使用者轉導至對應頁面2.至ProductController,新增Edit()方法,輸入為id,此Action是準備接收剛剛步驟1Index頁面新增的[Edit]超連結之請求(Request)。3.準備加入Edit頁面,在View()按下滑鼠右鍵,點選[新增檢視]4.範本選擇[Edit],模型類別選擇[Product(Car...
![使用ASP.NET MVC 實作購物網站(十一)](https://i.imgur.com/H8YKUrg.jpg)
之前我們完成了Product的新增功能,今天我們要來完成Product的編輯功能囉。
今日目標:1. 在Index頁面提供編輯按鈕2. 完成編輯功能與頁面3. 若使用者輸入錯誤編輯的Url請求,則導回Index頁面並顯示錯誤訊息
我們下列步驟進行:
1. 在Index頁面中,新增[編輯]與[刪除]的ActionLink,幫助使用者轉導至對應頁面
2. 至Product Controller,新增Edit()方法,輸入為id,此Action是準備接收剛剛步驟1Index頁面新增的[Edit]超連結之請求(Request)。
3. 準備加入Edit頁面,在View()按下滑鼠右鍵,點選[新增檢視]
4. 範本選擇[Edit],模型類別選擇[Product(Carts.Models)]後點選[加入]
5. 此時Visula Studio會幫我們產生好Edit頁面,基本上不需更改
6. 回到ProductController,新增標示為[HttpPost]的Edit()方法,並加上處理程式碼。需注意的為97~103行,是將使用者回傳回來的變更資料儲存起來。
7. 運行專案,瀏覽網址[http://localhost:51352/Product[1]]可以發現我們在步驟1加上的操作按鈕[編輯]與[刪除],在其中一筆資料點選[編輯]
8. 此時會跳轉至Edit頁面,我們可以看到網址有把id(8)帶入。編輯其中一個欄位後點選[Save]按鈕
9. 此時會導回Index頁面,並且發現資料已經被變更囉,也顯示了成功編輯的提示訊息
10. 如果故意在網址列輸入編輯頁面並且為不存在的id,則會自動轉導回Index頁面並提示錯誤訊息
這樣就完成了Product的編輯功能囉,明天我們繼續實現Product的刪除功能。