iT邦幫忙

DAY 11
0

使用ASP.NET MVC 實作購物網站系列 第 11

使用ASP.NET MVC 實作購物網站 (十一) - Product的編輯功能

之前我們完成了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加上的操作按鈕[編輯]與[刪除],在其中一筆資料點選[編輯]

8. 此時會跳轉至Edit頁面,我們可以看到網址有把id(8)帶入。編輯其中一個欄位後點選[Save]按鈕

9. 此時會導回Index頁面,並且發現資料已經被變更囉,也顯示了成功編輯的提示訊息

10. 如果故意在網址列輸入編輯頁面並且為不存在的id,則會自動轉導回Index頁面並提示錯誤訊息

這樣就完成了Product的編輯功能囉,明天我們繼續實現Product的刪除功能。

*今天的原始碼請參考這裡


上一篇
使用ASP.NET MVC 實作購物網站 (十) - 資料驗證
下一篇
使用ASP.NET MVC 實作購物網站 (十二) - Product的刪除功能
系列文
使用ASP.NET MVC 實作購物網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
wilson1966
iT邦研究生 2 級 ‧ 2019-01-30 10:39:37

You downloaded this Project, An error message appears when you run this Project.
solution:
 In Models.Carts.edmx
 [Product]
 [CategoryId] Change to int16
 [Quantity] Change to int16

我要留言

立即登入留言