再学Blazor——概述

blazor,概述 · 浏览次数 : 0

小编点评

**Blazor 框架简介** Blazor 是一个 .NET 前端 Web 框架,同时支持服务器端呈现和客户端交互性。Blazor 使用 C# 语言创建丰富的交互式 UI,可以生成混合桌面和移动应用。 **组件** Blazor 中的组件是指 UI 元素,例如页面、对话框或数据输入窗体。它们可以被嵌套和重用,大大提高开发效率和维护成本。 **Razor 页面** Razor 页面是 HTML 和 C# 混合开发的缩写。页面可以使用 Razor 语法编写,同时可以使用纯 C# 高级写法编写。 **组件基础** Blazor 应用基于组件,这是一种可共享和分发的 UI 组件设计。组件可以定义灵活的 UI 呈现逻辑,并处理用户事件。 **组件编写** 组件可以定义在 Razor 页面中,并使用 C# 或 Razor 语法编写。组件可以使用 `BuildRenderTree` 方法来构建 HTML 代码。 **示例** 这是一个简单的 Razor 页面示例,显示当前计数: ```html <h1>Counter</h1><p>Current count: @currentCount</p><button class="btn btn-primary" @onclick="IncrementCount">Click me</button> ``` ** benefits of Blazor** * 混合呈现:Blazor 可以使用 Razor 和 C# 语法编写页面,并使用组件和服务器端呈现进行切换。 * 可维护性:组件设计可维护,易于开发和维护。 * 性能:Blazor 使用 .NET 技术优化页面加载,并提供高速交互。 * 安全:Blazor 应用使用 .NET 安全沙箱运行,确保安全性。

正文

简介

Blazor 是一种 .NET 前端 Web 框架,同时支持服务器端呈现和客户端交互性。

  • 使用 C# 语言创建丰富的交互式 UI
  • 共享前后端应用逻辑
  • 可以生成混合桌面和移动应用
  • 受益于 .NET 的性能、可靠性和安全性
  • 需要有 HTML、CSS、JS 相关基础(开发 UI 框架的话)
  • 组件化设计,类似 React、Vue 等前端框架

组件

Blazor 应用基于组件。 Blazor 中的组件是指 UI 元素,例如页面、对话框或数据输入窗体,甚至小到一个输入框。

  • 定义灵活的 UI 呈现逻辑
  • 处理用户事件
  • 可以嵌套和重用 (大大提高开发效率和维护成本)
  • 可作为 Razor 类库或 NuGet 包共享和分发
  • 有 Razor 标记页(.razor文件)和纯 C# 高级写法两种编写形式

1. Razor 常用写法

此写法为 HTML 和 C# 混合开发,HTML 结构清晰,示例如下:

<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    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.Component<Button>()
               .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 来创建本机移动应用和桌面应用。

与再学Blazor——概述相似的内容:

再学Blazor——概述

简介 Blazor 是一种 .NET 前端 Web 框架,同时支持服务器端呈现和客户端交互性。 使用 C# 语言创建丰富的交互式 UI 共享前后端应用逻辑 可以生成混合桌面和移动应用 受益于 .NET 的性能、可靠性和安全性 需要有 HTML、CSS、JS 相关基础(开发 UI 框架的话) 组件化设

防抖节流utils

/** * 防抖原理:一定时间内,只有最后一次操作,再过wait毫秒后才执行函数 * * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @retur

[转帖]从性能问题定位,扯到性能模型,再到 TCP - 都微服务云原生了,还学 TCP 干嘛系列 Part 1

https://blog.mygraphql.com/zh/posts/low-tec/network/tcp-flow-control-part1/ 引 本来想直接写理论、和实践分析的,但为了不 “赶客出門” 和不 TL;DR,还是以故事形式展开吧。语言要生动活泼。 故事的开始 话说,一次性能测试

jcmd的简单总结

jcmd的简单总结 背景 自从2019年公司转向java技术路线. 一直断断续续的在学习java相关的技术内容. 但是总感觉学的不是很深入. 这周比较累.也不想在学新东西了. 所以想着再总结一下jcmd相关的内容. 希望能够记住相关命令, 不需要在每次都百度 简要说明 jcmd等命令操作时需要能够a

Oracle AWR学习之二-利用ChatGPT编写一键获取AWR报告的脚本

# Oracle AWR学习之二-ChatGPT提升效率之n ## 背景 ``` 之前生成awr报告比较麻烦, 想着能够一键生成. 再辅以部分shell或者是python处理就可以进行细致的分析. 这一块其实还是比较简单的, 在ChatGPT加持下的确能够极大的提高自己的工作效率. 但是怀疑国内的学

【论文阅读】自动驾驶光流任务 DeFlow: Decoder of Scene Flow Network in Autonomous Driving

再一次轮到讲自己的paper!耶,宣传一下自己的工作,顺便完成中文博客的解读 方便大家讨论。 Title Picture Reference and pictures paper: https://arxiv.org/abs/2401.16122 code: https://github.com/K

再谈量化策略失效的问题

更多精彩内容,欢迎关注公众号:数量技术宅,也可添加技术宅个人微信号:sljsz01,与我交流。 如何判断量化策略是否失效 我们在交易量化策略的时候,经常会遇到量化策略出现持续性的回撤。此时,必须考虑一种情况,即正在交易的策略可能失效了。于是,我们的首要工作是,判断这个量化策略是否失效。 判断量化交易

再谈23种设计模式(3):行为型模式(学习笔记)

行为型模式的关注点在于对象之间的通信和职责分配(描述结构模型中对象的动态特征)。行为型模式关注的是对象之间的交云和协作,即它们是如何相互作用的,以及如何分配职责和算法来完成任务。

好用!这些工具国庆一定要研究下「GitHub 热点速览」

再过 3 天就要开始一年最长的假期——国庆长假了,这次除了宅家、出游之外,多了一个新选项:研究下哪些项目可以安排上,来辅助自己的日常开发。你觉得一周获得 4k star 的 hyperdx 如何,它能让你快速定位生产环境哪里有问题;不停机也能部署新服务的 kamal 也许可以上你的研究榜单。

再谈http请求调用(Post与Get),项目研发的核心一环

支持.Net Core(2.0及以上)与.Net Framework(4.0及以上) 【目录】 前言 Post请求 Get请求 与其它工具的比较 1【前言】 http请求调用是开发中经常会用到的功能。 在内,调用自有项目的Web Api等形式接口时会用到;在外,调用一些第三方功能接口时,也会用到,因