[ASP.NET MVC] 前台會員修改個人資料範例教學 #CH3

[ASP.NET MVC] 前台會員修改個人資料範例教學 #CH3

在學習 C# 與資料庫的互動方式,有一個常見且實用的教學就是會員登入、註冊與修改會員資料等範例,學習過程中會用到資料庫新增、修改與查詢動作,是理解程式與資料庫互動的常見程式碼。
當學會了這個範例,將來為客戶開發系統的時候,馬上可以派上用場。

此篇文章是繼上一篇文章: 前台會員登入範例 #CH2 接續教學。

範例內容主要以 ASP.NET MVC 為核心,前端使用 Vue.js 框架,而後端使用 SQL Server 當資料庫。

Vue.js 是前端3 大主流框架的其中之一,目標是透過簡單的 API 提供開發者實作資料綁定與操作網頁上的元件,Vue.js 的核心把焦點關注在狀態與畫面的同步層級上,適合與其他 JavsScript 函式庫整合,同時也適合當作 ASP.NET MVC 的前端框架。

SQL Server 是微軟推出的關聯式資料庫,使用 SQL 語言就可以輕鬆操作資料庫。

編寫此教學文章是為了幫助更多新加入的軟體工程師們,有更簡單實用的範例,可以快速學習程式語言。
這次我將會簡化這個基礎必學的前端會員範例,適合剛接觸 C# 與資料庫程式的新手學習。
文末有提供此操作範例的完整程式碼下載,有需要可以自行下載瀏覽。

在 MemberController 增加修改個人資料頁面

在上一篇已經完成了 MemberController.cs 的建立。

已經完成了 MemberController.cs 的建立

這裡要新增一個修改個人資料的畫面,在 MemberController 類別內,增加 EditProfile() 是呈現畫面的 Action。

增加 EditProfile() 是呈現畫面

增加修改個人資料頁面 View

EditProfile() 語法上按右鍵選「新增檢視」。

在 EditProfile() 語法上按右鍵選「新增檢視」

選擇「MVC 5 檢視」加入。

選擇「MVC 5 檢視」加入

確認名稱為 “EditProfile”,有勾選「使用版面配置頁」。

確認名稱為 “EditProfile”,有勾選「使用版面配置頁」

新增之後在 Views\Member\EditProfile.cshtml 會新增 View 檢視頁面。

在 Views\Member\EditProfile.cshtml 會新增 View 檢視頁面

編寫修改個人資料 View 語法

在 Bootstrap 3 的官方範例,有提供表單的範例面版的範例按鈕的範例

我從 Bootstrap 3 範例中語法組合變成我的修改個人資料畫面。

在 EditProfile.cshtml 增加這些語法後,畫面就會出現修改個人資料及修改密碼表單。

修改個人資料及修改密碼表單

這只是一個沒有功能,純畫面的表單,目的在展示 Bootstrap 的語法。

加入 Vue.js 控制元件

我們在前面 _Layout.cshtml 已經加了 Vue.js 的底層元件,所以這頁面,就可以套用 Vue.js 的寫法。

我將剛剛的 HTML 修改一下,加入了 Vue.js 語法,並增加 GetUserProfile(),DoEditProfile(),DoEditPwd() 3 個方法,可傳送表單到 Controller 頁面。

我額外增加了 Bootstrap 的 modal 樣式,來顯示後端執行時的錯誤,這樣方便 Debug。

以下程式碼可以整個取代 EditProfile.cshtml 內容。

我使用 Vue.js 生命週期中的 mounted 事件,當 Vue 掛載完成,就呼叫 GetUserProfile() 方法取得個人資料,取得後端會員資料後,再放到前端畫面上。

當使用者修改資料時,就呼叫 DoEditProfile()DoEditPwd() 方法,將前端資料往後端送。

關於 Vue.js 的教學語法,可以到官網上面查詢,官網有完整的教學。

編寫Controller 語法

取得個人資料 Controller 語法

剛剛 View 在頁面載入完成時會呼叫 ~/Member/GetUserProfile 方法,以下是 GetUserProfile() 的 Controller 寫法。

這方法主要是取得 Session 中的 UserID,將 UserID 查詢資料庫 Member 表中的 UserID 欄位,將資料表中的資料,回傳到前端去。

修改個人資料 Controller 語法

當在畫面上執行「修改個人資料」按鈕,View 會呼叫 ~/Member/DoEditProfile,以下是 DoEditProfile() 的 Controller 寫法。

這次方法特別在開頭加一個 [ValidateAntiForgeryToken] 驗證,這是防止跨網站偽造要求的攻擊,也稱為 CSRF (Cross-Site Request Forgery) 攻擊,這是對 MVC 網頁提升安全性的做法。

在前端的 DoEditProfile() 方法內在 Ajax 傳送資料時,需要加一段 __RequestVerificationToken: self.GetToken() 參數,將前端驗證碼往後端傳送,後端才能驗證來源是合法來源。

修改資料時的 SQL 都是使用參數化填值方式,這是為了防止 SQL 注入攻擊。

此功能是先經過登入才能呈現的畫面,在登入成功時,已經帳號存入 Session 內,在此頁面帳號由 Session 來取得,就不需要由前端傳送了。

修改密碼 Controller 語法

當在畫面上執行「修改密碼」按鈕,View 會呼叫 ~/Member/DoEditPwd,以下是 DoEditPwd() 的 Controller 寫法。

修改密碼建議使用者輸入 2 次,以確保沒有手誤,同時在後端驗證 2 次密碼是否相同。

資料庫內的密碼建議經過雜湊運算後再儲存,以防止被盜取密碼時,使用者重要密碼外洩。

此功能是先經過登入才能呈現的畫面,登入帳號由 Session 來取得,就不需要由前端傳送了,修改資料時的會員帳號也是由 Session 內的值提供。

增加修改個人資料 Model

剛剛在 Controller 建立時,新增了一些新參數類別及新回傳類別,打開 MemberModel.cs 檔案,在裡面增加新增的類別。

關於 Controller 與 View 之間的資料傳遞物件都定義在 Model 裡面

測試修改個人資料功能

之前做登入的時候,登入成功只是 alert 訊息而已,這次在 alert 之後,增加導向到「修改個人資料」頁面。

打開 \Views\Member\Login.cshtml 頁面,在 DoLogin() 方法內增加以下語法。

window.location = '@Url.Content("~/Member/EditProfile")';

增加導向到「修改個人資料」頁面

在 VS 按 <F5> 執行專案,先在「登入」畫面,輸入正確的帳號密碼,就會跳到「修改個人資料畫面」。

在顯示「修改個人資料」頁面會先顯示會員資料。

顯示「修改個人資料」頁面會先顯示會員資料

接著可以分別測試「修改個人資料」與「修改密碼」兩個功能。

重點整理

  1. 在 Controller 增加 EditProfile() 顯示修改個人資料畫面
  2. 使用 Bootstrap 樣式可快速製作美觀的表單
  3. 在 View 增加取得個人資料、修改個人資料及修改密碼的方法
  4. 在 Controller 後端增加對應的 3 個方法
  5. Model 定義 Controller 與 View 之間的資料傳遞物件

範例下載

此範例包含完整範例內容,連結 GitHub 下載範例

下一篇教學文章

相關學習文章

如果你在學習上有不懂的地方,需要諮詢服務,可以參考站長服務,我想辨法解決你的問題
如果文章內容有過時、不適用或錯誤的地方,幫我在下方留言通知我一下,謝謝

加入社團一起討論

關注我的 IG

4 thoughts on “[ASP.NET MVC] 前台會員修改個人資料範例教學 #CH3

  1. 我從台灣 .NET 技術愛好者俱樂部過來瞧瞧~~
    有幾個想法交流交流:

    1. 連取得個人資料好像都依賴著前端ajax,感覺C#沒什麼大用途了XD…這邊我會想要在後端Action就return model回去,可能是為了展示Vue?
    2. 可以用你的Code好好研究Vue一下~因為寫得很清楚
    3. Action部分,是不是補上Method會好一點?
    4. url部分,因為我曾經吃過虧,看到波浪就怕,是不是使用@Url.Action()會比較好呢?
    5. 取token部分我還沒想過這樣取,挺酷,我通常是把token放在layout,然後統一用jquery去取__RequestVerificationToken的值

    1. 我回答一些我的想法

      1. 從前端送 Ajax 到後端取個人資料,是覺得畫面比較快載入,資料可以後補上,假如取資料的速度慢,也不會影響前端等待太久的體驗。

      2. 謝謝

      3. Action部分,是不是補上Method會好一點,是指說將共用的方法放在 Method 然後在呼叫 Method 就行嗎?
      因為我在寫範例,所以改成全部放在一起看,我實務上的專案,相同方法會抽離出來的。

      4. 你要改成 @Url.Action() 也行,但遇到想再增加 ?Param=value 會怎麼加呢?
      我用 @Url.Content 是覺得比較靈活一點

      5. 取 token部分我也是因為範例,如果拉到各頁面展示,以實務開發,也是建議放在 layout 裡面共用

      謝謝你的交流

      1. 3 哦抱歉我說的太含糊~~我指的是在Action前面加上 [HttpPost] 或者 [HttpGet] 標籤,算是MVC在用的

        4. 參數的用法,
        @Url.Action(“ActionName”,”ControllerName”, new {Param=value});
        不過意思的確是一樣,你用Content感覺會比較像前端串參數的用法。

        1. 3. [HttpPost] 或者 [HttpGet] 這個我知道,但我不寫的原因是因為兩者都呼叫的到,所以就不加了,我是希望程式碼愈少愈好
          4. 看起來兩個方式都可以達到同樣的結果, @Url.Action(“ActionName”,”ControllerName”, new {Param=value}); 的方式會更適合 MVC 使用,這個我思考一下未來要不要替換成這個,謝啦

Comments are closed.