.NET 8新预览版本使用 Blazor 组件进行服务器端呈现

Posted 2023-04-12 token

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了.NET 8新预览版本使用 Blazor 组件进行服务器端呈现相关的知识，希望对你有一定的参考价值。

简介

此预览版添加了对使用 Blazor 组件进行服务器端呈现的初始支持。这是 Blazor 统一工作的开始，旨在使 Blazor 组件能够满足客户端和服务器端的所有 Web UI 需求。这是该功能的早期预览版，因此仍然受到一定限制，但我们的目标是无论选择如何构建应用，都能使用可重用的 Blazor 组件。

服务器端呈现（SSR）是指服务器生成 HTML 以响应请求。使用 SSR 的应用加载速度很快，因为渲染 UI 的所有艰苦工作都在服务器上完成，而无需下载大型 JavaScript 捆绑包。ASP.NET Core 对带有 MVC 和 Razor 页面的 SSR 现有支持，但这些框架缺乏用于构建可重用的 Web UI 片段的组件模型。这就是开拓者的用武之地！我们正在添加对使用 Blazor 组件生成服务器呈现的 UI 的支持，这些组件也可以扩展到客户端以实现丰富的交互性。

在此预览版中，可以使用 Blazor 组件执行服务器端呈现，而无需任何 .cshtml 文件。框架将发现可路由的 Blazor 组件，并将其设置为终结点。不涉及 WebAssembly 或 WebSocket 连接。你不需要加载任何JavaScript。每个请求由相应终结点的 Blazor 组件独立处理。

项目体验

首先需要安装 .NET 8预览版最新版

1.创建一个空的 ASP.NET Core web app:

dotnet new web -o WebApp
cd WebApp

在项目中添加一个简单的Razor组件:

dotnet new razorcomponent -n MyComponent

更新MyComponent.razor内容，将其变成一个带有路由的合适的HTML页面；

@page "/"
@implements IRazorComponentApplication<MyComponent>

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>Hello Blazor!</h1>
    <p>The time is @DateTime.Now.ToShortTimeString()</p>
</body>
</html>

你还需要在这个组件上实现接口IRazorComponentApplication，该接口目前用于帮助发现应用程序中的组件端点。这个设计可能会在以后的更新中改变，但目前这个接口是必需的。

在Program.cs中通过调用.AddRazorComponents()设置Razor组件服务
```
builder.Services.AddRazorComponents();
```
通过调用映射组件的端点。你需要为你的组件添加一个using指令:MapRazorComponents<TComponent>()

app.MapRazorComponents<WebApp.MyComponent>();

可路由组件将自动在所驻留的程序集中发现。再次注意，当前必须实现，但此设计可能会在以后的更新中更改。MyComponentTComponentIRazorComponentApplication

运行应用程序并浏览到应用程序根目录查看你的组件渲染

但是似乎无法交互，我在使用了点击事件但是没法触发了

修改MyComponent.razor文件代码

@page "/"
@implements IRazorComponentApplication<MyComponent>

<!DOCTYPE html>
<html lang="en">

<body>
    <h1>Hello Blazor!</h1>
    <p>The time is @DateTime.Now.ToShortTimeString()</p>
    <p>Counter: @counter</p>
    <button @onclick="OnClick">run</button>
    @code 
        private int counter = 0;
        private void OnClick()
        
            counter++;
        
    
</body>

</html>

运行效果：

当我们点击按钮并不会触发事件！可能是需要写js去完成，欢迎大佬一块讨论讨论新的技术

来着token的分享

技术交流：737776595

Blazor学习之旅 MudBlazor组件库介绍

【Blazor】| 总结/Edison Zhou

大家好，我是Edison。

为了实现一个Web应用系统，需要有个看起来不丑的UI，而对于.NET程序员来说要做全栈开发还是有点难，而本篇介绍的这个UI组件库正好可以帮助我们解决这个问题！

MudBlaozr是啥

MudBlazor是一个基于Blazor的前端UI组件库，它可以使.NET开发者使用C#语言快速地构建酷炫的Web应用。重点是，MudBlazor提供的UI组件真的还是蛮好看的，对于企业内部信息系统的开发绰绰有余，可以助力实现.NET开发者的全栈梦想。

MudBlazor官网：https://mudblazor.com/

MudBlazor在线尝试：https://try.mudblazor.com/

MudBlazor主要提供了以下类型的组件，以官网介绍为准：

（1）基础组件：颜色、图标等；

（2）布局组件：容器、网格、工具栏等；

（3）按钮组件：按钮、图标按钮、按钮组等；

（4）Input组件：表格、文本框、数字框、文件上传、高亮、打分等常见效果；

（5）数据显示组件：头像、列表、卡片、分页、Tab、时间线等；

（6）导航组件：链接、菜单、导航栏等；

（7）互动组件：进度条、提示栏、消息框等；

这里我们着重来看看常见的Table UI效果：

安装配置MudBlazor

第一步，安装MudBlazor包

dotnet add package MudBlazor

第二步，在_Imports.razor中添加MudBlazor的引用

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
.....
@using MudBlazor

第三步，在_Layout.cshtml中添加字体和样式引用（如果是WebAssembly模式的话，则是在index.html中），同时注释掉原有的site.css样式文件引用。

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <!-- 以下为新添加的css引用 -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <!-- 以下为原有的css引用 -->
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <!-- 以下为不再需要的css引用 -->
    @*<link href="css/site.css" rel="stylesheet" />*@
    ......
</head>

第四步，在_Layout.cshtml底部添加MudBlazor的js脚本引用。

<script src="_framework/blazor.server.js"></script>
<!-- 以下为新添加的js脚本 -->
<script src="_content/MudBlazor/MudBlazor.min.js"></script>

第五步，在Program.cs中向IoC容器注入MudService。（.NET 6以下版本在StartUp.cs类中）

using MudBlazor.Services;
// MudBlazor
builder.Services.AddMudServices();

最后一步，在MainLayout.razor中添加以下组件：

@inherits LayoutComponentBase
<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />


......

至此，MudBlazor组件库的安装配置工作就完成了，下一篇我们使用MudBlazor UI来重构之前的Todo应用。

小结

本篇，我们了解了MudBlazor这个强大的UI组件库。

下一篇，我们就试着将之前的Todo应用使用MudBlazor来重构一下。

参考资料

MudBlazor官网

年终总结：Edison的2021年终总结

数字化转型：我在传统企业做数字化转型

C#刷题：C#刷剑指Offer算法题系列文章目录

.NET面试：.NET开发面试知识体系

.NET大会：2020年中国.NET开发者大会PDF资料

以上是关于.NET 8新预览版本使用 Blazor 组件进行服务器端呈现的主要内容，如果未能解决你的问题，请参考以下文章

.NET 8 预览版 1：NativeAOT 升级和新的Blazor United

无法呈现 Blazor 组件

混合 Blazor 组件、DI 和 C# 8 可为空

Blazor - WebAssembly ASP.NET Core 托管模型

F#周报2019年第37期

.NET MAUI Preview7 状态预览(8月)