欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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">