[ASP.NET MVC] 產生 Bootstrap + Vue.js 多層式選單範本教學

[ASP.NET MVC] 產生 Bootstrap + Vue.js 多層式選單範本教學

在建構一個網站時,通常都會有選單來連結各頁面,常見的選單為一層或二層而已,結構簡單程式也比較好寫。
這次我要教學的是多層式的選單,算是比較複雜的選單邏輯,階層的數量由資料庫內決定,程式部份則由遞迴方式檢查階層深度,再輸出陣列到前端,前端使用 Bootstrap 樣式以及 Vue.js 綁定元件來呈現多層選單結果。

文章內程式碼為重點展示,完整範例可至文末連結下載喔。

建立專案

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

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

輸入專案名稱、位置之後,選擇「MVC」範本,並取消「設定 HTTPS」的勾選,就可以建立專案。

選擇「MVC」範本,並取消「設定 HTTPS」的勾選

使用 Bootstrap 選單範本

在網路上有一個 Bootstrap 多層式選單的範本: Bootstrap Multi level Navbar Menu

Bootstrap Multi level Navbar Menu

(圖片來源: Bootstrap Multi level Navbar Menu)

這範本所使用的 js 版本有
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js

ASP.NET MVC 預設的 jquery 及 bootstrap 3.4.1 版本與此範本的 js 版本相近,所以不需要升級調整。
我們就使用這個範本放到我們的專案裡面。

如果你找到的 Bootstrap 版本較新的話,那就需要先升級 ASP.NET MVC 預設的 Bootstrap 版本喔。

修改佈局檔 _Layout.cshtml

開啟專案的「\Views\Shared\_Layout.cshtml」檔案。

開啟專案的「\Views\Shared\_Layout.cshtml」檔案

原本 _Layout.cshtml 裡面就有一個選單了,語法是 <div class="navbar navbar-inverse navbar-fixed-top"> 開頭的,這裡我們要將原本的選單移除。

原本 _Layout.cshtml 裡面就有一個選單了,語法是 <div class="navbar navbar-inverse navbar-fixed-top"> 開頭的,這裡我們要將原本的選單移除

移除之後,可以放上我從範本修改的 HTML 語法,簡化一些階層。

將範例的 CSS 語法直接放在 <head></head> 裡面,或是建立一個 menu.css 來存放 CSS 語法都行。

完成後先看一下結果,按 F5 執行專案後,就會看到已經將多層選單取代原有的選單了。

目前是為了呈現多層式選單的樣式,接下來的重點就是建立資料庫及編寫 C# 語法,利用程式讀取資料庫的階層再重新呈現出來。

建立資料表

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

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

我使用樹狀遞迴的結構來記錄選單階層關係。ParentID 欄位用來記錄上一層的 MenuID。

寫入測試資料

接下來用以下語法來當作多層選單的測試資料。

這測試資料是一個 4 層的選單結構。

編寫 Controller 語法

我們要程式在一開始就先讀取資料庫內的選單樹狀結構資料,會運用到遞迴的方法。
最後完成的資料會轉成 Json 格式回傳到前端去。
為求簡單示範,我程式都寫在 HomeController 裡面呼叫,了解基本程式邏輯後,可以將方法移至共用類別裡面。

開啟 \Controllers\HomeController.cs 檔案,我新增 GetMenu()GetMenuRecursive() 兩個方法。
GetMenu() 是為了取回資料庫資料,GetMenuRecursive() 為了遞迴產生樹狀結構。

連線資料庫字串語法放在 Web.Config 裡面,範例語法是:

初始呼叫

程式首頁呼叫的 Controller 是 HomeController 的 Index() 動作。
所以我們測試範例就直接在 Index() 裡面呼叫選單方法,取回 Json 後回傳給前端。

public ActionResult Index() 裡面加入 ViewData["_MenuJson"] = this.GetMenu();
將取得的 Json 資料透過 ViewData 方式傳遞到前端去。

在 public ActionResult Index() 裡面加入 ViewData["_MenuJson"] = this.GetMenu();

增加 Model

剛剛增加了新類別,因為這是選單相關的功能,所以我們增加一個 MenuModels 來存放相關類別。
在 Models 目錄按右鍵加入一個類別。

在 Models 目錄按右鍵加入一個類別

類別名稱為「MenuModels」。
然後在 MenuModels 類別裡面再加入新的類別。

編寫 View 語法

我們剛剛已經在 _Layout.cshtml 增加了 Bootstrap 的選單語法,這裡就繼續在 _Layout.cshtml 裡面增加 Vue.js 的互動語法。

加入 Vue.js 套件

Vue.js 有提供 CDN 的 js 類別庫,可以加入在專案裡面。
@Scripts.Render("~/bundles/bootstrap") 底下加入 Vue.js 套件
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

加入 Vue.js 套件

有關 Vue.js 使用方法可至官網教學文件查看一下。

編寫 Vue.js 網頁控制語法

接下來要增加一段 Vue.js 語法,讓網頁在初始載入的時候,就取得 Json 資料,將 Json 轉為物件後,就可以綁定到 Bootstrap 語法裡面去。

在網頁的下方加入以下 Vue.js 語法

這裡會建立一個 Vue 的元件,元件裡面的 HTML 為選單項目,然後在裡面又有一個呼叫元件的語法 <menu-tree v-bind:input1="item2.Menus"></menu-tree> 這樣就形成了遞迴方式顯示多層選單。

修改 Bootstrap 選單

在上方之前增加的 Bootstrap 選單範本,開始要加入 Vue.js 語法來綁定資料,依資料庫陣列數量來顯示選單階層,將以下的語法取代上方 <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 語法內。

<li v-for="(item1, index) in menuList"> 是 Vue.js 列表式的語法,用法可參考官方說明
<menu-tree v-bind:input1="item1.Menus"></menu-tree> 是呼叫 Vue.js 元件的方式,用法可參考官方說明

測試結果

都完成後就可以按 F5 測試一下結果。

程式所產生的選單階層就會由資料庫內所決定了,不管幾層都可以,程式會以遞迴方式產生選單。

重點整理

  1. 當選單階層多的時候可選用遞迴方式產生
  2. Bootstrap 提供許多選單範本
  3. 資料表欄位需要有上一層記錄
  4. 程式建立自我呼叫的遞迴方法
  5. Vue.js 遞迴需要用到元件
  6. 將 Vue.js 語法套用至 Bootstrap 範本裡面

範例下載

連結 GitHub 下載範例

推薦課程

相關學習文章

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

加入社團一起討論

發佈留言

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

fourteen + 2 =