在外部调用组件方法以更新状态 使用 @ 键控制是否保留元素和组件 指定基类 指定属性 导入组件 原始 HTML 官方文档原文位置： https://docs.microsoft.com/zh-cn/aspnet/core/blazor...组件：项目 Blazor 中，使用 .razor 结尾的文件，称为组件；而 Blazor 中的组件，正式名称是 razor 组件； Blazor 组件是 razor 过渡而来的，使用 razor 的基本语法特性...test = new Pages.Test(); test.Name = "Blazor"; 简单来说，就是可以作为一个类来使用。...Index.razor 中，路由： @page "/" Blazor 不支持像 Controller 和 Action 那样设置灵活的 URL 可选参数(URL Query)，例如： [...{Id}")] public string Test([FromQuery]int Id) { return "123"; } Blazor
在上一篇我们学习了Blazor和JavaScript的互操作性，这一篇我们了解下如何创建和使用Razor类库。 什么是Razor类库？...在Blazor应用中，可以通过Razor类库在多个应用程序之间共享和复用这些基础组件。...Razor类库也是一种.NET项目类型，它包含 Razor 组件、页面、HTML、级联样式表 (CSS) 文件、JavaScript、图像和其他可由 Blazor 应用程序引用的静态 Web 内容。...在Blazor应用中使用Razor类库 首先，我们通过添加引用的方式，将刚刚创建的Razor类库引用到我们的项目中。 dotnet add reference .....类库，然后通过一个DEMO了解了如何创建Razor类库 和 在Blazor项目中使用Razor类库。
MatBlazor 是一个专门为 Blazor 和 Razor Components 开发的组件库，基于 Google 的 Material Design 规范实现了一系列常用的交互组件。...MatBlazor 是一个开源项目，提供了一组遵循 Material Design 设计语言的 UI 组件，适用于 Blazor 和 Razor Components 开发。...• 跨平台支持：兼容 Blazor Server 和 Blazor WebAssembly。 • 社区活跃：拥有活跃的开发者社区，持续更新和完善功能。 二、快速入门 1....更多请查看下方项目地址 四、项目地址 项目：https://gitee.com/Blazor/MatBlazor 文档：https://www.matblazor.com/ 五、总结 MatBlazor...是一个功能强大且易用的组件库，能够显著提升 Blazor 和 Razor Components 开发的效率。
今天大姚给大家分享一套基于 Material Design 规范实现的、开源（MIT license）且免费的 Blazor 和 Razor 通用组件库：MatBlazor。...Blazor介绍 Blazor 是基于 HTML、CSS 和 C# 的现代前端 Web 框架，可帮助你更快地生成 Web 应用。...使用 Blazor，你可以使用可从客户端和服务器运行的可重用组件生成 Web 应用，以便提供出色的 Web 体验。...命令安装 Install-Package MatBlazor 或者 dotnet add package MatBlazor NuGet包管理器安装 脚本引入 对于客户端和服务器端的Blazor
前言 今天大姚给大家分享一套基于 Material Design 规范实现的、开源（MIT license）且免费的 Blazor 和 Razor 通用组件库：MatBlazor。...Blazor介绍 Blazor 是基于 HTML、CSS 和 C# 的现代前端 Web 框架，可帮助你更快地生成 Web 应用。...使用 Blazor，你可以使用可从客户端和服务器运行的可重用组件生成 Web 应用，以便提供出色的 Web 体验。...组件库安装 命令安装 Install-Package MatBlazor 或者 dotnet add package MatBlazor NuGet包管理器安装 脚本引入 对于客户端和服务器端的Blazor
今天就分享如何在Blazor Server、Blazor Wasm、MAUI Blazor之间共享UI的实验，这一步完成，后面开发应用时就方便多了（只针对UI修改）。 2....5.3 Blazor Wasm项目 添加Dotnet9.WebApp项目引用 删除Pages、Shared目录外加App.razor文件 Program.cs中using Dotnet9.Wasm;改为....MAUI：MAUI Blazor项目 一句话：将UI封装到Razor类库Dotnet9.WebApp，其他终端工程(Dotnet9.Server、Dotnet9.MAUI、Dotnet9.Wasm)引用此工程即可实现...和Blazor Server之间任意切换[6] 微软MAUI文档[7] 微软Blazor文档[8] 学Blazor[9] 参考资料 [1]Blazor Hybrid/MAUI 简介和实战: https:...: https://dotnet9.com/2022/06/Share-razor-library-between-maui-and-blazor-server-or-client [5]ASP.NET
说Razor Pages优势，那为啥现在又换Blazor了？因为Blazor可能又是更好的选择了，我们接着说。 2....相比于Razor Pages和MVC，Blazor提供了一种全新的开发模式，具有许多独特的优势和适用场景。 首先，Blazor提供了真正的前端开发体验。...但目前该模式Razor组件无法交互，页面还出现了重连置灰UI，索性直接用Blazor Server重构，经过几天的奋战，网站前台已经用Blazor Server完全替换Razor Pages，烦人的重连也解决了...Razor Pages（MVC）与Blazor都使用的Razor语法，所以理论上切换是无缝的，核心代码改动不大，项目代码文件结构对比看下面截图，不再赘述，有兴趣看源码吧，两个版本代码都在。...Razor Pages版工程结构 图片 Blazor Server版工程结构 图片 4.
使用 Blazor Hybrid 将桌面和移动本机客户端框架与 .NET 和 Blazor 结合使用。 在 Blazor Hybrid 应用中，Razor 组件在设备上本机运行。...Razor 组件可快速加载和执行代码，组件可通过 .NET 平台完全访问设备的本机功能。 Blazor Hybrid 应用与MAUI Blazor Hybrid 支持内置于 MAUI 框架 。....整个项目结构如下： 项目整体思路就是将Blazor UI样式抽离至 MultiPlatform.Blazor（Razor类库）项目中，MultiPlatform.Maui（安卓、IOS等...MultiPlatform.Blazor 项目的 _Imports.razor即可。...@using MultiPlatform.Blazor.Data 因为我们将Main.razor文件抽离到了 MultiPlatform.Blazor，所以我们还需要调整 MultiPlatform.Maui
Blazor基于组件模型，该模型提供了以具有强类型的符合Razor标准的页面和组件的形式构建用户界面的能力。...Blazor 提供 BlazorWebView 控件，将 Razor 组件添加到使用这些框架生成的应用。...Blazor组件的基本结构Razor组件示例Razor 语法基础Razor语法简介Razor 是一种轻量级的标记语法，用于将服务器端代码（如 C# 或 VB.NET）嵌入到 HTML 页面中。...更多Razor语法请查看ASP.NET Core 的 Razor 语法: ASP.NET Core 的 Razor 语法参考 | Microsoft Learn
在Blazor 中，开发人员可以使用Razor模板语法或者C#语言来编写Web应用程序的逻辑和界面代码。...Blazor 提供 BlazorWebView 控件，将 Razor 组件添加到使用这些框架生成的应用。...Razor语法简述 Blazor 是一种基于 .NET 平台的 Web 开发框架，它使用 C# 语言和 Razor 语法来编写前端代码。 什么是Razor？ ...Razor 也可在 Razor 组件 文件 (.razor) 中找到。...更多请查看ASP.NET Core 的 Razor 语法。 Razor 操作符 Razor 操作符是用于将 Razor 代码与 HTML 元素相互关联的语法。
使用 Blazor Hybrid 将桌面和移动本机客户端框架与 .NET 和 Blazor 结合使用。 在 Blazor Hybrid 应用中，Razor 组件在设备上本机运行。...Razor 组件可快速加载和执行代码，组件可通过 .NET 平台完全访问设备的本机功能。 Blazor Hybrid 应用与MAUI Blazor Hybrid 支持内置于 MAUI 框架 。...MultiPlatform.Blazor 项目的 _Imports.razor即可。...@using MultiPlatform.Blazor.Data 因为我们将Main.razor文件抽离到了 MultiPlatform.Blazor，所以我们还需要调整 MultiPlatform.Maui...其余 Razor 组件位于页面和共享项目文件夹中，与默认 Blazor Web 模板中使用的组件相同。 应用的静态 Web 资产位于 wwwroot 文件夹中。
Blazor 是微软推出的基于 .NET 的 Web 前端框架。无论是使用 Blazor Server 还是 Blazor WebAssembly，Windows 系统提供了强大的工具链支持。...二、创建 Blazor 项目 1. 创建 Blazor Server 项目 打开 Visual Studio，点击 创建新项目。 在模板中选择 Blazor Server 应用，点击 下一步。...项目结构 Pages：存放 Razor 组件（如 Counter.razor）。 Shared：存放共享组件（如 MainLayout.razor）。 _Host.cshtml：主页面入口文件。...四、Blazor 入门核心概念 1. Razor 组件 每个 .razor 文件都是一个组件，包含前端 HTML 和 C# 逻辑。...六、快速入门建议 从简单的计数器组件开始，理解 Razor 组件语法和事件绑定。 学习 Blazor 的依赖注入和状态管理，掌握服务调用和组件间通信。
创建一个 Blazor 项目 步骤： 打开 Visual Studio，点击 创建新项目。 在模板中选择 Blazor Server 应用，然后点击 下一步。...理解项目结构 创建完成后，你会看到以下重要的文件和文件夹： Pages 文件夹：存放页面组件，例如 Index.razor、Counter.razor。...Shared 文件夹：存放共享组件，例如导航菜单 NavMenu.razor。 _Host.cshtml：定义 Blazor 应用的入口。 3....添加一个新页面 （1）创建 Pages/HelloWorld.razor 右键点击 Pages 文件夹，选择 添加 > Razor 组件，命名为 HelloWorld.razor。...（2）编辑 HelloWorld.razor 文件 在文件中添加以下代码： @page "/hello" 欢迎使用 Blazor 当前时间: @currentTime
1.2 差异 在ASP.NET Core中，.cshtml文件通常用于创建传统的MVC视图或页面，而.razor文件用于创建基于Blazor的Web组件。....razor文件中的C#代码更加紧密地与HTML代码交织在一起，因为Blazor组件的核心就是将前端的HTML和后端的C#代码封装到同一个文件中。...在Blazor中，.razor文件中的C#代码经常使用基于Razor语法的@符号来嵌入到HTML代码中，而.cshtml文件中的C#代码则使用@符号来标识Razor代码块，但不会嵌入到HTML标记中。...2.3 blazor框架的前后端交互流程分析 如3.2节所述 .razor文件被解析成 MyComponent类，在blazor server模式处理web请求，实际上发送给浏览器的html实际是静态页面...在Blazor Server模式下，服务器会实例化Blazor组件，并调用其BuildRenderTree方法来生成HTML内容。
什么是SSR Blazor中的流式渲染结合了SSR（服务端渲染），服务端将HTML拼好返回给前端，有点像我们熟知的Razor Pages 或 MVC 。...当已经有了 Razor Pages 或 MVC 时，为什么还要选择使用 Blazor 来实现这一点？这里有几个原因。...首先，Razor Pages 和 MVC 没有像Blazor这样提供了很好的可重用组件。 其次，当选择 Razor Pages 或 MVC 时，我们将被固定在SSR渲染应用程序中。...如果您想添加任何客户端交互性，一种选择是JS另一种选择是Blazor。那么为什么不只使用 Blazor 来完成所有事情呢？...想要测试的话可以尝试删掉App.razor中的blazor.web.js">。删掉后发现第二次响应已经渲染不了了。
本篇我们来构建第一个Blazor Web应用，这里我们选择Blazor Server类型，后面我们再学习Blazor WebAssembly类型。 话外音：有人问我西门子在用Blazor吗？...Blazor应用的结构 一个默认的Blazor应用的项目结构如下图所示： 其中： （1）Data文件夹主要存放Model和Service。 （2）Pages文件夹主要存放基于Razor的页面和组件。...其中，.cshtml是页面，.razor的则一般是组件，可复用。 （3）Shared文件夹主要存放页面模板、导航模板等。 其他： （1）Imports.razor用于声明全局应用的命名空间。...（2）App.razor用于声明默认的Router。...使用组件 这里我们尝试在Index.razor文件中添加一个刚刚的Counter组件： @page "/" Hello, world!
本文我们将一起来学习一下在Blazor中使用Chart.js快速创建图表。 Blazor是什么？ Blazor是一种新兴的Web应用程序框架，具有很大的潜力和发展前景。...Blazor是在.NET和Razor上构建的用户界面框架，它采用了最新的Web技术和.NET框架优势，可以使用C# 编程语言编写Web 应用程序，它不仅可以提高开发效率，还可以提供更好的用户体验和更好的可维护性.../Chart.js" type="module"> 引入组件 打开你的_Imports.razor文件并添加以下内容： @using PSC.Blazor.Components.Chartjs...BarSimple.razor组件： razor页面代码 @page "/BarSimple" @using ChartjsExercise.Model 柱状图 () { 300, 50, 100, 20 }; } 展示效果 折线图 创建LineSimple.razor组件： razor页面代码 @page "/LineSimple" @using ChartjsExercise.Model
由于笔者当初是用ASP.NET Core API + Blazor Server，所以会以Blazor Server示范，日后研究完Blazor WebAssembly会再将心得补上。...首先既然Component是可以重复利用的，我们在Index.razor放上两个Counter，启动项目(如果不想完整调试，可以按ctrl+F5，就会启动不调试模式，启动速度比较快，而且每次储存文件，Blazor...打开Counter.razor，最上面是@page指示词，这个稍后再说。...Index.razor和Counter.razor 两个Counter独立 currentCount定义的方式跟页面呈现就是一种模型绑定(model binding)，意思是数据跟页面有绑定关系，.NET...原因就是@page指示词，这个指示词相当于传统的路由，可以看到Index.razor的@page 为"/"，表示这是首页，Counter.razor及FetchData.razor也有相应的@page指示词
内容如下，引入了一个命名空间Microsoft.AspNetCore.Components.Web，这是Razor常用命名空间，包含用于向 Blazor 框架提供有关浏览器事件的信息的类型。...组件加一个Razor的经典组件Counter.razor，Blazor的Hello World程序就有这么一个组件，文件路径：/RazorViews/Counter.razor，之所以放RazorViews...本小节源码在这Razor组件实现窗体标题栏功能3.4 Blazor与WPF比较完美的实现效果其实上面的代码可以当做学习，即使有不小瑕疵（哈哈），本小节我们还是使用第三包解决窗体圆角和最大化问题。...@using Masa.Blazor@using BlazorComponent4.4 Razor组件添加Masa.Blazor打开MainWindow.xaml.cs，添加一行代码 serviceCollection.AddMasaBlazor...A：放Message，即一些消息通知类；B：放Razor组件，如果需要与Maui\Blazor Server(Wasm)等共享Razor组件，可以创建Razor类库存储；C：放通用服务，这里只放了一个窗体管理静态类
内容如下，引入了一个命名空间Microsoft.AspNetCore.Components.Web，这是Razor常用命名空间，包含用于向 Blazor 框架提供有关浏览器事件的信息的类型。...组件 加一个Razor的经典组件Counter.razor，Blazor的Hello World程序就有这么一个组件，文件路径：/RazorViews/Counter.razor，之所以放RazorViews...WPF与Razor组件之间通过Ioc数据传输 上面步骤做完后，运行程序： WPF集成Blazor的默认程序 OK，WPF与Blazor集成成功，打完收工？...@using Masa.Blazor @using BlazorComponent 4.4 Razor组件添加Masa.Blazor 打开MainWindow.xaml.cs，添加一行代码 serviceCollection.AddMasaBlazor...整理后代码 A：放Message，即一些消息通知类； B：放Razor组件，如果需要与Maui\Blazor Server(Wasm)等共享Razor组件，可以创建Razor类库存储； C：放通用服务，
云服务器
ICP备案
云直播
即时通信 IM
对象存储
