Blazor 基础入门

dotNET跨平台 今天

以下文章来源于amazingdotnet ,作者WeihanLi

Blazor 基础知识

Intro

Blazor 是微软在 .NET 里推出的一个 WEB 客户端 UI 交互的框架,

使用 Blazor 你可以代替 JavaScript 来实现自己的页面交互逻辑,可以很大程度上进行 C# 代码的复用,Blazor 对于 .NET 开发人员来说是一个不错的选择。

托管模型

Blazor 有两种托管模式,一种是 Blazor Server 模式,基于 asp.net core 部署,客户端和服务器的交互通过 SignalR 来完成,来实现客户端 UI 的更新和行为的交互。

Blazor Server runs .NET code on the server and interacts with the Document Object Model on the client over a SignalR connection
Blazor Server

另外一种是 Blazor WebAssembly 模式, 将 Blazor 应用、其依赖项以及 .NET 运行时下载到浏览器, 应用将在浏览器线程中直接执行。

Blazor WebAssembly runs .NET code in the browser with WebAssembly.
Blazor WebAssembly

两种模式各有优缺点,但是个人觉得 WebAssembly 模式的 Blazor 意义更大一些

Blazor Server 托管模型具有以下优点:

  • 下载项大小明显小于 Blazor WebAssembly 应用,且应用加载速度快得多。
  • 应用可充分利用服务器功能,包括使用任何与 .NET Core 兼容的 API。
  • 服务器上的 .NET Core 用于运行应用,因此调试等现有 .NET 工具可按预期正常工作。
  • 支持瘦客户端。例如,Blazor Server 应用适用于不支持 WebAssembly 的浏览器以及资源受限的设备。
  • 应用的 .NET/C# 代码库(其中包括应用的组件代码)不适用于客户端。

Blazor Server 托管模型具有以下局限性:

  • 通常延迟较高。每次用户交互都涉及到网络跃点。
  • 不支持脱机工作。如果客户端连接失败,应用会停止工作。
  • 如果具有多名用户,则应用扩缩性存在挑战。服务器必须管理多个客户端连接并处理客户端状态(SignalR)。
  • 需要 ASP.NET Core 服务器为应用提供服务。无服务器部署方案不可行,例如通过内容分发网络 (CDN) 为应用提供服务的方案。

Blazor WebAssembly 托管模型具有以下优点:

  • 没有 .NET 服务器端依赖,应用下载到客户端后即可正常运行。
  • 可充分利用客户端资源和功能。
  • 工作可从服务器转移到客户端。
  • 无需 ASP.NET Core Web 服务器即可托管应用。无服务器部署方案可行,例如通过内容分发网络 (CDN) 为应用提供服务的方案。

Blazor WebAssembly 托管模型具有以下局限性:

  • 应用仅可使用浏览器功能。
  • 需要可用的客户端硬件和软件(例如 WebAssembly 支持)。
  • 下载项大小较大,应用加载耗时较长。
  • .NET 运行时和工具支持不够完善。例如,.NET Standard 支持和调试方面存在限制。

项目结构

Blazor 结合了 Razor Page 的开发模式,可以使用 Razor 的语法,文件结构也和 Razor Page 的模式有些类似

Blazor 是以组件为核心的,页面所有的部分都是一个组件

Blazor WebAssembly 对应的 SDK 是 Microsoft.NET.Sdk.BlazorWebAssembly,来看一下具体的项目文件:

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>    <TargetFramework>net6.0</TargetFramework>  </PropertyGroup>

  <ItemGroup>    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.0-preview.4.21253.5" />    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.0-preview.4.21253.5" PrivateAssets="all" />  </ItemGroup>

</Project>
project-structure
  • App.razor: Blazor WebAssembly 应用根组件

  • Program.cs: 配置应用 WebAssembly host 的入口文件

  • _Imports.razor: 和 Razor Page 一样,可以在这里定义一些 Razor Page 或者组件里公用的 namespace

  • Pages:包含可以路由到的页面,page 需要使用 @page 指令指定

  • Shared:包含一些公共的组件或者样式定义

  • wwwroot: 应用公共静态文件的根目录

Routing

在页面组件上通过 @page 指令指定页面路由 @page "/path",就会生成一个 RouteAttribute 以支持路由,路由支持像 asp.net core 一样的路由约束和 Path 参数

@page "/RouteParameter/{text}"

<h1>Blazor is @Text!</h1>

@code {    [Parameter]    public string Text { get; set; }}
@page "/RouteParameter/{text?}"

<h1>Blazor is @Text!</h1>

@code {    [Parameter]    public string Text { get; set; }

    protected override void OnInitialized()    {        Text = Text ?? "fantastic";    }}
@page "/user/{Id:int}"

<h1>User Id: @Id</h1>

@code {    [Parameter]    public int Id { get; set; }}

Catch-all

@page "/catch-all/{*pageRoute}"

@code {    [Parameter]    public string PageRoute { get; set; }}

Interop

Model Binding

最基本的我们需要了解如何做数据绑定,

<div>  <input type="checkbox" checked="@item.IsCompleted" />  <h4>@item.TodoTitle</h4> -- <span class="small">@item.CreatedTime.ToStandardTimeString()</span></div><div class="todo-item-details">  <p>@item.TodoContent</p></div>@code{    public List<TodoItem> TodoItems { get; private set; }

    protected override async Task OnInitializedAsync()    {        TodoItems = await scheduler.GetAllTasks();        await base.OnInitializedAsync();    }}

Event Binding

在现在的 Blazor 里,事件绑定是偏向于使用原生的事件名,比如按钮的事件通过 @onclick 方式来绑定事件,例如下面的示例:

<button @onclick="AddNewTodo" class="btn btn-info">Add new todo</button>

为 button 指定了一个 onclick 事件处理器

Call JS method

执行 JS 方法有时候是不可缺少的一部分,因为很多组件都是 JS 的,借助于此,我们就可以直接调用  JS 的方法来实现一些组件功能,示例如下,分是否有返回值可以分为两类:

With return value

@inject IJSRuntime JS@code {    private MarkupString text;

    private async Task ConvertArray()    {        text = new(await JS.InvokeAsync<string>("convertArray", quoteArray));    }}

Without return value

@inject IJSRuntime JS@code {    private Random r = new();    private string stockSymbol;    private decimal price;

    private async Task SetStock()    {        stockSymbol =             $"{(char)('A' + r.Next(0, 26))}{(char)('A' + r.Next(0, 26))}";        price = r.Next(1, 101);        await JS.InvokeVoidAsync("displayTickerAlert1", stockSymbol, price);    }}

More

更多关于 Blazor 相关的知识可以参考微软的文档

References

  • https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-5.0
  • https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-5.0
  • https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-5.0
  • https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-5.0
  • https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript?view=aspnetcore-5.0
  • https://docs.microsoft.com/en-us/dotnet/api/microsoft.jsinterop.ijsruntime?view=dotnet-plat-ext-6.0
(0)

相关推荐

  • ASP.NET Core Blazor Webassembly 之 渐进式应用(PWA)

    Blazor支持渐进式应用开发也就是PWA.使用PWA模式可以使得web应用有原生应用般的体验. 什么是PWA PWA应用是指那些使用指定技术和标准模式来开发的web应用,这将同时赋予它们web应用和 ...

  • [ASP.NET Core] Blazor server side资源索引 (长期更新)

    博客当笔记系列. 收录各种资源 前言 总的来说, Blazor 是一个很新鲜的事物. 它的最大特点是极大地加速了UI的开发效率. 然而, 要活用Blazor的话, 比MVC要难一个等级,  毕竟MVC ...

  • 微软Build2021,.NET6 Preview4和Visual Studio 2022首发!

    Microsoft Build 2021全球开发者大会将至,将带来什么惊喜呢?去年Build 2020是第一次完全线上举办的Build大会,是第一次完全属于开发者的大会,几乎所有的新产品都是属于开发者 ...

  • Bootstrap Blazor 组件库

    项目介绍 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应 ...

  • C#+web=? 微软Blazor

    C#开发可以用Blazor在今后写前端渲染的网页了!   - C#(C sharp)是什么? C#是微软公司发布的一种面向对象的.运行于.NET Framework和.NET Core(完全开源,跨平 ...

  • PPT|锂电池基础入门科普

    PPT|锂电池基础入门科普

  • 八字基础知识 八字基础入门

    八字基础知识八字基础入门 八字基础知识八字基础入门 展开

  • 八字基础入门01

    八字基础入门01 八字基础入门01 展开

  • 相术大概框架:看相基础入门

    相学广义上包括相人术,相地术,相兽术.地师学相地,伯乐学相兽,民间广为流传的为相人术.相人术里包含面相.体相.骨相-- 框架核心: 观人先统观.统观五行,次观六征,再观八相,分九宫,定五官十二宫,意统 ...

  • FIND函数基础入门与深入理解

    Excel情报局 OFFICE 爱好者大本营 用 1% 的Excel 基础 搞定 99%的 职场工作 做一个有价值感的Excel公众号 Excel是门手艺   玩转需要勇气 数万Excel爱好者聚集地 ...

  • 零基础入门课程又来了,这一次的内容,完整练下来会很过瘾!

    瑜伽零基础入门计划第14周的序列又来了. 这周课程的安排,总体来说已经比瑜伽馆大课中,给基础会员安排的训练难度和强度都要提高一点了.特别是站姿部分,如果你能够全程连续跟下来,并且每个体式都能保持5到8 ...

  • 学习Python选择哪个版本好?基础入门!

    随着人工智能时代的到来,Python语言变得越来越火爆,成为当下非常重要的编程语言,那么现在学习Python选择哪个版本好呢?Python哪个发展方向好?我们一起来看看吧. 学习Python选择哪个版 ...

  • 五线谱零基础入门,请记住下面这几个图片,...

    五线谱零基础入门,请记住下面这几个图片,会帮助您理解五线谱.

  • 什么是Python表达式?Python基础入门

    初学Python的时候,大家都会接触到各种专业术语,比如说表达式.语句等,那么你知道什么是Python表达式吗?Python表达式由什么构成呢?想要知道,这篇文章你一定要看. Python表达式由什么 ...