B08. BootstrapBlazor实战 Menu 导航菜单使用(2)
接上篇: B08. BootstrapBlazor实战 Menu 导航菜单使用(1)
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/MsAccess
option.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=true
ShowColumnList=true
ShowCardView=true>
</Table>
</div>
来吧,少年,F5
是不是很有成就感,你怎么这么优秀呢? 哈哈哈.
10.添加菜单
刷新页面
少年, 如期而来!
11.下一篇大概是: Layout 组件
B08. BootstrapBlazor实战 Menu 导航菜单使用(2)的更多相关文章
- BootstrapBlazor实战 Menu 导航菜单使用(1)
实战BootstrapBlazorMenu 导航菜单的使用, 以及整合Freesql orm快速制作菜单项数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql ...
- 使用Iview Menu 导航菜单(非 template/render 模式)
1.首先直接参照官网Demo例子,将代码拷贝进项目中运行, 直接报错: Cannot read property 'mode' of undefined. 然后查看官网介绍,有一行注意文字,好吧. 2 ...
- Iview 中 获取 Menu 导航菜单 选中的值
期望效果: 原来,我用的是脚本来控制,然后........,再然后,我再去仔细看官方文档的时候,才发现,Menu组件 有那么两个事件,on-select 和 on-open-change ,好气啊,之 ...
- BootstrapBlazor实战 Markdown 编辑器使用
基础工程使用工程: B08. BootstrapBlazor实战 Menu 导航菜单使用 实战BootstrapBlazorMenu Markdown 编辑器使用, 以及整合Freesql orm快速 ...
- 为SharePoint网站创建自定义导航菜单
转:http://kaneboy.blog.51cto.com/1308893/397779 相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoi ...
- JavaScript实战(带收放动画效果的导航菜单)
虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! ( 原创文章,转摘请注明:苏福:http://www. ...
- Orchard扩展 自定义后台管理导航菜单 Admin Menu
金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉. 金天:看源码永远是Coder学习的最快捷路径. 看本文需要对Orchard大致体系, 特别是Mo ...
- JQUERY 插件开发——MENU(导航菜单)
JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...
- html自定义垂直导航菜单(加强版--自定义传入menu参数,支持JSONArray、JSArray、JSONObject、JSObject)
在上一篇中我简单写了个html自定义垂直导航菜单,缺点很明显,里面的数据是固定死的,不能动态更改数据. 这里我重写了一个修改版的垂直二级导航菜单,将原先的menuBox.init(config);修改 ...
随机推荐
- centos配置ssh服务并简单测试
最近在做计算机集群方面的东西,简单弄了一下ssh服务. 首先把前提情况介绍一下: 1.我是用的虚拟机先模拟的,也不是没有真机,就是跑来跑去麻烦. 2.装了三个相同配置的centos虚拟机,详细参数就不 ...
- 程序语言与编程实践7-> Java实操4 | 第三周作业及思路讲解 | 异常处理考察
第三周作业,可能是异常那一章当时没怎么听,此前也不怎么接触,感觉还挺陌生的. 00 第1题 00-1 题目 /* * To change this license header, choose Lic ...
- 序列化和反序列化&持久化
java序列化与反序列化全讲解 之前一知半解的,对于序列化的概念,为啥用,哪里用也不清楚,现在深入了解协议,先把序列化这个这个概念和和使用场景搞清楚
- 请解释Spring Bean的生命周期?
首先说一下Servlet的生命周期:实例化,初始init,接收请求service,销毁destroy: Spring上下文中的Bean生命周期也类似,如下: (1)实例化Bean: 对于BeanFac ...
- SpringBoot打包成可执行的Jar文件
需要时SpringBoot项目 通过创建可以在生产环境中运行的完全独立的可执行jar文件来结束示例.可执行jar(有时称为"胖jar")是包含您的已编译类以及代码需要运行的所有ja ...
- Java 中如何格式化一个日期?如格式化为 ddMMyyyy 的形式?
Java 中,可以使用 SimpleDateFormat 类或者 joda-time 库来格式日期. DateFormat 类允许你使用多种流行的格式来格式化日期.参见答案中的示例代 码,代码中演示了 ...
- 什么是HTML 5?
HTML 5是HTML的新标准,其主要目标是无需任何额外的插件如Flash.Silverlight等,就可以传输所有内容.它囊括了动画.视频.丰富的图形用户界面等. HTML5是由万维网联盟(W3C) ...
- 1. 了解Git和Github
1. 了解Git和Github 1.1 什么是Git Git是一个免费.开源的版本控制软件 1.2 什么是版本控制系统 版本控制是一种记录一个或若干个文件内容变化,以便将来查阅特定版本修订情况得系统. ...
- [源码解析] TensorFlow 分布式环境(7) --- Worker 动态逻辑
[源码解析] TensorFlow 分布式环境(7) --- Worker 动态逻辑 目录 [源码解析] TensorFlow 分布式环境(7) --- Worker 动态逻辑 1. 概述 1.1 温 ...
- CentOS7 DHCP自动获取IP地址
# 设置auto自动获取IP[root@localhost ~]# nmcli c modify eth0 ipv4.method auto //etho0 网卡名称 # 重新启动网卡并重新加 ...