正文 

当前位置： 首页 > 开发 > java教程

blazor——asp.netcore的新前端框架

tianfang tianfang     2022-12-06     765

关键词：

Blazor是微软在Asp.net core 3.0中推出的一个前端MVVM模型，它可以利用Razor页面引擎和C#作为脚本语言来构建WEB页面，如下代码简单演示了它的基本功能：

技术图片

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

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

使用Blazor主要有如下好处：

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

?

客户端模式：

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

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

技术图片

?

服务端模式：

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

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

技术图片

?

两种模式的比较：

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

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

但同时也有如下缺点：

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

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

?

参考文章：

  1. Blazor 简介
  2. https://dotnet.microsoft.com/apps/aspnet/web-apps/client
  3. https://blazor-tutorial.net/

从asp.netmvc迁移到asp.netcoremvc

...绍：若要迁移配置和Identity代码，请参阅将配置迁移到ASP.NETCore并迁移身份验证和IdentityASP.NETCore。在VisualStudio中创建ASP.NETMVC项目的示例以进行迁移：使用要迁移到的新ASP.NETCore项目创建新的解决方案：在ASP.NETCore3.0及更高版本的... 查看详情

从模板 Visual Studio 创建 Blazor（ASP.NET Core 托管）项目

】从模板VisualStudio创建Blazor（ASP.NETCore托管）项目【英文标题】：CreatinganBlazor(ASP.NETCoreHosted)projectfromtemplateVisualStudio【发布时间】：2019-11-2303:32:54【问题描述】：这似乎是一个相当简单的任务，但出于某种原因，VisualStudio没有向... 查看详情

使用 Blazor Asp.NetCore 托管模板时获取“NETSDK1045 当前的 .NET SDK 不支持 .NET Core 3.0 作为目标”

】使用BlazorAsp.NetCore托管模板时获取“NETSDK1045当前的.NETSDK不支持.NETCore3.0作为目标”【英文标题】：Getting"NETSDK1045Thecurrent.NETSDKdoesnotsupport.NETCore3.0asatarget"whenusingBlazorAsp.NetCorehostedtemplate【发布时间】：2019-09-0813:12:48【 查看详情

使用 Blazor Webassembly 和 ASP.NET Core 安全文件下载

】使用BlazorWebassembly和ASP.NETCore安全文件下载【英文标题】：SecureFileDownloadUsingBlazorWebassemblyandASP.NETCore【发布时间】：2020-12-0516:40:06【问题描述】：我在这里找到了一个解决方案，展示了如何使用JS注入创建控制器和下载文件：How... 查看详情

将 Blazor 集成到 .NET Core ASP.NET MVC 应用程序中

】将Blazor集成到.NETCoreASP.NETMVC应用程序中【英文标题】：IntegrateBlazorinto.NETCoreASP.NETMVCapp【发布时间】：2020-02-2419:32:00【问题描述】：我使用.NETCore3.0构建了一个ASP.NETMVCCore应用程序。此应用是从ASP.NETCore2.2迁移而来的。在这一点... 查看详情

可以使用c#的web前端框架blazor

参考技术A根据官方文档介绍：Blazor是一个用于使用.NET生成交互式客户端WebUI的框架。这个框架类似于当下比较热门的React、Vue等前端框架，但不同的是，Blazor可以让我们使用C#代替JavaScript来创建丰富的交互式网页。这样一来，ASP... 查看详情

可以使用c#的web前端框架blazor

参考技术A根据官方文档介绍：Blazor是一个用于使用.NET生成交互式客户端WebUI的框架。这个框架类似于当下比较热门的React、Vue等前端框架，但不同的是，Blazor可以让我们使用C#代替JavaScript来创建丰富的交互式网页。这样一来，ASP... 查看详情

可以使用c#的web前端框架blazor

参考技术A根据官方文档介绍：Blazor是一个用于使用.NET生成交互式客户端WebUI的框架。这个框架类似于当下比较热门的React、Vue等前端框架，但不同的是，Blazor可以让我们使用C#代替JavaScript来创建丰富的交互式网页。这样一来，ASP... 查看详情

Blazor 无法连接到 ASP.NET Core WebApi (CORS)

】Blazor无法连接到ASP.NETCoreWebApi(CORS)【英文标题】：BlazorcannotconnecttoASP.NETCoreWebApi(CORS)【发布时间】：2020-11-0121:57:15【问题描述】：我有一个在本地IPhttps://192.168.188.31:44302上运行的ASP.NETCore服务器，带有WebAPI端点。我可以使用VSCode... 查看详情

一个mini的asp.netcore框架的实现(代码片段)

原文:一个Mini的ASP.NETCore框架的实现一、ASP.NETCoreMini　　在2019年1月的微软技术（苏州）俱乐部成立大会上，蒋金楠老师（大内老A）分享了一个名为“ASP.NETCore框架揭秘”的课程，他用不到200行的代码实现了一个ASP.NETCoreMini... 查看详情

JWT 不会通过 Blazor 存储在 ASP.NET Core 中

】JWT不会通过Blazor存储在ASP.NETCore中【英文标题】：JWTdoesn\'tgetstoredinASP.NETCorewithBlazor【发布时间】：2019-03-1214:19:25【问题描述】：我遵循了这个教程：https://medium.com/@st.mas29/microsoft-blazor-web-api-with-jwt-authentication-part-1-f33a44abab9d我... 查看详情

在 ASP.NET Core 站点中实现 Blazor - 组件不在视图中呈现

】在ASP.NETCore站点中实现Blazor-组件不在视图中呈现【英文标题】：implementingBlazorinanASP.NETCoresite-componentsdon\'trenderinviews【发布时间】：2021-09-2304:26:05【问题描述】：我已按照本文中的每一步操作：https://waelkdouh.medium.com/integrating-bla... 查看详情

如何在 IIS 中发布 Blazor ASP.NET 应用程序？

...【问题描述】：我已经构建了一个Blazor-Server-App（托管ASP.NETCore）并将其从VisualStudio发布到本地文件夹。效果很好。现在我想在我的Windows服务器上发布它。它成功运行了一些ASP.NETWebAPI，因此基 查看详情

一步步完成“迷你版”的asp.netcore框架(代码片段)

一前言Artech分享了200行代码，7个对象——让你了解ASP.NETCore框架的本质。用一个极简的模拟框架阐述了ASP.NETCore框架最为核心的部分。这里一步步来完成这个迷你框架。二先来一段简单的代码这段代码非常简单，启动服务器并监... 查看详情

ASP.NET Core 3.0 未在 Visual Studio 2019 上显示

】ASP.NETCore3.0未在VisualStudio2019上显示【英文标题】：ASP.NETCore3.0notshowingonVisualStudio2019【发布时间】：2022-02-1805:11:19【问题描述】：我想测试新的Blazor服务器端框架（又名Razor组件）。我安装了VisualStudio2019RC，然后安装了.NetCore3.0... 查看详情

c#程序员必学清单补充

...了上述经典书籍和开源框架外，还需要掌握以下技术：1..NETCore和ASP.NETCore：了解并熟练掌握.NETCore和ASP.NETCore框架，这将使您能够开发跨平台的Web应用程序和服务。2.EntityFrameworkCore：深入学习并掌握EntityFrameworkCore，这是一款功能... 查看详情

ASP.NET Core 5 Blazor WASM、gRPC、Entity Framework Core 5：多对多导致堆栈溢出

】ASP.NETCore5BlazorWASM、gRPC、EntityFrameworkCore5：多对多导致堆栈溢出【英文标题】：ASP.NETCore5BlazorWASM,gRPC,EntityFrameworkCore5:many-to-manyresultsinstackoverflow【发布时间】：2021-01-1514:47:16【问题描述】：信息：使用：VisualStudiov16.9.0Preview2.0和.... 查看详情

《asp.netcore6框架揭秘》实例演示[04]：自定义依赖注入框架

ASP.NETCore框架建立在一个依赖注入框架之上，已注入的方式消费服务已经成为了ASP.NETCore基本的编程模式。为了使读者能够更好地理解原生的注入框架框架，我按照类似的设计创建了一个简易版本的依赖注入框架，并... 查看详情