从Vue/React到Blazor——.Net Web入坑指南

截至目前,使用Blazor的开发者仍然不多,尤其是国内,目前基本上都是React和Vue的天下。为了给尚未了解Blazor的开发者一点兴趣,这里介绍一下Blazor的基本信息。

Blazor是一个Web UI开发框架,与React和Vue一样,它是一个SPA(单页面应用)开发框架,不过,它一开始的思路与这两个框架不一样。

Blazor Server是首先推出的开发框架,它通过SignalR将服务器渲染的内容实时传输到客户端(浏览器),也就是说,它必须保证客户端联网及服务端在线才能使用,这使得云计算的SLA变得很重要;另一方面,Blazor WebAssembly横空出世,它与React和Vue的思路基本一致,所有SPA所使用的逻辑都在客户端运行,所有UI更新都在客户端完成,只不过它需要预载wasm而不是js,对浏览器和客户端性能的要求较高,第一屏的时候也会更长。 不过,随着PWA(渐进式网页应用)的普及,这个问题可以得到缓解,因为PWA可以对重复的内容进行缓存,以减少在网络上耗费的加载时间。

也就是说,Blazor WebAssembly是最接近Vue/React的框架,理论上只要对Vue/React有所了解,也能使用Blazor WebAssembly进行类似的开发。不过,Blazor WebAssembly相比于Vue/React,生态实在是差太多,要不是微软官方大力推广,可不见得能发展到现在可用的情况。Blazor WebAssembly与一般的.Net项目一样,通过VS进行开发,搭配各种.Net类库实现功能。Blazor WebAssembly在创建项目时可以选择搭配.Net Core Web Host使用,也就是一个Client项目一个Server项目,并且它们可以直接共用一个端口,省去另外配置的麻烦。

FAQ

Radzen部分Service不生效

属于是文档太烂的标准了,要在Program.cs里面添加,以NotificationService为例:

builder.Services.AddScoped<NotificationService>();

然后还要在MainLayout.razor里添加:

<RadzenNotification /> 

其他的Service都是类似的,不再赘述

RadzenDataGrid无法加载数据

大概率是加载的时机错过了获取数据的时机,如果你是通过接口加载数据,可以考虑使用 LoadData 方法,这个方法在初始化页面的时候会调用一次,排序、搜索等操作也会再调用。另外,RadzenDataGrid的性能实在是太拉了,不建议一次性加载很多的数据,不过也可以考虑用虚拟列表来解决一次加载大量数据的问题。

发表评论