Asp.net core前端框架Blazor介绍

一、Blazor介绍

Blazor是微软在Asp.net core 3.0中推出的一个前端MVVM模型，它可以利用Razor页面引擎和C#作为脚本语言来构建WEB页面.

在.Net5中，Blazor将代替传统的Web Pages。可以代替如下代码简单演示了它的基本功能：

和Angular JS和VUE的模型非常类似，Blazor 支持大多数应用所需的核心方案：

  • 参数
  • 事件处理
  • 数据绑定
  • 路由
  • 依赖关系注入
  • 布局
  • 模板
  • 级联值

使用Blazor主要有如下好处：

  • C# 语言：使用 C# 代替 JavaScript 来编写代码。
  • .NET 生态系统：利用现有的 .NET 库生态系统。
  • 完整堆栈开发：共享服务器和客户端逻辑。
  • 快速且具有可伸缩性：.NET 旨在实现出色的性能、可靠性和安全性。
  • 行业领先工具：始终高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
  • 稳定性和一致性：以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。

二、Blazor的模式

1、客户端模式：

运行Blazor需要C#支持，在客户端模式下，通过WebAssembly的方式实现的：

  • C# 代码文件和 Razor 文件将被编译为 .NET 程序集。
  • 该程序集和 .NET 运行时将被下载到浏览器。
  • Blazor 客户端启动 .NET 运行时并配置运行时，为应用加载程序集。 文档对象模型 (DOM) 操作和浏览器 API 调用将由 Blazor 客户端运行时通过 JavaScript 互操作处理。

2、服务端模式：

Blazor组件呈现逻辑也可以在服务端实现，通过SingalR连接传递UI更新：

  • 处理从浏览器到服务器的发送 UI 事件。
  • 运行组件后，将服务器发送的 UI 更新重新应用到浏览器。

3、两种模式的比较：

和客户端模式相比，服务端模式有如下有点：

  • 客户端不需要WebAssembly支持，具有更好的客户端兼容性
  • 不需要下载.net webassembly程序集，具有更小的页面加载时间
  • 可以运行完整的.net runmtime，可以实现更加强大的功能

但同时也有如下缺点：

  • 所有操作都需要发往服务器，网络不好的时候有延时
  • 所有运算都在服务端进行，服务器端具有更大的处理压力

综上所述，客户端具有更好的效率，服务端具有更少的约束和更强大的功能，对于一些对性能要求不高和网络不差的场景，服务端模式无疑是非常合适的选择。

简单说：
Blazor Server 适合内部局域网的运用。
Blazor WebAssembly 适合各类内部应用（比如公司内部管理系统）。
Razor Pages 适合逻辑简单的 Web 站点。

三、组件

Blazor应用基于组件 。 Blazor 中的组件是指 UI 元素，例如页面、对话框或数据输入窗体。
组件是内置到 .NET 程序集的 .NET 类，用来：

  • 定义灵活的 UI 呈现逻辑。
  • 处理用户事件。
  • 可以嵌套和重用。
  • 可以作为 Razor 类库或 NuGet 包共享和分发。
    组件类通常以 Razor 标记页（文件扩展名为 .razor ）的形式编写。 Blazor 中的组件有时被称为 Razor 组件 。 Razor 是用于将 HTML 标记与专为提高开发人员工作效率而设计的 C# 代码结合在一起的语法。 借助 Razor，可以使用 IntelliSense 支持在同一文件中的 HTML 标记和 C# 之间切换。 Razor Pages 和 MVC 也使用 Razor。 与围绕请求/响应模型生成的 Razor Pages 和 MVC 不同，组件专门用于处理客户端 UI 逻辑和构成。

以下 Razor 标记演示组件 (Dialog.razor )，该组件可以嵌套在另一个组件中：

<div>
    <h1>@Title</h1>

    @ChildContent

    <button @onclick="OnYes">Yes!</button>
</div>

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

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");
    }
}

对话框的正文内容 (ChildContent) 和标题 (Title) 由在其 UI 中使用此组件的组件提供。 OnYes 是由按钮的 onclick 事件触发的 C# 方法。
Blazor 使用 UI 构成的自然 HTML 标记。 HTML 元素指定组件，并且标记的特性将值传递给组件的属性。
在以下示例中，Index 组件使用 Dialog 组件。 ChildContent 和 Title 由 <Dialog> 元素的属性和内容设置。
Index.razor：

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Dialog Title="Blazor">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

在浏览器中访问父级 (Index.razor ) 时，将呈现该对话框：

浏览器中呈现的对话框组件

如果在应用中使用此组件，Visual Studio 和 Visual Studio Code 中的 IntelliSense 可加快使用语法和参数补全的开发。

组件呈现为浏览器文档对象模型 (DOM) 的内存中表现形式，称为“呈现树” ，用于以灵活高效的方式更新 UI。

四、示例：

到此这篇关于Asp.net core前端框架Blazor的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Blazor组件事件处理功能

    Blazor组件事件处理功能

    Blazor的组件当中, 提供了事件处理功能, 这点类似于使用客户端(Winform/Wpf)开发, 经常用到的一些类似: 按钮(Button), 输入框(TextBox) 用到的一些事件, 例如Click.DoubleClick.TextChanged 等等事件允许我们在后台代码当中进行处理相应的逻辑. 介绍事件 在Razor组件中, 同样提供了事件处理功能.对于具有委托类型值且名为 @on {EVENT}(例如 @onclick)的 HTML 元素特性,Razor 组件将该特性的值视为事件处

  • Blazor实现数据验证

    Blazor实现数据验证

    Blazor 提供一组输入组件. 输入组件会将绑定字段数据处理到模型,并在提交窗体时验证用户输入.下表显示了可用的输入组件: EditForm EditForm 组件通过 EditContext 包装这些输入组件并协调验证过程. 创建 EditForm 时,可以使用 Model 参数指定要绑定到的模型实例. 验证通常是使用数据批注完成的,并且可以进行扩展. 若要启用基于数据批注的验证,请将 DataAnnotationsValidator 组件添加为 EditForm 的子组件. EditFor

  • Blazor框架简介

    Blazor框架简介

    Blaozr 是由微软2019推出得一种使用.NET 生成交互式客户端得Web UI框架. 该框架利用C#代替JavaScript进行创建UI , 并且可以共享.NET编写的服务端和客户端业务代码. 优势: 1 使用C#代替JavaScript编写代码, 意味着, 如果你使用的是.Net进行编写服务端(例:ASP.NET Core WebApi) 或者是 客户端(WPF/Winform),那么可以共享应用之前的逻辑, 无需针对Web再编写其他的业务代码. 2 始终高效支持 Windows.Lin

  • Blazor数据绑定用法

    Blazor数据绑定用法

    Blazor当中, 类似实现了WPF的基础绑定功能, 支持在HTML元素当中使用Razor语法进行绑定C#字段.属性或 Razor 表达式值. 绑定语法 在Html标签中,使用Razor的语法, 前缀使用@符号, 然后添加 @bind="xxxx" 即可实现最简单的绑定, 如下: input @bind="Name" /> @code { private string Name{ get; set; } } 通过上面的操作, Input中的值与属性Name则进

  • Blazor页面组件用法介绍

    Blazor页面组件用法介绍

    Blazor应用中, 是使用组件来构建用户界面, 例如页面.窗口.对话框等. 组件 使用C#和HTML标记的组合, Blazor组件称之为Razor组件, 文件名以 (.razor)结尾的文件. 1.如下所示, 在VisualStudio创建Blazor应用模板后的截图, 展示了Page文件夹中定义的razor文件. 注意:所有的Blazor组件, 都必须大写字符开头, 否则无效.如上图所示 ↑ 2.关于.razor 页面 对于每个 .razor页面来说, 包含了两个部分: 1. Html标记的

  • Blazor路由与页面导航开发介绍

    Blazor路由与页面导航开发介绍

    在 Blazor 中,应用中的每个页面都是一个组件,通常在 razor 文件中定义,具有一个或多个指定路由. 路由大多数发生在客户端,而不涉及特定的服务器请求. 浏览器首先发出对应用程序根地址的请求. 然后, Blazor 应用中的根 Router 组件会处理截获导航请求,并将它们处理到正确的组件. Blazor 中的路由由 Router 组件处理. Router 组件通常在应用程序的根组件( App.Razor )中使用. Router 下面是VisualStudio创建的默认App.Razo

  • ASP.NET Core中的Blazor组件介绍

    目录 关于组件 组件类 静态资产 路由与路由参数 组件参数 请勿创建会写入其自己的组参数属性的组件 子内容 属性展开 任意参数 捕获对组件的引用 在外部调用组件方法以更新状态 使用 @ 键控制是否保留元素和组件 指定基类 指定属性 导入组件 原始 HTML 项目 Blazor 中,使用 .razor 结尾的文件,称为组件:而 Blazor 中的组件,正式名称是 razor 组件: Blazor 组件是 razor 过渡而来的,使用 razor 的基本语法特性,但是 Balzor 不支持 razo

  • Blazor组件的生命周期解析

    Blazor组件的生命周期解析

    执行周期 1. SetParametersAsync 2. OnInitializedAsync(调用两次) 和 OnInitialized: 3. OnParametersSetAsync 或 OnParametersSet: 4. OnAfterRenderAsync 和 OnAfterRender: 5. 每次组件呈现都会调用ShouldRender: 各周期解析 SetParametersAsync 每次调用 SetParametersAsync 时,ParameterView 都包含整

  • Asp.net core前端框架Blazor介绍

    Asp.net core前端框架Blazor介绍

    一.Blazor介绍 Blazor是微软在Asp.net core 3.0中推出的一个前端MVVM模型,它可以利用Razor页面引擎和C#作为脚本语言来构建WEB页面. 在.Net5中,Blazor将代替传统的Web Pages.可以代替如下代码简单演示了它的基本功能: 和Angular JS和VUE的模型非常类似,Blazor 支持大多数应用所需的核心方案: 参数 事件处理 数据绑定 路由 依赖关系注入 布局 模板 级联值 使用Blazor主要有如下好处: C# 语言:使用 C# 代替 Jav

  • ASP.NET Core 3框架揭秘之 异步线程无法使用IServiceProvider问题

    标题反映的是上周五一个同事咨询我的问题,我觉得这是一个很好的问题.这个问题有助于我们深入理解依赖注入框架在ASP.NET Core中的应用,以及服务实例的生命周期. 一.问题重现 我们通过一个简单的实例来模拟该同事遇到的问题.我们采用极简的方式创建了如下这个ASP.NET Core MVC应用.如下面的代码片段所示,除了注册与ASP.NET Core MVC框架相关的服务与中间件之外,我们还调用了IHostBuilder的UseDefaultServiceProvider方法将配置选项Servi

  • [Asp.Net Core] 浅谈Blazor Server Side

    在2016年, 本人就开始了一个内部项目, 其特点就是用C#构建DOM树, 然后把DOM同步到浏览器中显示. 并且在一些小工程中使用. 3年下来, 效果很不错, 但因为是使用C#来构建控件树, 在没有特定语法的情况下, 代码风格不是那么好. 典型的风格大概是这样的: 这个模式挺好的, 有点嫌弃C#代码占比太高, HTML代码靠字符串来完成, 在界面的设计上, 比较吃力. 在2019年秋, Asp.Net 3.0出来了, Blazor Server Side 也正式公布, 可以在VS2019中使用

  • ASP.NET Core Razor页面用法介绍

    ASP.NET Core Razor页面用法介绍

    简介 随着ASP.NET Core 2 即将来临,最热门的新事物是Razor页面.在之前的一篇文章中,我们简要介绍了ASP.NET Core Razor 页面. Razor页面是ASP.NET Core的一个新功能,可以使基于页面的编程方式更容易,更高效. 大众的初步印象是对于那些只专注于页面的小型应用来说,Razor页面更容易.更快地取代MVC.然而,事实证明,它可能比这更强大.使用ASP.NET Core 2在创建新的应用程序时,Razor页面(空,Razor页面,Web API,MVC)是

  • ASP.NET Core 6框架揭秘实例演示之如何承载你的后台服务

    ASP.NET Core 6框架揭秘实例演示之如何承载你的后台服务

    目录 [S1401]利用承载服务收集性能指标 [S1402]依赖注入的应用 [S1403]配置选项的应用 [S1404]提供针对环境的配置 [S1405]日志的应用 [S1406]在配置中定义日志过滤规则 借助 .NET提供的服务承载(Hosting)系统,我们可以将一个或者多个长时间运行的后台服务寄宿或者承载我们创建的应用中.任何需要在后台长时间运行的操作都可以定义成标准化的服务并利用该系统来承载,ASP.NET Core应用最终也体现为这样一个承载服务. 借助 .NET提供的服务承载(Hos

  • ASP.NET Core之Web API介绍

    目录 1.简单介绍 2.自定义格式化(Format) 1.特定格式的操作结果 2.配置格式化程序 3.添加对 XML 格式的支持 4.强制特定格式化 5.响应格式 URL 映射 6.自定义格式化程序 Protocol Buffers (简称 protobuf) 1.简单介绍 ASP.NET Core Web API 是 ASP.NET Core MVC 的一个功能.ASP.NET Core MVC 包含了对 Web API 的支持.可以构建多种客户端的 HTTP 服务.ASP.NET Core

  • ASP.NET Core的中间件与管道介绍

    ASP.NET Core的中间件与管道介绍

    今天来讨论一个ASP.NET Core 很重要概念管道和中间件,在ASP.NET Core中,针对HTTP请求采用pipeline也就是通常说的管道方式来处理,而管道容器内可以挂载很多中间件(处理逻辑)“串联”来处理HTTP请求,每一个中间件都有权决定是否需要执行下一个中间件,或者直接做出响应.这样的机制使得HTTP请求能够很好的被层层处理和控制,并且层次清晰处理起来甚是方便. 示意图如下: 为了再次说明管道和中间件的概念,举一个官方给出的权限验证的例子,中间件A,B分别按顺序挂载在管道容器中,

  • 详解IIS在ASP.NET Core下的两种部署模式

    详解IIS在ASP.NET Core下的两种部署模式

    目录 一.ASP.NET CORE Core Module 二. In-Process部署模式 三.Out-of-Process部署模式 四.<aspnetcore>配置 KestrelServer最大的优势体现在它的跨平台的能力,如果ASP.NET CORE应用只需要部署在Windows环境下,IIS也是不错的选择.ASP.NET CORE应用针对IIS具有两种部署模式,它们都依赖于一个IIS针对ASP.NET CORE Core的扩展模块.本文提供的示例演示已经同步到<ASP.NET

  • 在Asp.Net Core中使用ModelConvention实现全局过滤器隔离

    从何说起 这来自于我把项目迁移到Asp.Net Core的过程中碰到一个问题.在一个web程序中同时包含了MVC和WebAPI,现在需要给WebAPI部分单独添加一个接口验证过滤器 IActionFilter ,常规做法一般是写好过滤器后给需要的控制器挂上这个标签,高级点的做法是注册一个全局过滤器,这样可以避免每次手动添加同时代码也更好管理.注册全局过滤器的方式为: services.AddMvc(options => { options.Filters.Add(typeof(AccessCon

随机推荐