[ASP.NET MVC + Vue.js] 動態問卷表單製作教學

[ASP.NET MVC + Vue.js] 動態問卷表單製作教學

動態表單是由程式生成使用者輸入的表單,依照需求不同,可以靈活產生不同的輸入選項。
最經典的案例是問卷表單,依題目的不同,可自由產生文字方塊、單選題或多選題的問卷表單。

許多人都用過 Google 表單,可以自由設計題目以及回答的選項,我們也可以在 ASP.NET MVC 製作出類似的表單。

Google 表單

在本次教學裡面,你將會製作一個動態問卷表單,題目是由資料庫來管理,我會建立題目和選項的資料表,新增一些測試資料,再由程式產生動態問卷表單。

等待使用者輸入完成後,由程式取得表單資料,最後存入資料表裡面。

接下來就以這個功能來實作一下,在文末會提供完整範例下載喔。

建立專案

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

開啟 Visual Studio 2022,建立新專案為「ASP.NET Web 應用程式 (.NET Framework)」

輸入專案名稱、位置之後,選擇「MVC」範本,就可以建立專案。

建立資料表

這裡用 SQL Server 做教學資料庫,尚未安裝 SQL Server 的話,可參考這篇文章: Windows Server 如何安裝 SQL Server 2019 免費開發版

開啟資料庫,我已建好教學資料庫 “Teach”,繼續建立新 Table,以下是新 Table Schema。

問卷題目

存放每一個題目的標題,還有回答類型。

問卷選項

如果是單選題或多選題就需要在此 Table 添加選項,額外增加一個欄位 “QuestOptionWithTextbox” 給使用者自行輸入,就像很多選項的「其他」一樣。

使用者答案

儲存使用者回答後的答案,如果是多選題就利用分隔符號 “|” 來組合答案,如果是附加文字的輸入,也是用分隔符號 “:” 來組合答案。

建立測試資料

這裡就預先輸入一些測試題目及選項。

問卷題目

問卷選項

Controller 讀取問卷表單

這裡我們在 Controller 讀取資料庫的題目及選項,顯示在畫面上。

我直接在預設的 HomeController 的 Index() 裡面編寫程式碼。

這裡使用到 Dapper 套件查詢資料庫,Dapper 是一個 ORM 物件關聯查詢套件,可以直接將資料庫查詢結果自動轉成物件。

關於更多 Dapper 的語法,可參考「黑暗執行緒」的文章教學

資料庫連線設定

資料庫連線設定放在 Web.config 裡面,可以加入以下語法設定連線字串。

資料庫連線設定

建立問卷 Models

在剛剛程式裡面有用到新的 Model 是「QuestForm」與「QuestOption」,需要對應的 Model 來存放資料。

在「Models > 加入 > 類別」增加一個類別。

在「Models > 加入 > 類別」增加一個類別

類別名稱叫「QuestModels」,接著在類別裡面增加兩個新類別。

加入 Dapper 套件

開啟專案的「參考 > 管理 NuGet 套件」。

開啟專案的「參考 > 管理 NuGet 套件」

搜尋 “Dapper” 找到最新的「Dapper」套件安裝。

搜尋 “Dapper” 找到最新的「Dapper」套件安裝

安裝完成後,就可在引用錯誤的語法上加入 using Dapper; 語法。

就可在引用錯誤的語法上加入 using Dapper; 語法

View 顯示動態問卷表單

這裡直接在 \Views\Home\Index.cshtml 增加語法,先清空預設的程式碼,然後加入以下語法。

此段語法是 Html 語法加上 Vue.js 的控制語法,可以依照陣列數量,來顯示問卷題目和選項。

語法 v-for="title in QuestForm" 是 Vue.js 的迴圈用法,點此參考官方教學

語法 v-if="title.QuestOptionType === 'Textbox'" 是 Vue.js 的條件用法,點此參考官方教學

語法 v-on:click="SendQuest()" 可呼叫 Vue.js 的方法。

產生動態表單許多人做法會將 Html 寫在後端的語法裡面,但這裡我的做法是保持 Html 在前端,只要善加利用 for 迴圈與 if 條件就可以靈活顯示動態元件。

引用 Vue3 前端套件

我們這次範例用的前端套件是 Vue3 這是 Vue.js 的最新版本,打開 \Views\Shared\_Layout.cshtml。
@Scripts.Render("~/bundles/bootstrap") 底下加入 Vue.js 套件 <script src="https://unpkg.com/vue@next"></script>

引用 Vue3 前端套件

引用完成後,就可以開始在 View 裡面編寫 Vue.js 語法。
有關 Vue3 的 CDN 引用語法可至官網文件查詢。

編寫 Vue3 語法

接著在 \Views\Home\Index.cshtml 底下繼續加入以下語法。

語法 mounted() 是 Vue3 的生命週期事件,當實例掛載完成後觸發,可參考官方教學

語法 $('#Quest_' + this.QuestForm[i].QuestNo).val() 是取得欄位值的語法,因為欄位是動態產生的,所以我用了 jQuery 的語法來取值,

語法 let answerObj = { 'QuestNo': this.QuestForm[i].QuestNo, 'UserAnswer': userAnswer }; 是要傳送到後端的資料,都建議以物件方式儲存,明確記錄 Key 與 Value,要避免使用陣列順序來儲存,以免後續維護時容易改錯。

語法 __RequestVerificationToken: $('@Html.AntiForgeryToken()').val() 是 ASP.NET MVC 防止跨網域攻擊的防護方法。

儲存使用者答案

當使用者按下傳送後,就會呼叫 HomeController 的 SaveUserAnswer() 方法,這裡就建立此方法。

此段語法主要是取得前端傳來的資料寫入資料庫裡面。

新增 Model

SaveUserAnswer() 方法的參數物件要在 \Models\QuestModels.cs 裡面建立。

測試功能

寫到這裡,所有的語法就完成了,接下來就按 F5 來執行一下專案。

你可以一邊測試一邊 Debug 比較好理解動態表單的運作原理喔。
送出表單後,就可以到資料表 QuestUserAnswer 裡面看一下寫入的資料。

範例下載

連結 GitHub 下載範例

推薦課程

相關學習文章

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

加入社團一起討論

關注我的 IG