ASP.NET Core Blazor 用Inspinia静态页模板搭建简易后台(实现菜单选中)
Blazor 是一个用于使用 .NET 生成交互式客户端 Web UI 的框架:
- 使用 C# 代替 JavaScript 来创建丰富的交互式 UI。
- 共享使用 .NET 编写的服务器端和客户端应用逻辑。
- 将 UI 呈现为 HTML 和 CSS,以支持众多浏览器,其中包括移动浏览器。
一、网站下载Inspinia 模板
建立 ASP.NET Core Blazor 项目
如果是服务器模式 把js和css核心复制进去,放置位置是很目录的 _Host.cshtml。
如果是WebAssembly 模式,放置位置是_wwwroot文件下面的index.html页面。
二、建立简易的菜单结构(模拟传统的MVC)
1.一级菜单 【客户管理】,二级菜单分别是 添加客户 和 客户列表。
添加客户 对应路由地址 Customer/Add
客户列表 对应路由地址 Customer/List
2.一级菜单 【产品管理】,二级菜单分别是 添加产品 和 产品列表。
添加产品 对应路由地址 Product/Add
产品 列表 对应路由地址 Product/List
三、实现菜单选中
下面引自 官方文档解释
NavLink 组件
创建导航链接时,请使用 NavLink
组件来代替 HTML hyperlink 元素类可帮助用户了解在显示的导航链接中哪一页是活动页。
以下 NavMenu
组件创建一个演示如何使用 NavLink
组件的启动导航栏:
当前点击菜单父层 li 设置了active 实现当前选中,且同级元素UL 也是设置 class 添加in样式才能展开。
所以 Navlink现在不能用了,所以需要用到 NavigationManager
组件来监听路由切换。
点击一级菜单 掉客户都安用showa 函数来实现,这个功能是展开二级菜单(给a表的父标签li添加active样式实现左侧上色,同级元素UL添加in 实现展开),不跳转。
点击二级菜单实现跳转,跳转完成后触发 LocationChanged 事件,事件里面调用js客户端函数 setMenuActive 来实现二级菜单设置active.
c#代码调用Javascript 可以注入IJSRuntime 来实现,这里不详细解释了。
$("#side-menu").find("li").removeClass("active");
$(".nav-second-level").find("li").removeClass("active"); $(".nav-second-level").find("a").each(function () {
var childurl = $(this).attr("href");
if (url.indexOf(childurl) > -1)
{
$(this).parent().addClass("active").parent().parent().addClass("active");
return false;
}
});
遍历当前所有一级菜单 如果是当前URL 被选中 就设置active,同时设置二级元素a (就是当前点击 的二级的元素)的父元素为active。
至此,所有功能完成。
如下图。
ASP.NET Core Blazor 用Inspinia静态页模板搭建简易后台(实现菜单选中)的更多相关文章
- 学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序(中)
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 四.创建一个Blazor应用程序 1. 第一种创 ...
- ASP.NET Core Blazor 初探之 Blazor Server
上周初步对Blazor WebAssembly进行了初步的探索(ASP.NET Core Blazor 初探之 Blazor WebAssembly).这次来看看Blazor Server该怎么玩. ...
- [Asp.Net Core] Blazor Server Side 扩展用途 - 配合CEF来制作带浏览器核心的客户端软件 (二) 可运行版本
前言 大概3个星期之前立项, 要做一个 CEF+Blazor+WinForms 三合一到同一个进程的客户端模板. 这个东西在五一的时候做出了原型, 然后慢慢修正, 在5天之前就上传到github了. ...
- ASP.NET Core Blazor Webassembly 之 路由
web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转.我们开发系统的时候总是需要使用路由来实现页面间的跳转.传统的web开发主要是使用a标签或者是服务端redirect来跳转.那今天来 ...
- 学习ASP.NET Core Blazor编程系列六——初始化数据
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- 学习ASP.NET Core Blazor编程系列六——新增图书(上)
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- 学习ASP.NET Core Blazor编程系列八——数据校验
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- 学习ASP.NET Core Blazor编程系列九——服务器端校验
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- 学习ASP.NET Core Blazor编程系列十——路由(中)
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
随机推荐
- C语言I博客作业03
这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8717 我在这个课程的目 ...
- 用哈希算法的思想解决排序和字符串去重问题,时间复杂度为O(N)
第一个题目: int a[] = {12,13,12,13,19,18,15,12,15,16,17},要求对数组a进行排序,要求时间复杂度为O(N) 我们所知道的常规排序中,最优的解法也就是O(N* ...
- React+后端实现导出Excle表格的功能
最近在做一个基于React+antd前端框架的Excel导出功能,我主要在后端做了处理,根据以下步骤,可以很容易就实现导出Excel表格数据的功能. 在做这类导出文件的功能,其实,在后端进行处理,会更 ...
- 谈linux服务器运维需要掌握的技能
一.linux基础 包括对Linux整体的理解/使用和基本命令 二.运维的命令 运维相关的工具(命令) 三.基础服务 LAMP或LNMP :Apache/Nginx,MySQL,PHP/Python/ ...
- Chrome 和 Chromedriver 的安装和配置
1.Chrome 下载安装地址:https://www.google.com/intl/zh-CN_ALL/chrome/ 2.Chromedriver的安装 方法一: (1) brew cask i ...
- Python接口测试框架实战与自动化进阶☝☝☝
Python接口测试框架实战与自动化进阶☝☝☝ 一.fiddler在工作中的运用 1.如何抓接口 抓紧手机端接口 ①.在电脑终端输入:ipconfig ,找到电脑ip ②.打开手机,连接WiFi, ...
- 你真的了解Web前端开发吗?未来前端远比你想的有前途!
近几年来,随着 HTML5.JS 的流行,前端这个职业火热了起来!不少人发出疑惑,前端以后还会更有前途吗? 我只能告诉你:前端不灭 现在都明白了用户体验至上,还要用着舒服 后端提供床,前端提供颜值高的 ...
- css涂鸦这样玩
前言 上一次深扒CSS的时候,还说CSS和H5绘制复杂图形很麻烦,看了大神的操作后,感觉茅塞顿开了,哈哈. 就算可能我暂时没有用到的机会,学习一下开发者的设计思路也是受益匪浅呀. 嗯,今天要介绍的是一 ...
- php分页的条件
我们在项目开发的过程中避免不了使用分页功能,拿php来说,现在市面上有很多大大小小的php框架,当然了分页这种小功能这些框架中都是拿来直接可以用的. 这些框架的分页功能使用都很方便,配置一下分页所需参 ...
- Redis 消息队列的实现
概述 Redis实现消息队列有两种形式: 广播订阅模式:基于Redis的 Pub/Sub 机制,一旦有客户端往某个key里面 publish一个消息,所有subscribe的客户端都会触发事件 集群订 ...