继续上篇实战BootstrapBlazor树型控件Tree内容, 本篇主要讲解整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/达梦/神通/人大金仓/翰高/华为GaussDB/MsAccess 1.Freesql处理树形分类 无限级分类(父子)是一种比较常用的表设计,我们直接设计表中包含 parent_id 字段,然后递归查询,f

Blazor 简介 Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架.和前端同学所熟知的 Vue.React.Angular 有巨大差异. 其最大的特色是使用 C# 代码(理论上可以是 .NET 生态的任何语言)代替 JavaScript 来实现逻辑. 使用 C# 代替

原文链接:https://www.cnblogs.com/ysmc/p/16128206.html 很多小伙伴在使用 Bootstrap Blazor Table组件的时候,都会有这样的一个需求: 我怎么在代码中重新加载Table组件的数据? 然后小伙伴们都不约而同的想方设法去调用 OnQueryA

Speech 语音识别与合成 通过麦克风语音采集转换为文字(STT),或者通过文字通过语音朗读出来(TTS) 本组件依赖于 BootstrapBlazor.AzureSpeech,使用本组件时需要引用其组件包 Demo https://www.blazor.zone/speechs Nuget 包安装 使用 nuget.org 进行 BootstrapBlazor.AzureSpeech 组件的安装 .NET CLI dotnet add package BootstrapBlazor.Azur

地理定位/移动距离追踪组件 通过浏览器 API 获取定位信息 DEMO https://www.blazor.zone/geolocations 小提示 注意: 出于安全考虑,当网页请求获取用户位置信息时,用户会被提示进行授权.注意不同浏览器在请求权限时有不同的策略和方式.Windows10 在未开启定位的情况下无法获取位置. 示例 dotnet new blazorserver -o b07geo dotnet add b07geo package BootstrapBlazor dotnet

通知组件 通过浏览器API发送通知信息 , 桌面浏览器表现为右下角系统提示框弹出消息, 移动浏览器表现为弹窗或者到消息列表, blazor页面不在前台也可以通过本组件提醒用户. DEMO https://www.blazor.zone/notifications 小提示 注意: 出于安全考虑,当网页请求发送通知时,用户会被提示进行授权 使用 BrowserNotification 静态方法直接调用 Dispatch 方法 private NotificationItem Model { get;

轻量级 Toast 弹窗 DEMO https://www.blazor.zone/toasts 基础用法: 用户操作时,右下角给予适当的提示信息 <ToastBox class="d-block" Options="@Options1" /> @code{ Options1 = new ToastOption { Title = "保存数据", IsAutoHide = false, Content = "保存数据成功,4

前言 实际项目中总能遇到一个"组件"不是基础组件但是又会频繁复用的情况,在开发MASA Auth时也封装了几个组件.既有简单定义CSS样式和界面封装的组件(GroupBox),也有带一定组件内部逻辑的组件(ColorGroup). 本文将一步步演示如何封装出一个如下图所示的ColorGroup组件,将MItemGroup改造为ColorGroup,点击选择预设的颜色值. MASA Blazor介绍 组件展示 MASA Blazor 提供丰富的组件(还在增加中),篇幅限制下面展示一些我常

开发环境 Vs2019 16.3.1 dotnetcore 3.0 一.开始 新建webapp项目 dotnet new webapp -o projectname 或Vs 中新建项目选择 Web应用程序. 在StartUp.cs 中增加两处配置. ConfigureServices 方法: public void ConfigureServices(IServiceCollection services) { services.AddRazorPages(); services.AddServ

原文链接:https://www.cnblogs.com/ysmc/p/16201153.html Bootstrap Blazor 官网地址:https://www.blazor.zone 有了解过 Bootstrap Blazor 组件库的,都应该知道 Table 组件是多么的强大,我在之前的文章中提过,可以通过实体属性特征智能生成 Table 组件所有常用的功能,让你的 razor 页面非常简洁,感兴趣的可以到我这一篇文章去看看:BootstrapBlazor 智能生成神器(一)AutoG

原文链接:https://www.cnblogs.com/ysmc/p/16223154.html Bootstrap Blazor 官方链接:https://www.blazor.zone/tables 上一篇文章说到 Table 组件的智能生成,有了自动生成,肯定会有自定义的. 一.指定生成列 除了可以在 AutoGenerateColumnAttribute 特性中指定每一列的行为外,我们可以手动在 Table 的 TableColumns 标签中自定义要展现的列与列具有的行为,在此之前,

行业领先的.NET界面控件DevExpress 正式发布了v19.1版本,DevExpress UI for Blazor/ Razor组件附带7个用户界面组件(包括Data Grid和Pivot Grid),用户可以使用Blazor和Razor组件设计丰富的用户体验.欢迎下载v19.1试用,点击立即下载>> 根据DevExpress Preview许可,可以免费使用此预览. Data Grid 一组新的本机Blazor / Razor组件包括功能丰富的Grid控件,功能包括: 数据绑定 编辑

本文主要分享我创建 Ant Design of Blazor 项目的心路历程,已经文末有一个 Blazor 线上分享预告. Blazor WebAssembly 来了! Blazor 这个新推出的前端 Web 框架,想必是去年 .NET Core 3.0 发布时才进入 .NET 开发者的视线的.但其实,那时发布的是服务端托管版,而真正具有跨时代意义的,是即将在今年5月发布的 WebAssembly 托管版. 我早在两年前,2017年底,就已经在 Steve Sanderson 的一篇博客中看到这

1.前言 本文接自Blazor的组件(1)-从0构建一个组件 2.分部类组件 Razor组件你可理解为就是一个类名与文件名相同的类,因此,可以新建一个同名的partial类,将组件中@code里面的代码放置到这个partial类里面,然后将原来组件中的@code部分删除. 将VButton组件改写为分部类的代码组织方式,其代码如下(新建一个组件为VButtonPartial,并将原来的代码VButton组件中的代码分别复制过去): VButtonPartial.razor <button typ

翻译自 Waqas Anwar 2021年3月19日的文章 <A Beginner's Guide to Blazor Components> [1] Blazor 应用程序是组件的组合,这些组件不仅负责呈现用户界面,还协同工作以促进用户交互.它们是 Blazor 应用程序的主要构建块,大多数 Blazor 功能都是围绕组件展开的.在本教程中,我将向您详细介绍组件,并向您展示在 Blazor 应用程序中创建和使用组件的多种技术. 下载源码[2] Blazor 组件概述 Blazor 组件是 U

翻译自:Study Blazor .NET,转载请注明. 关于组件 blazor中组件的基础结构可以分为以下3部分, //Counter.razor //Directives section @page "/counter" //Razor HTML section <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn btn-pri

声明:本文将RenderFragment称之为组件DOM树或者是组件DOM节点,将*.razor称之为组件. 1. 什么是无状态组件 如果了解React,那就应该清楚,React中存在着一种组件,它只接收属性,并进行渲染,没有自己的状态,也没有所谓的生命周期.写法大致如下: var component = (props: IPerson)=>{     return <div>{prop.name}: {prop.age}</div>; } 无状态组件非常适用于仅做数据的展示

难度:★ 简单说一说: 1.Vue和Blazor都遵循单文件结果,即HTML(视图模板).CSS(样式).JS/C#(代码逻辑)写在一个文件里,Vue的文件后缀为.vue,Blazor的文件后缀为.razor 2.三个部分的区别: 1)视图HTML部分,区别在于模板语法,主要是标签内容和标签属性的数据绑定.另外,Vue需要使用顶级标签<template>,Blazor不需要,上来就可以直接撸HTML. 2)样式CSS部分,基本一样,可能高级功能有一些差异,这部分目前关注的比较少,估计Vue会更

运行截图 演示地址 响应式演示 感谢szimek写的棒棒的signature_pad.js项目, 来源: https://github.com/szimek/signature_pad 正式开始 1. 在文件夹wwwroot/lib,添加signature_pad子文件夹,里面下载库文件(文件文末源码里可复制) signature_pad.umd.js复制到此文件夹. 最终版本参考如下 +signature_pad |-signature_pad.umd.js 2. 添加app.js文件 +si

今天我们来看看Blazor开发的一些基本知识. 一.Blazor组件结构 Blazor中组件的基本结构可以分为3个部分,如下所示: //Counter.razor //Directives section 指令部分 @page "/counter" //Razor HTML section Razor HTML部分 <h1>Counter</h1> <p>Current count: @currentCount</p> <butto

.NET Core Blazor 1-Blazor项目文件分析 本节内容为Blazor的基本文件 简介 Blazor是一个使用.NET技术用于代替JavaScript/typescript的前端WEB框架.在前端开发中使用.NET语言进行书写逻辑有利于我们的性能.可靠性和安全性.并且对于使用.NET开发人员而言,全栈的成本更低. 截止文章发布时,.NET Core已经发布了3.1版本,Blazor已经正式发布了Server-Side的框架,基于WebAssembly的Client-Side已经进