开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Blazor相当于WPFs ItemsControl+DataTemplate

Blazor是一个基于WebAssembly的开源框架，用于构建单页应用程序（SPA）。它允许开发人员使用C#语言和.NET运行时在客户端进行前端开发，而无需使用JavaScript。

Blazor相当于WPF的ItemsControl+DataTemplate。WPF的ItemsControl是一种用于显示集合数据的控件，它可以根据数据模板自动创建和显示多个项。DataTemplate定义了每个项的呈现方式。类似地，Blazor中的组件可以根据数据模型自动渲染多个实例。

Blazor的优势包括：

使用C#语言和.NET运行时进行前端开发，使开发人员能够利用熟悉的工具和语言进行开发，提高开发效率。
可以在客户端执行C#代码，减少与服务器的通信，提高应用程序的性能。
支持双向数据绑定，使数据的变化能够自动更新到UI上，简化了开发过程。
可以与现有的.NET库和第三方组件集成，提供了更多的功能和扩展性。
支持组件化开发，可以将应用程序拆分为多个可重用的组件，提高代码的可维护性和可测试性。

Blazor适用于需要构建富客户端应用程序的场景，特别是对于那些熟悉C#和.NET的开发人员来说。它可以用于构建各种类型的应用程序，包括管理后台、数据可视化、实时通信等。

腾讯云提供了一系列与Blazor相关的产品和服务，包括：

云服务器（CVM）：提供可扩展的计算资源，用于部署和运行Blazor应用程序。链接：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：提供可靠的数据库服务，用于存储和管理Blazor应用程序的数据。链接：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：提供高可用、高可靠的对象存储服务，用于存储Blazor应用程序的静态资源和文件。链接：https://cloud.tencent.com/product/cos
云网络（VPC）：提供安全可靠的网络环境，用于连接和隔离Blazor应用程序的各个组件。链接：https://cloud.tencent.com/product/vpc
人工智能服务（AI）：提供各种人工智能能力，如图像识别、语音识别等，可以与Blazor应用程序集成，增强应用程序的功能。链接：https://cloud.tencent.com/product/ai

以上是关于Blazor的概念、优势、应用场景以及腾讯云相关产品的介绍。希望对您有所帮助！

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Day 04 Compoent及路由介紹

由于笔者当初是用ASP.NET Core API + Blazor Server，所以会以Blazor Server示范，日后研究完Blazor WebAssembly会再将心得补上。...再来是html跟一些C#程序，最后是@code区块，这就是Blazor的奇妙之处了，@code相当于一般网页JS做的事情诸如定义变量、实现方法、发送request到后端或是API，不过Blazor用C#...，但Blazor怎么知道现在要呈现哪个Component呢？...原因就是@page指示词，这个指示词相当于传统的路由，可以看到Index.razor的@page 为"/"，表示这是首页，Counter.razor及FetchData.razor也有相应的@page指示词...，可证Blazor WebAssemlby确实只是被动接收数据，而无法主动跟数据库连接，笔者曾试过在这里引用EF Core，也是无法让Blazor WebAssemlby接触数据库，在.NET Framework

1.3K3 0

(730)Blazor系列：生命周期(Lifetime)

目前Blazor提供内建的Service有三个，分别为： HttpClient：处理http请求，生命周期为Scoped(注意：只有Blazor WebAssembly有提供，Blazor Server...必须自己注册) IJSRuntime：提供Javascript runtime组件处理JS功能，Blazor WebAssembly生命周期为Singleton，Blazor Server生命周期为Scoped...Scoped较为特别，Blazor Server跟Blazor WebAssembly模式不相同，Blazor Server的Scoped是指每次HTTP请求都会产生一个新的实例，但Component之间通过...SingalR传递不会产生，微软文档说明「Blazor WebAssembly目前没有DI的概念，Scoped相当于Singleton」。...上述的例子是以Blazor Server进行，若以Blazor WebAssembly进行，则Singleton会产生跟Blazor Server不同的情况，原因就是Blazor WebAssembly

1.3K3 0

Blazor 初探

Blazor 初探目录一、新建项目二、ASP.NET Core Blazor 项目结构三、结合代码讲解四、改造五、配置文件的使用六、发布到 Linux（CentOS）题外话，期间遇到个问题...程序部署到 Linux 系统）》中提到的 VPS 文件中转下载服务后，如何将下载的文件以 Blazor 的方式传出到浏览器的方法。...那么这篇文章就回过头来，介绍一下本项目（VPSDownloader.NET）使用 Blazor 的过程。...一、新建项目在 VisualStudio 中选择 “Blazor 应用” 项目模板：填写项目名称：选择 Blazor Server 应用：二、ASP.NET Core Blazor 项目结构...现象二：直接代码里写死 urls，使用服务方式运行，功能是正常的，但是样式、图片等都展示不出来：这两个现象结合起来思考，前者相当于读取不到目录下的配置文件，后者相当于读取不到目录下的静态文件，那么很容易想到是程序的运行环境

2.1K1 0

Day 03：Blazor Server和Blazor WebAssembly的差异

下载Visual Studio后首先建立一个Blazor解决方案，里面建立Blazor Server项目，方案位置可以自己选择(注：新版Visual Studio将Blazor Server跟Blazor...创建解决 Blazor 两种模板应用创建Blazor Server应用配置Blazor Server应用选择.NET 6 运行运行+F12 F5重新加载网页 SignalR连接...同一解决方案新建项目选择Blazor WebAssembly应用 Blazor WebAssembly应用其他信息配置项目建好后可以直接启动项目，但如果想同时看到Blazor Server跟Blazor...两种模式项目结构对比 Blazor Server的Program.cs文件： Blazor Server Program.cs Blazor Wasm的Program.cs文件： Blazor Wasm...index.html则是相当于Blazor Server中_Host.cshtml的文件(上一段文字有提到)。而Blazor Server中有个没说到的Data文件夹，里面又是什么呢？

3.1K3 0

(0630)Blazor系列：抽离C#代码

Blazor提供了两个方法：partial class跟ComponentBase，同样两者各有优缺点，笔者偏好ComponentBase，看个人使用习惯。...可以看到除了继承ComponentBase跟加上[Inject]外，几乎没有差别，这里的[Inject]相当于在FetchData.razor.cs使用@inject WeatherForecastService...PostBase 而Post.razor用了EditForm这个Component，编译过后相当于html的form元素，里面还有3个input元素，Blazor也有提供相对应的Input Component...可以试试看Blazor的DataAnnotationsValidator及ValidationSummary两个Component。...Blazor也提供了定制化的方法。

1.7K2 0

（1）入门MasaFramework教程

src/ApiGateways中包含对外使用的接口实现，相当于我可以直接将src/ApiGateways给src/Web的前端项目使用，这样的好处就是减少前端项目的依赖性，并且对于接口的快速对接 src...MasaFramework本身设计就不太相符合，但是如果你是熟练的大佬，当我没说，刚刚入门MasaFramework请务必使用本身框架的设计 src/Web就是我们的实际的前端项目了创建的默认的模板提供是Blazor...mfDemo.Shared可以理解成项目的所有实现和界面等一切功能， mfDemo.Server其实就是个Blazor Server的壳，用于托管mfDemo.Shared项目 mfDemo.WebAssembly...其实也是个Blazor WebAssembly的壳，用于托管mfDemo.Shared项目这样我们的项目就可以支持Blazor Server和Blazor WebAssembly两种模式了，结尾通过上文我们可以基本将

8263 0

【炫丽】从0开始做一个WPF+Blazor对话小程序

添加Blazor支持依然使用上面的工程，添加Blazor支持，此部分参考微软文档生成 Windows Presentation Foundation (WPF) Blazor 应用，本小节快速略过。...OnInitialized()里的代码：InvokeAsync：将Number赋值给变量tagCount的代码是在InvokeAsync方法里执行的，这个和WPF里的Dispatcher.Invoke是一个意思，相当于接收数据是在子线程...StateHasChanged：相当于WPF MVVM里的PropertyChanged事件通知，通知UI这里有值变化了，请你刷新一下，我要看看最新值。...，本文只是个引子：8.4 Blazor组件库除了Masa.Blazor还有哪些？...开源的Blazor组件有：Ant Design Blazor、Bootstrap Blazor、MudBlazor、Blazorise，以及微软自家的FAST Blazor等，当然还有不少开源的Blazor

8.1K6 0

【炫丽】从0开始做一个WPF+Blazor对话小程序

本文使用Masa Blazor[18]做示例展示，如今Blazor组件库众多，选择自己喜欢的、顺手的就成： Masa Blazor 站长前些日子介绍过MAUI使用Masa blazor组件库[19]一文...OnInitialized()里的代码： InvokeAsync：将Number赋值给变量tagCount的代码是在InvokeAsync方法里执行的，这个和WPF里的Dispatcher.Invoke是一个意思，相当于接收数据是在子线程...StateHasChanged：相当于WPF MVVM里的PropertyChanged事件通知，通知UI这里有值变化了，请你刷新一下，我要看看最新值。...[23]继续学习，本文只是个引子：微软文档学习Blazor 8.4 Blazor组件库除了Masa.Blazor还有哪些？...开源的Blazor组件有：Ant Design Blazor[24]、Bootstrap Blazor[25]、MudBlazor[26]、Blazorise[27]，以及微软自家的FAST Blazor

10.3K2 0

.NET Core 3.0 Preview 6中对ASP.NET Core和Blazor的更新

对于最新的客户端Blazor模板，还可以从Visual Studio Marketplace 安装最新的Blazor扩展。...它相当于@functions，但现在有了更好的名称。...随着时间的推移，这些属性已经有机地添加到Blazor并使用不同的语法。在这个Blazor版本中，我们已经标准化了指令属性的通用语法。这使得Blazor使用的Razor语法更加一致和可预测。... Blazor应用程序的身份验证和授权支持 Blazor现在内置了对处理身份验证和授权的支持。...这些Router参数仅在此版本的客户端Blazor中提供支持，但在将来的更新中将为服务器端Blazor启用它们。

6.7K2 0

Blazor VS Vue

Blazor 如何比较？Blazor 是一个框架，它使您能够使用 C# 而不是 JavaScript构建在浏览器中运行的客户端 Web 应用程序。...创建新的 Blazor 应用程序对于 Blazor，您可以使用 Visual Studio 或通过命令提示符启动新项目。..._tickets = await Http.GetFromJsonAsync("api/Tickets"); }}OnInitializedAsync大致相当于...这就是 Blazor 与 JavaScript 框架相比具有显着优势的地方....共享模型——Blazor 的超能力？...Blazor 组件模型Blazor 缺点新框架，需要时间来适应并获得采用没有明显的方法可以无缝地将 Blazor WASM 添加到现有应用程序中工具也很年轻，将随着时间的推移而发展在撰写本文时，与 Vue

4.3K3 0

集成Ids4，实现统一授权认证

1、Blazor系列文章回顾书接上文，关于Blazor学习呢，我也发了几篇文章了，我一般写东西都喜欢偏实战，当然也有系列教程的情节，还记得当时在群里，我说简单看看，浅尝辄止吧，没想到慢慢的发现了解的就越来越深入了...，这里我我们再来一个前情回顾：《我的『MVP.Blazor』快速创建与部署》在这篇文章中，我们简单的了解了下，什么的Blazor，他能做些什么，以及如何快速的入门和部署，属于一个认知的阶段，熟话说万事开头难...从这篇文章开始，慢慢的开始实战了，因为刚开始选型的是blazor.wasm，后来发现速度上比较慢，特别是刷新上，所以就最终选型了Blazor.Server了，速度当然没得说，和我们平时的ASP.NETCore...最终呢，不负众望，实现了将Blazor.Server集成到了Ids4的统一认证平台上，如果你用的是Blazor.wasm，基本差不多，甚至更简单，等你有实战项目了就知道了。...function () { // ... }, } 里边的内容很简单，就是调用上一节的oidc-client的方法，主要是外边的结构，自己把握一下就明白了，对应在浏览器中是这样的，相当于给

2.1K2 0

.NET Core 3.0 Preview 6中对ASP.NET Core和Blazor的更新

对于最新的客户端Blazor模板，还可以从Visual Studio Marketplace 安装最新的Blazor扩展。...它相当于@functions，但现在有了更好的名称。...随着时间的推移，这些属性已经有机地添加到Blazor并使用不同的语法。在这个Blazor版本中，我们已经标准化了指令属性的通用语法。这使得Blazor使用的Razor语法更加一致和可预测。... Blazor应用程序的身份验证和授权支持Blazor现在内置了对处理身份验证和授权的支持。...这些Router参数仅在此版本的客户端Blazor中提供支持，但在将来的更新中将为服务器端Blazor启用它们。

6K2 0

Blazor入门：ASP.NET Core Razor 组件

组件：项目 Blazor 中，使用 .razor 结尾的文件，称为组件；而 Blazor 中的组件，正式名称是 razor 组件； Blazor 组件是 razor 过渡而来的，使用 razor 的基本语法特性...{ get; set; } } Pargrom 中: Pages.Test test = new Pages.Test(); test.Name = "Blazor...例如：这个路径是要放到前端才能，由前端访问时 ASP.NET Core 框架自动处理，相当于前端访问.../ ，后端访问 D:/test/Blazor/wwwroot。...Index.razor 中，路由： @page "/" Blazor 不支持像 Controller 和 Action 那样设置灵活的 URL 可选参数(URL Query)，例如： [

2.8K2 0

MASA MAUI Plugin IOS蓝牙低功耗（三）蓝牙扫描

所以MASA团队开展了一个实验性项目，意在对微软MAUI的补充和扩展项目地址: https://github.com/BlazorComponent/MASA.Blazor/tree/main/src.../Masa.Blazor.Maui.Plugin 每个功能都有单独的demo演示项目，考虑到app安装文件体积（虽然MAUI已经集成裁剪功能，但是该功能对于代码本身有影响），届时每一个功能都会以单独的nuget...相当于我们在安装中实现的DevicesCallback queue：用于调度中心角色事件的调度队列。如果该值为 nil，则中央管理器将使用主队列分派中心角色事件。...我们在Masa.Blazor.Maui.Plugin.Bluetooth的根目录添加部分类MasaMauiBluetoothService.cs，向使用者提供ScanForDevicesAsync等方法...项目，点击打包，生成一个nuget包，在Masa.Blazor.Maui.Plugin.BlueToothSample项目中离线安装即可，代码的使用与安卓完全一样，只是权限配置方式不同在Masa.Blazor.Maui.Plugin.BlueToothSample

1.6K1 0

Blazor.Server以正确的方式丶集成Ids4

（一个真正的以后端形式来集成认证中心的方案） ❤ 本文导读首先特别感谢张善友老师提供技术指导，源于上周我发了一篇文章《[Mvp.Blazor] 集成Ids4，实现统一授权认证》，我本来是想通过像...所以我又重新改了一次，（但是代码保留了，新建了对应的分支），以适应在Blazor服务端集成ids4的完美体验，如果你是wasm的项目，也不需要引用，张队已经写好了组件，大家看看引用下即可： https:...但是我们的项目毕竟是服务端，Blazor服务端使用ids4，感觉和MVC还是有些相似的，都是基于Cookie的oidc认证模式。...AuthenticationProperties { IsPersistent = true, // 设置token的过期时间，相当于前端的...那到了这里，我们已经完成了Blazor服务端如何集成ids4的代码，不过这样还是有些问题的，比如：如果获取access_token来访问第三方的资源服务器api呢？

1.5K1 0

.NET周刊【1月第3期 2024-01-24】

bflat - C# 如您所知，但具有 Go 启发的工具[6] 如何将 IAsyncEnumerable 与 Blazor 流渲染结合使用 https://khalidabuhakmeh.com/how-to-use-iasyncenumerable-with-blazor-stream-rendering...如何在 Blazor 中渲染 IAsyncEnumerable 中的值。...Blazor 服务器从 .NET 7 迁移到 .NET 8 时遇到的问题以及如何解决这些问题。.../308241/ 在相对较短的时间内使用 C# 和 Blazor WebAssembly 创建 Web 应用程序。...据说它相当于 Let's Learn .NET（面向初学者的发行系列）的日语本地化版本。库、存储库、工具等。

1631 0

终于开始了，微软的野心将通过全场景开发平台.NET 5体现得淋漓尽致！

iOS和客户端Blazor（Web程序集）是两个值得注意的例外，因为它们都需要提前（AOT）本机编译。 4....Blazor项目已经在使用Mono AOT。这将是过渡到.NET 5的首批项目之一。微软会将其用作证明该计划的方案之一。...点击“打开文件夹”按钮打开一个文件夹，就相当于打开一个工程了，如果是个空文件夹，那么就是空工程。也可以先建立一个空文件夹，然后再打开该文件夹。 ?

1.5K1 0

.NET 5.0正式发布，新功能特性(翻译)

在.NET 5.0版本中，Blazor是利用回购整合和.NET统一的最佳例子。Blazor WebAssembly的运行时和库现在是从合并的 DotNet/runtime repo所构建的。...例如，这意味着服务器上的Blazor WebAssembly和Blazor对List 将使用完全相同的代码。但在.NET5.0之前，Blazor并非如此。...我们对Blazor WebAssembly采取的方法与我们在.NET6.0中使用Xamarin的方法非常相似。　　...它大致相当于C++内部函数的.NET版本。硬件本质最好被认为是一种CPU硬件加速功能。...我们还将ICU与Blazor WebAssembly配合使用。

2.3K1 0

Go语言关键字解析：深入了解Go语言中的关键字

因为Go中是没有类这个概念的，所以struct就相当于是C#中class的定义。同样的，struct在Go中是值类型结构，因此使用的时候一定需要注意案值传递导致的复制问题。...People struct { Age int } 上述只是 type 的最常用用法，除此之外 type 还有两个其他的用法：以一个基准类型定义一个新类型 type Human People 这样的语句相当于用...中的强制类型转换是类型+ ()，比如上述的例子 Human(People)就可以把 People 类型强转为 Human 类型）定义类型别名 type Human = People 如果使用了等号进行定义，那就相当于给类型...handleFunc func(httpContext HttpContext) type middleware func(next handleFunc) handleFunc 3.扩展链接如何使用 Blazor

2591 0

客官，来看看AspNetCore的身份验证吧

而JWK相当于就干了这样一件事。什么？你问我这东西哪儿见过？...可能有些朋友对于纯前端开发会感到比较陌生，因为平时都是使用的Razor这种嵌套C#代码的方式来开发，或者有些朋友已经开始尝鲜Blazor了，但是本质上都是没有离开C#。...(说到Blazor，推荐大家使用 ant-design-blazor )。但是为了更容易生成小程序的方案，所以最终选择了基于Vue的uni-app。

1.5K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

热门标签

活动推荐

运营活动

活动名称

广告关闭