[ASP.NET Core MVC][Vue3][Dapper] 前後台網站公告範例 - 後台編輯頁面教學

[ASP.NET Core MVC][Vue3][Dapper] 前後台網站公告範例 – 後台編輯頁面教學 #CH2

網站開發常見的一種功能是在後台新增維護資料,然後在前台顯示資料,類似網站公告或最新消息功能,此次教學將會教你如何建立後台公告維護界面,並在前台顯示資料。

此篇文章是接續上一篇文章 [ASP.NET Core MVC + Vue3 + Dapper] 前後台網站公告範例 – 後台查詢頁面教學 #CH1 的教學文章。

在上一篇文章裡我們完成了查詢頁面的製作,接著這篇會完成新增、修改及刪除功能。

此範例使用 ASP.NET Core MVC 版本是 .NET6,前端使用 Vue3 框架,後端資料庫使用 SQL Server 2019,使用 Dapper 套件連線,文末有範例可以下載。

新增公告功能

開啟 \Views\AdmAnno\Index.cshtml,新增公告的畫面設計同樣在這檔案內實作,在 Html 內我將不同的功能用不同的 Div 區隔開來,並給定 id 以方便做隱藏與顯示。

加入新增畫面設計

查詢的區域 id 是 “QueryPanel”,在 <div id="QueryPanel" class="card"> 結束的位置繼續加上新增畫面設計。

這裡多了兩個方法 BackPage()AddSave(),接著在下面的 Vue3 語法加入兩個新方法。

增加 vue 物件

一個表單的傳送,我會新增對應的 form 物件,在 Vue3 的 data 區增加新增 form 物件。

加入 bootstrap-datepicker 套件

我設計的欄位裡面有一個日期欄位,當使用者要輸入日期時,有日期選取套件會方便輸入,這裡我提供一個我常用的日期選取套件:bootstrap-datepicker

打開 \Views\Shared\_Layout.cshtml 在 css 增加此引用:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">

在 Javascript增加此引用:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

設定日期選取套件

回到 index.cshtml,新增公告日期的欄位 id 是 “addFormAnnoDate”,然後在最下方增加 jQuery 的語法綁定日期選取。

新增公告 Controller 語法

打開 \Controllers\AdmAnnoController.cs,加入新方法:

新增公告 ViewModel 語法

打開 \Models\AdmAnnoViewModel.cs,加入新 Model:

顯示新增頁面按鈕

完成了新增功能語法,接著在查詢頁面增加一個按鈕,當按下時,可以切換至新增畫面。
我在查詢鈕旁邊加入新增按鈕。

<button type="button" class="btn btn-primary" v-on:click="OpenAddPanel()">新增</button>

然後在 Vue3 增加一方法:

測試新增功能

按 F5 執行專案,按下「新增」功能就會切換至新增頁面。

測試新增功能

點選日期欄位就會出現日期選取功能。

測試新增功能

輸入資料按「儲存」即會新增資料至資料庫內。

測試新增功能

新增完成後,查詢頁面就會顯示剛剛新增的資料。

測試新增功能

修改公告功能

接著我們就繼續實作修改功能,我會在查詢列表資料前面加上編輯按鈕,點擊後切換至修改頁面,修改完按儲存後寫入資料庫並回至查詢頁面。

加入修改畫面設計

<div id="AddPanel" class="card" style="display:none;"> 結束的位置繼續加上修改畫面設計。

這裡多了新方法 EditSave(),接著在下面的 Vue3 語法加入新方法。

加入編輯按鈕

編輯按鈕會放在 Grid 資料的前面,在查詢 Grid 加入一個欄位:

<th style="width: 30px;text-align:center;"></th>

<td><a v-on:click="EditMode(index)" style="cursor: pointer;">編</a></td>

這裡多了 EditMode(index) 方法,接著在 Vue3 也新增此方法:

增加 vue 物件

在 Vue3 的 data 區增加新增 form 物件。

設定日期選取套件

修改區也有一個公告日期欄位, id 是 “editFormAnnoDate”,然後在最下方增加 jQuery 的語法綁定日期選取。

修改公告 Controller 語法

打開 \Controllers\AdmAnnoController.cs,加入新方法:

修改公告 ViewModel 語法

打開 \Models\AdmAnnoViewModel.cs,加入新 Model:

測試修改功能

按 F5 執行專案,在查詢後,前面會出現 ”編” 按鈕。

測試修改功能

點擊 “編” 後切換至修改頁面。

測試修改功能

修改後儲存完成即會回到查詢頁面,並自動重新查詢。

刪除公告功能

這裡實作最後一個刪除功能。
我會在 Grid 前面增加一個勾選,在 Grid Header 區增加一個「全選/全不選」的勾選,然後在下方增加「勾選刪除」的按鈕。

增加刪除勾選及按鈕

在 index.cshtml 的 Grid 增加 Header 的勾選:

<th style="width: 30px;text-align:center;"><input type="checkbox" v-model="grid.headerCheck" v-on:change="HeaderCheck()" /></th>

在資料前面增加勾選:

<td align="center"><input type="checkbox" v-model="item.selCheck" /></td>

在 <table> 結束的位置加上刪除按鈕:

<div style="float:left">
<input type="button" class="btn btn btn-danger btn-sm" value="勾選刪除" v-on:click="DelCheck()" />
</div>

這裡多了兩個新方法 HeaderCheck()DelCheck(),接著在 Vue3 新增這兩個方法:

調整 grid 物件

在 data 的 grid 物件,增加屬性:
, headerCheck: false

查詢方法增加屬性

勾選欄位是一個新屬性,需要在每個 grid.datas 都擁有,我們在查詢回傳之後,手動附加這個新屬性放到 datas 裡面。

刪除公告 Controller 語法

打開 \Controllers\AdmAnnoController.cs,加入新方法:

刪除公告 ViewModel 語法

打開 \Models\AdmAnnoViewModel.cs,加入新 Model:

測試刪除功能

按 F5 執行專案,在查詢後前面會增加勾選,在上面的勾選可以執行全選或全不選的功能,在需要刪除的資料前面勾選,再按下方的「勾選刪除」即會刪除資料。

測試刪除功能

做到這裡恭喜你完成了全部的功能,這個後台維護界面對我來說是很標準的功能,有很多資料表的維護 (新增、修改、刪除、查詢) 都會用這樣功能來修改資料。
你也可以將此功能套用在其他的資料表維護上。

範例下載

連結 GitHub 下載範例

下一篇教學文章

相關學習文章

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

加入社團一起討論

關注我的 IG