[ASP.NET Core MVC + Vue3 + Dapper] 前後台網站公告範例 - 後台查詢頁面教學 #CH1

[ASP.NET Core MVC + Vue3 + Dapper] 前後台網站公告範例 – 後台查詢頁面教學 #CH1 (附範例)

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

此教學範例會建立 ASP.NET Core MVC 新專案,新增一個後台公告管理頁面,透過查詢顯示資料庫內的公告資料。

查詢全部資料呈現是簡單的動作,而我會加上分頁查詢相對是較複雜的動作,我會示範一個我常用的分頁方法給各位參考。

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

建立專案

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

ASP.NET Core Web 應用程式 (Model-View-Controller)

輸入專案名稱、路徑。

輸入專案名稱、路徑

架構選擇「.NET 6.0」版本,按下「建立」就會建立此專案。

架構選擇「.NET 6.0」版本,按下「建立」就會建立此專案

設計查詢頁面

這裡我們新增一個 Controller 專門處理後台的公告維護。
在 Controllers 按右鍵新增一個「控制器」。

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

選擇「MVC 控制器 – 空白」, 取名為「AdmAnnoController」。

在 \Controllers\AdmAnnoController.cs 檔案的 Index() 按右鍵選「新增檢視」,可以新增它的 View 頁面。

新增它的 View 頁面

選擇「Razor 檢視」,名稱維持預設「Index」,勾選「使用版面配置頁」,按「新增」。

畫面設計我們就從 Bootstrap 複製一些適合查詢顯示的範例到 View 裡面。
我用到的樣式有 Card, Form, Table, Button

我設計了查詢畫面,直接使用以下語法取代 \Views\AdmAnno\Index.cshtml 原有的語法。

按 F5 執行網頁後就會看到以下的畫面。

做到這裡主要是先設計我們的畫面,接下來就要設計資料庫然後開始寫程式碼了。

資料庫語法

我們會使用 SQL Server 來當作資料來源,我已經新增好 “Teach” 的資料庫了,接著以下語法新增公告 Table。

有了 Table 之後,這裡我就直接新增 16 筆測試資料,因為我們第一個功能是查詢,有了資料才能看出結果。

專案基礎設定

這裡會先針對 ASP.NET Core MVC 專案增加一些基礎設定,以方便後續開發。

加入 Vue3 套件

Vue3 是前端控制欄位的框架類別庫,打開 \Views\Shared\_Layout.cshtml 檔案,在下方 JavaScript 引用增加 Vue3 類別庫語法,順序的要求要放在 jQuery 之後才行。

<script src="https://unpkg.com/vue@3"></script>

當在 Layout 加上 Vue3 引用後,我們就可以在所有的頁面使用 Vue3 語法了,此引用語法來源可參考官方文件

加入 jQuery BlockUI Plugin 套件

jQuery BlockUI 是讓前端向後端呼叫時,暫時鎖定前端畫面,以防止二次點擊等問題。
在剛剛加入 Vue3 套件的下方,加入引用語法。

<script src="https://malsup.github.io/jquery.blockUI.js"></script>

停用 Json 回傳預設小寫設定

在 .NET Framework 使用 Json 回傳時,前端收到的 Json 物件大小寫設定與 ViewModel 相同,而在 .NET Core 時則預設開頭為小寫 (駝峰式命名),這裡我都會調整成與 ViewModel 相同。

在 Program.cs 加入以下語法:

查詢公告

這裡會開始寫程式碼,在設計畫面上有 2 個查詢欄位,1 個查詢按鈕,當按下查詢鈕後,帶入查詢條件,從資料庫內讀取資料呈現。

View 附加 Vue3 語法

剛剛我們在 Index.cshtml 使用 Bootstrap 設計好了畫面,接著要加上 Vue3 讓查詢動起來。
將以下的語法全部覆蓋至 \Views\AdmAnno\Index.cshtml 裡面。

Controller 語法

在 View 查詢後會呼叫 ~/AdmAnno/Query,在 \Controllers\AdmAnnoController.cs 加入以下 Action。

讀取 appsettings.json

我將資料庫連線放在 appsettings.json 裡面,打開 appsettings.json 後,加入以下連線字串。

"ConnectionStrings": { "SqlServer": "Data Source=127.0.0.1;Initial Catalog=Teach;Persist Security Info=false;User ID=test;Password=test;" }

在 .NET 6 要取得 appsettings.json 的設定來源,要在 Controller 增加建構子讀取 Configuration。

安裝 Dapper

我資料庫互動物件使用微型 ORM 套件 Dapper,需要安裝 Dapper 才能使用。
開啟「相依性 > 套件 > 管理 NuGet 套件」。

開啟「套件 > 管理 NuGet 套件」

搜尋「Dapper」,安裝此套件。

搜尋「Dapper」,安裝此套件

建立 ViewModel

ViewModel 是用來定義 Controller 與 View 之間的欄位定義,我們剛剛建立了新 Controller,所以這次來建立它對應的 ViewModel。
在「Model 按右鍵 > 加入 > 類別」。

在「Model 按右鍵 > 加入 > 類別」

然後命名為 “AdmAnnoViewModel”。

然後命名為 “AdmAnnoViewModel”

然後在 AdmAnnoViewModel 類別裡面,加入在 Controller 用到的 ViewModel。

完成到這裡之後,我們就可以執行簡單的查詢功能了,按下 F5 後,執行「查詢」鈕,就可以顯示出資料庫內的資料了。

可是這時候我們還缺一個分頁的功能,接下來我們就繼續完成分頁的教學。

增加分頁查詢功能

網路上分頁的樣式很多種,而我提供我最常用的 Vue3 分頁元件給各位參考,我們前端是建立在 Vue3 上面的,所以我會在 Vue3 新增一個分頁的元件。

這段的教學會比較複雜一點,我是逐步語法教學,如果無法理解的話,可能下載看一下完整的範例來比對會比較容易懂一點。

新增 VuePagination.js 元件

分頁元件是一個多數頁面都會用到的功能,建議可以新增一個檔案,將分頁邏輯寫在裡面,然後在 Vue3 將元件引入。

在 /js 目錄內新增一個檔案,檔案命名為 “VuePagination.js”。

在 /js 目錄內新增一個檔案

然後在VuePagination.js 內貼上以下語法。

引用 VuePagination.js 元件

在 \Views\Shared\_Layout.cshtml 的 JavaScript 增加引用 VuePagination.js 檔案。

<script src="~/js/VuePagination.js"></script>

註冊 VuePagination.js 元件

Vue3 元件需要註冊在 Vue.createApp({}); 內才行,為 Vue 實體註冊元件,名稱為 “vue-pagination”。
app.component('vue-pagination', VuePagination);

使用分頁元件

註冊好之後,就可以在畫面上分頁的位置,放上它的元件。

<vue-pagination v-bind:pagination="grid.pagination" v-on:requery="reQuery"></vue-pagination>

因為分頁會重新查詢,所以這元件會呼叫查詢頁的 reQuery() 功能,執行重新查詢。

View 查詢功能調整

我們剛剛已經寫好了基本的查詢 Query(),這裡因為分頁功能再調整一下,並增加一個 reQuery() 讓換頁時可以重新呼叫。
調整後的方法是:

grid 物件增加分頁屬性

在 Vue3 原有宣告的 data 屬性 grid 要增加一個分頁屬性:

Controller 查詢功能調整

在 Controller 原本也寫好了基本查詢功能,這裡因增加分頁查詢後,也要調整一下語法,可用以下語法直接取代原本的語法:

在 SQL Server 的分頁,我是直接修改 SQL 語法,先查詢總筆數,再查詢需要的範圍資料,當每次換頁時,都會重新計算,只查詢需要的資料範圍。

ViewModel 調整

ViewModel 的部份就是增加分頁的物件,這裡我就全部貼上語法,可以直接取代之前的 Model。

當完成這裡後,就可以測試分頁的功能了,按 F5 執行專案,查詢資料後就會顯示分頁的結果。

切換第 2 頁。

這是我很常用的前端分頁元件,分享給你。

範例下載

付費後可下載此篇文章教學程式碼

下一篇教學文章

推薦課程

相關學習文章

如果你在學習上有不懂的地方,可以參考專業諮詢或線上家教服務,我想辨法解決你的問題
如果文章內容有錯誤的地方,幫我在下方留言通知我一下,謝謝
喜歡我的文章,請幫我在上方綠色拍手圖示按 5 下,也歡迎按月贊助,鼓勵我繼續創作,謝謝

加入社團一起討論

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

one × three =