免费网站建设支持ftp,google免费入口,建设部网站查询,普陀网站建设比较实惠简介
Blazor 是一种 .NET 前端 Web 框架#xff0c;同时支持服务器端呈现和客户端交互性。
使用 C# 语言创建丰富的交互式 UI共享前后端应用逻辑可以生成混合桌面和移动应用受益于 .NET 的性能、可靠性和安全性需要有 HTML、CSS、JS 相关基础#xff08;开发 UI 框架的话同时支持服务器端呈现和客户端交互性。
使用 C# 语言创建丰富的交互式 UI共享前后端应用逻辑可以生成混合桌面和移动应用受益于 .NET 的性能、可靠性和安全性需要有 HTML、CSS、JS 相关基础开发 UI 框架的话组件化设计类似 React、Vue 等前端框架
组件
Blazor 应用基于组件。 Blazor 中的组件是指 UI 元素例如页面、对话框或数据输入窗体甚至小到一个输入框。
定义灵活的 UI 呈现逻辑处理用户事件可以嵌套和重用 大大提高开发效率和维护成本可作为 Razor 类库或 NuGet 包共享和分发有 Razor 标记页.razor文件和纯 C# 高级写法两种编写形式
1. Razor 常用写法
此写法为 HTML 和 C# 混合开发HTML 结构清晰示例如下
h1Counter/h1
pCurrent count: currentCount/p
button classbtn btn-primary onclickIncrementCountClick me/buttoncode {private int currentCount 0;private void IncrementCount(){currentCount;}
}2. C# 高级写法
如下代码为纯 C# 高级写法这段代码也是 .razor 文件编译后生成的格式。如果你反编译 Razor 语法写的组件dll发现上述 HTML 和 C# 混合开发的组件代码与下面类似。
class Counter : ComponentBase
{private int currentCount 0;protected override void BuildRenderTree(RenderTreeBuilder builder){//构建 h1 标签builder.OpenElement(0, h1);builder.AddMarkupContent(1, Counter);builder.CloseElement();//构建 P 标签builder.OpenElement(0, p);builder.AddMarkupContent(1, $Current count: {currentCount});builder.CloseElement();//构建按钮builder.OpenElement(0, button);builder.AddAttribute(1, class, btn btn-primary);builder.AddAttribute(2, onclick, EventCallback.Factory.Create(this, IncrementCount));builder.AddMarkupContent(3, Click me);builder.CloseElement();}private void IncrementCount(){currentCount;}
}上述 BuildRenderTree 方法代码较长我们可以将 UI 元素封装成扩展方法button封装成组件这样构建组件既方便又可读。使用扩展方法后组件代码改进如下
class Counter : ComponentBase
{private int currentCount 0;protected override void BuildRenderTree(RenderTreeBuilder builder){//构建 h1 标签builder.H1(Counter);//构建 P 标签builder.P($Current count: {currentCount});//构建按钮builder.ComponentButton().Set(c c.Style, btn btn-primary).Set(c c.Text, Click me).Set(c c.OnClick, IncrementCount).Build();}private void IncrementCount(){currentCount;}
}Web 应用
Blazor Web应用提供了一种基于组件的体系结构该体系结构具有在单个解决方案中实现服务器端呈现和完整的客户端交互性的能力。在这种体系结构中你可以在服务器端和客户端呈现模式之间进行切换甚至可以在同一页面中混合使用这两种模式。
Blazor Web应用可以通过静态呈现来自服务器的HTML内容来响应这种方式的优点是能够快速将UI传送到浏览器。由于UI呈现在服务器上快速执行所以无需下载大型JavaScript捆绑包从而大大加快了页面加载速度。
Blazor Web应用还支持交互式服务器呈现这种方式通过与浏览器的实时连接在服务器上处理UI交互。这种呈现方式可以实现丰富的用户体验就像客户端应用所提供的那样不过无需创建API终结点就能访问服务器资源。
此外Blazor Web应用也支持通过客户端呈现来处理交互。这种呈现方式依赖于使用可随附应用下载的WebAssembly构建的.NET运行时。在WebAssembly上运行Blazor时.NET代码可以访问浏览器的完整功能并可与JavaScript互操作。 .NET 代码在浏览器的安全性沙盒中运行沙盒提供的保护可防御客户端计算机上的恶意操作。
对于独立Blazor WebAssembly应用该应用可以完全在浏览器中直接运行无需服务器参与。对于这种应用资产可作为静态文件部署到可为客户端提供静态内容的Web服务器或服务中。下载后可以将独立Blazor WebAssembly应用作为渐进式Web应用PWA进行缓存并脱机执行。
混合应用
Blazor Hybrid 允许在本地客户端应用中将 Razor 组件与适用于 Web、移动和桌面平台的本机及 Web 技术进行混合使用。其实现方式是代码在 .NET 进程中以本地形式运行并使用本地互操作通道将 Web UI 呈现在嵌入式 Web View 控件中。
混合应用采用 .NET Multi-platform App UI .NET MAUI来构建这是一个跨平台框架利用 C# 和 XAML 来创建本机移动应用和桌面应用。
