接上篇: B08. BootstrapBlazor實戰 Menu 導航菜單使用(1)

實戰BootstrapBlazorMenu 導航菜單的使用, 以及整合Freesql orm快速制作菜單項數據庫后臺維護頁面

demo演示的是Sqlite驅動,FreeSql支持多種數據庫，MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/達夢/神通/人大金倉/翰高/華為GaussDB/MsAccess

3.項目模板

節省時間,直接使用 Bootstrap Blazor App 模板快速搭建項目

傳送門: https://www.blazor.zone/template

3.1. 安裝項目模板

dotnet new -i Bootstrap.Blazor.Templates

3.2. 創建工程

dotnet new bbapp

4. 本次演示使用工程名字 b08Menu ,命令如下

dotnet new bbapp -o b08Menu dotnet add b08Menu/BootstrapBlazorApp.Shared package FreeSql.Provider.Sqlite dotnet add b08Menu/BootstrapBlazorApp.Shared package Densen.FreeSql.Extensions.BootstrapBlazor dotnet sln add b08Menu/BootstrapBlazorApp.Server/BootstrapBlazorApp.Server.csproj dotnet sln add b08Menu/BootstrapBlazorApp.Shared/BootstrapBlazorApp.Shared.csproj dotnet sln add b08Menu/BootstrapBlazorApp.WebAssembly/BootstrapBlazorApp.WebAssembly.csproj

注:由于模板使用了共享庫,雙出Server和WebAssembly工程,我們這里只使用Server工程做演示.

5. 數據服務

添加FreeSql服務到 BootstrapBlazorApp.Server/Program.cs 在 builder.Services.AddBootstrapBlazor(); 之前加入

builder.Services.AddFreeSql(option => {//demo演示的是Sqlite驅動,FreeSql支持多種數據庫，MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/達夢/神通/人大金倉/翰高/華為GaussDB/MsAccessoption.UseConnectionString(FreeSql.DataType.Sqlite, "Data Source=test.db;") //也可以寫到配置文件中 #if DEBUG//開發環境:自動同步實體.UseAutoSyncStructure(true).UseNoneCommandParameter(true)//調試sql語句輸出.UseMonitorCommand(cmd => System.Console.WriteLine(cmd.CommandText)) #endif; });

傳送門: https://github.com/densen2014/Blazor100/wiki/B03.-BootstrapBlazor實戰-10分鐘編寫數據庫維護項目

6. Menu數據實體類

使用FreeSql的父子導航屬性處理樹形分類
傳送門: https://github.com/densen2014/Blazor100/wiki/B05.-BootstrapBlazor實戰-Tree樹形控件使用(2)

新建類文件 Data/WebPages.cs

/// <summary> /// 頁面 /// </summary> [AutoGenerateClass(Searchable = true, Filterable = true, Sortable = true)] public class WebPages {public WebPages() { }public WebPages(string PageName, string? Url = null, string? Icon = null, string? Code = "0", List<WebPages>? Childs = null){this.PageName = PageName;this.Url = Url ?? $"/{PageName}";this.Icon = Icon;this.Code = Code;this.Childs = Childs;}/// <summary>///代碼/// </summary>[DisplayName("代碼")][Column(IsPrimary = true)][AutoGenerateColumn(DefaultSort = true, DefaultSortOrder = SortOrder.Asc)]public string? Code { get; set; }/// <summary>///父級代碼/// </summary>[DisplayName("父級代碼")][Column]public string? ParentCode { get; set; }[Navigate(nameof(ParentCode))][AutoGenerateColumn(Ignore = true)]public WebPages? Parent { get; set; }[Navigate(nameof(ParentCode))][AutoGenerateColumn(Ignore = true)]public List<WebPages>? Childs { get; set; }/// <summary>///頁面名稱/// </summary>[Required(ErrorMessage = "{0}不能為空")][DisplayName("頁面名稱")]public string? PageName { get; set; }/// <summary>///Icon/// </summary>[DisplayName("Icon")][AutoGenerateColumn(Visible = false)]public string? Icon { get; set; }/// <summary>///Url/// </summary>[Required(ErrorMessage = "{0}不能為空")][DisplayName("Url")][AutoGenerateColumn(Visible = false)]public string? Url { get; set; } /// <summary>/// 隱藏/// </summary>[DisplayName ("隱藏")]public bool Hide { get; set; } }

7. 擴展工具

寫文章的時候這個方法已經pr進BootstrapBlazor庫,可能讀者們看到的時候已經內置次方法了.如果重復,自行跳過這步.

public static class Utility { /// <summary>/// 菜單樹狀數據層次化方法/// </summary>/// <param name="items">數據集合</param>/// <param name="parentId">父級節點</param>public static IEnumerable<MenuItem> CascadingMenu(this IEnumerable<MenuItem> items, string? parentId = null) => items.Where(i => i.ParentId == parentId).Select(i =>{i.Items = CascadingMenu(items, i.Id).ToList();return i;}); }

8. 菜單界面

找到BootstrapBlazorApp.Shared/Shared/MainLayout.razor文件,展開三角符號,打開MainLayout.razor.cs文件編輯

注入FreeSql

[Inject][NotNull]IFreeSql? fsql { get; set; }

Menus 初始化保存到數據庫

using Microsoft.AspNetCore.Components; using System.Diagnostics.CodeAnalysis; using BootstrapBlazorApp.Shared.Data;//private List<MenuItem>? Menus { get; set; } private List<MenuItem>? Menus { get; set; } = new List<MenuItem>();/// <summary>/// OnInitialized 方法/// </summary>protected override void OnInitialized(){base.OnInitialized();//Menus = GetIconSideMenuItems();}protected override void OnAfterRender(bool firstRender){if (firstRender){if (fsql.Select<WebPages>().Count() == 0){var pages = new List<WebPages>(){new WebPages("首頁","/","fa fa-home","001") ,new WebPages("數據","","fa fa-fw fa-database","002",new List<WebPages>(new[] {new WebPages("FetchData","fetchdata","fa fa-fw fa-database","002_001") ,new WebPages( "Counter","counter","fa fa-fw fa-check-square-o","002_002") ,new WebPages("后臺管理","admins","fa fa-gears","002_003") ,})) ,new WebPages("Table","table","fa fa-fw fa-table","004") ,new WebPages("花名冊","users","fa fa-fw fa-users","005")};var repo = fsql.GetRepository<WebPages>();//倉庫類repo.DbContextOptions.EnableAddOrUpdateNavigateList = true; //開啟一對多，多對多級聯保存功能repo.Insert(pages); }Menus = fsql.Select<WebPages>().OrderBy(a => a.Code).LeftJoin(d => d.ParentCode == d.Parent!.Code).ToList(a => new MenuItem(){Text = a.PageName,Id = a.Code,Url = a.Url,ParentId = a.ParentCode,Icon = a.Icon}).CascadingMenu().ToList();// 算法獲取屬性結構數據 .CascadingMenu().ToList()StateHasChanged();}}

到這一步,大家肯定迫不及待要運行一下了,來吧,少年,F5

9. 菜單管理界面

使用Densen.FreeSql.Extensions.BootstrapBlazor庫的數據庫服務直接表格編輯菜單數據庫表格.

先注銷模板工程自帶演示服務,BootstrapBlazorApp.Server/Program.cs 注銷 builder.Services.AddTableDemoDataService();

// 增加 Table 數據服務操作類 //builder.Services.AddTableDemoDataService();

新建BootstrapBlazorApp.Shared/Pages/Admins.razor文件

@page "/admins" @attribute [TabItemOption(Text = "菜單管理")] <PageTitle>菜單管理</PageTitle><div class="table-users scroll"><Table TItem="WebPages"IsFixedHeader="true"IsPagination="true"IsStriped="true"AutoGenerateColumns="true"ShowSearch="true"ShowToolbar="true"ShowExtendButtons="true"DoubleClickToEdit=trueShowColumnList=trueShowCardView=true></Table> </div>

來吧,少年,F5

是不是很有成就感,你怎么這么優秀呢? 哈哈哈.

10.添加菜單

刷新頁面

少年, 如期而來!

11.下一篇大概是: Layout 組件

項目源碼

Github | Gitee

關聯項目

FreeSql QQ群：4336577(已滿)、8578575(已滿)、52508226(在線)

BA & Blazor QQ群：795206915、675147445

知識共享許可協議

本作品采用 知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議 進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名AlexChow（包含鏈接： https://github.com/densen2014 ），不得用于商業目的，基于本文修改后的作品務必以相同的許可發布。如有任何疑問，請與我聯系 。

AlexChow

今日頭條 | 博客園 | 知乎 | Gitee | GitHub

總結

以上是生活随笔為你收集整理的BootstrapBlazor实战 Menu 导航菜单使用(2)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。