[ASP.NET MVC] 前台會員註冊範例

[ASP.NET MVC] 前台會員註冊範例 #CH1 (附範例下載)

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

此篇文章主要以 ASP.NET MVC 為核心,前端使用 Vue.js 框架,而後端使用 SQL Server 當資料庫。

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

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

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

建立新 MVC 專案

尚未安裝 Visual Studio 2019 的話,請先參考此文章安裝:安裝程式開發工具 IDE Visual Studio 2019

開啟 Visual Studio 2019 選擇「建立新專案」,專案類型為「ASP.NET Web 應用程式(.NET Framework)」。

建立新 MVC 專案

輸入專案名稱及儲存位置。

建立新 MVC 專案

選擇「MVC」類型。

建立新 MVC 專案

完成後即會開啟 MVC 的範本專案,執行「F5」,可以瀏覽範本初始畫面。

調整 MVC 範本 – 佈局頁

打開 \Views\Shared\_Layout.cshtml 頁面。

預設的 JavaScript 引用是放在最下面,我建議要往上放在 <head></head> 之間,這樣之後在內容頁開發 Javascript 語法時才會正常。

將最下面的 jquery 及 bootstrap 引用位置語法改到上面的 <head></head> 之中。

將最下面的 jquery 及 bootstrap 引用位置語法改到上面的 <head></head> 之中

修改後結果。

將最下面的 jquery 及 bootstrap 引用位置語法改到上面的 <head></head> 之中

引用 Vue.js 底層元件

Vue.js 官方教學找到 CDN 網址。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

在佈局頁 Views\Shared\_Layout.cshtml,在 <head></head> 之中,加入 Vue.js 底層元件。

引用 Vue.js 底層元件

增加註冊及登入選單

打開佈局頁 Views\Shared\_Layout.cshtml,在原有的選單後面增加 2 個新連結。

增加註冊及登入選單

增加新 Controller – Member

我們將所有處理會員的頁面及邏輯都放在 MemberController 裡面。

在「Controllers」按右鍵,新增一個「控制器」。

增加新 Controller - Member

加入「MVC 5 控制器-空白」,取名為「MemberController」。

增加註冊頁面 Action

在MemberController 頁面增加一個回傳 Register 的 View 頁面。

增加註冊頁面 Action

增加註冊頁面 View

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

增加註冊頁面 View

選擇「MVC 5 檢視」加入,確認名稱為 “Register”,有勾選「使用版面配置頁」。

增加註冊頁面 View

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

增加註冊頁面 View

編寫註冊 View 語法

因為 VS 在MVC 的專案,預設加入了 jQuery 及 Bootstrap 的元件,所以我們可以直接使用 Bootstrap 語法來設計畫面。

預設加入了 jQuery 及 Bootstrap 的元件

我直接在 Bootstrap 3 的官方說明文件,取一些表單語法來用。

在 Register.cshtml 增加這些語法後,畫面就會出現輸入表單。

表單語法

加入 Vue.js 控制元件

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

我將剛剛的 HTML 修改一下,加入了 Vue.js 語法,並增加 DoRegister() 的方法,執行註冊時傳送表單到 Controller 頁面。

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

Vue.js 可取得網頁上的欄位資料,將資料利用 Ajax 傳送到後端。

var postData 主要在建立傳送表單,將 4 個欄位資料放進表單裡面,向後端傳送。

向後端傳送資料使用的是 jQuery.ajax() 方法,方法內指定要傳送的網址 (url)、Http 協定(method)、資料型別 (dataType)、資料內容 (data)、成功回傳方法 (success)、失敗回傳方法 (error)。

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

編寫註冊 Controller 語法

剛剛在 View 會傳送一個動作呼叫 Member/DoRegister 所以在 Controller 需要建立回應的方法。

這是我習慣的回應寫法,將傳入的來源宣告為 DoRegisterIn 物件,將要回傳的物件宣告為DoRegisterOut
命名方式為方法名稱的後面增加 In 及 Out 表示資料方向。
回傳的格式一律為 Json 格式。

在方法內主要是連線資料庫,檢查帳號是否存在,當不存在時,才會寫入一筆資料進資料庫。

在產生儲存密碼時,我使用了 SHA256 雜湊運算 + 密碼鹽的處理,提高了密碼保存的安全性,
有關密碼鹽的知識,可以參考維基百科說明

密碼儲存觀念

有關使用者重要的密碼儲存在資料庫的時候,建議使用不可逆的雜湊運算,例如 SHA256,在產生儲存密碼時,建議加入密碼鹽來混淆原密碼泄漏風險。

若使用者忘記密碼時,可以採用身份驗證後,直接更換使用者密碼。

設定資料庫連線字串

剛剛在連線資料庫的語法中使用到
System.Web.Configuration.WebConfigurationManager.ConnectionStrings["ConnDB"].ConnectionString;

這指的是連線字串由 Web.config 中取出 connectionStrings 名稱為 “ConnDB” 的連線字串,
接下來就開啟專案根目錄下的「Web.config」,設定資料庫連線字串。

在 <configuration></configuration> 範圍內加入語法:

connectionStrings

連線字串的參數需改成你們的環境,參數為:
Data Source=資料庫主機名稱或位址
Initial Catalog=資料庫名稱
User ID=帳號
Password=密碼

增加註冊 Model

剛剛在 Controller 宣告的 DoRegisterIn 及 DoRegisterOut 都是新物件名稱,所以還需要在 Model 建立類別。

要加入一個新 Model 的方法是在「Models」按右鍵選「加入 > 類別」。

增加註冊 Model

選擇「類別」,輸入與 Controller 同名的 “MemberModel”,執行「新增」加入類別。

增加註冊 Model

在 MemberModel 的類別內加入 DoRegisterIn 及 DoRegisterOut 兩個新類別。

DoRegisterIn 定義由 View 會傳入的欄位名稱,DoRegisterOut 則定義 Controller 處理完之後,會回傳給 View 的欄位名稱。

我對於 Model 的使用目的,均為定義 Controller 與 View 之間的傳遞欄位型別。

新增資料庫與資料表

我使用的資料庫是 SQL Server 2019,尚未安裝的朋友可以參考這篇文章先安裝:如何安裝 SQL Server 2019 免費開發版

安裝之後,使用 SSMS 登入,在檔案總管的「資料庫」按右鍵可以新增一個資料庫。

新增資料庫與資料表

我在本機新建一個 “Teach” 的資料庫,然後使用語法新增一個 “Member” 的資料表。

這是要儲存網頁的註冊資料。

測試範例

完成程式碼及資料庫後,就可以執行「F5」運行專案。
切換至「註冊」範例,輸入資料後,執行「註冊」功能。

確認畫面出現「註冊完成」後,就可以檢查資料庫。
使用 SSMS 登入資料庫,檢查 Member 的資料,
就可以看到剛剛在畫面上新增的資料了。

 

重點整理

  1. MVC 為專案核心,Vue.js 處理前端控制,SQL Server 處理資料儲存
  2. 調整佈局頁 Javascript 位置、加入 Vue.js 底層
  3. 使用 Bootstrap 樣式可快速製作美觀的表單
  4. 使用 Vue.js 可取得網頁上的欄位資料,將資料利用 Ajax 傳送到後端
  5. Controller 語法與資料庫連線,執行查詢與新增動作
  6. Model 定義 Controller 與 View 之間的傳遞欄位型別
  7. 建立資料庫,執行範例

範例下載

想要完整執行此範例可點擊下載: 範例下載

推薦課程

相關學習文章

如果你在學習上有不懂的地方,可以參考線上家教服務

如果你喜歡這篇文章,請幫我在上方綠色的拍手圖示按 5 下
使用 Google 或 FB 免費登入,你的鼓勵支持我繼續創作,寫出好的文章

[加入社團一起討論] 或是 [追蹤程式教練 Mars]

2 thoughts on “[ASP.NET MVC] 前台會員註冊範例 #CH1 (附範例下載)

  1. 連線字串寫在controller ?
    “在這裡我想跟你分享如何成為一位稱職的軟體工程師” <– 你認真的嗎

    1. 為了簡化示範教學,我才直接放在 Controller 裡面

      但想了一下 還是以正規的做法教學好了
      我已修改程式碼了

      謝謝你的建議與提醒

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *