Blazor —— 大家来找茬之 ServerSide 和 WebAssembly
程序员文章站
2022-04-15 19:59:50
再次强调,Blazor 是一套前端框架,和 Vue/Angular/React 三大框架是一回事。不同的是 Blazor 采用的是 C# 作为编程语言,而它可以基于 .NET Core 的体系,与 MVC / Razor Page / WebApi 框架进行混用,并且开发人员可以选择成为全栈 or 纯前端的模式。...
前言
再次强调,Blazor 是一套前端框架,和 Vue/Angular/React 三大框架是一回事。不同的是 Blazor 采用的是 C# 作为编程语言,而它可以基于 .NET Core 的体系,与 MVC / Razor Page / WebApi 框架进行混用,并且开发人员可以选择成为全栈 or 纯前端的模式。
Blazor-ServerSide
基于 .NET CORE 的托管,通信方式使用的是 SinglR
,而托管取决于你的 Program
类的托管服务,所以在 Program 里面没有任何特殊变化。
public static async Task Main(string[] args)
{
var builder = Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(host =>
{
host.UseStartup<Startup>();
});
await builder.Build().RunAsync();
}
需要在 Startup.cs
中添加服务 services.AddServerSideBlazor()
服务。
并且要添加路由和终结点:
app.UseEndpoints(route =>
{
route.MapBlazorHub();
route.MapFallbackToPage("/_Host");
});
这个 Host
是一个 Razor 页面,即 _Host.cshtml
@page "/"
@{
Layout = null;
}
@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Blazor Server</title>
<base href="/" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">