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

简介: .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
  1. 在项目中添加一个简单的Razor组件:
dotnet new razorcomponent -n MyComponent
  1. 更新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,该接口目前用于帮助发现应用程序中的组件端点。这个设计可能会在以后的更新中改变,但目前这个接口是必需的。

  1. Program.cs中通过调用.AddRazorComponents()设置Razor组件服务

    builder.Services.AddRazorComponents();
    
  2. 通过调用映射组件的端点。你需要为你的组件添加一个using指令:MapRazorComponents<TComponent>()

app.MapRazorComponents<WebApp.MyComponent>();

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

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

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

修改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

目录
相关文章
|
6月前
|
开发框架 .NET C#
ASP.NET Core Blazor 路由配置和导航
大家好,我是码农刚子。本文系统介绍Blazor单页应用的路由机制,涵盖基础配置、路由参数、编程式导航及高级功能。通过@page指令定义路由,支持参数约束、可选参数与通配符捕获,结合NavigationManager实现页面跳转与参数传递,并演示用户管理、产品展示等典型场景,全面掌握Blazor路由从入门到实战的完整方案。
551 6
|
6月前
|
开发框架 安全 .NET
Microsoft .NET Framework 3.5、4.5.2、4.8.1,适用于 Windows 版本的 .NET,Microsoft C Runtime等下载
.NET Framework是Windows平台的开发框架,包含CLR和FCL,支持多种语言开发桌面、Web应用。常用版本有3.5、4.5.2、4.8.1,系统可同时安装多个版本,确保软件兼容运行。
1510 0
Microsoft .NET Framework 3.5、4.5.2、4.8.1,适用于 Windows 版本的 .NET,Microsoft C Runtime等下载
|
运维 Prometheus 监控
如何在测试环境中保持操作系统、浏览器版本和服务器配置的稳定性和一致性?
如何在测试环境中保持操作系统、浏览器版本和服务器配置的稳定性和一致性?
|
8月前
|
Ubuntu 安全 小程序
服务器版本的CentOS和Ubuntu哪个更适合你?
但是以上的比较并不说明Ubuntu是不稳定的或者是不安全的,只是以上比较过程中,在稳定性方面Ubuntu稍微逊色了一点。由于Ubuntu在个人桌面电脑的使用率远远高于CentOS,用Ubuntu搭建服务器,如果遇到什么问题,寻找解决方案相对比较容易,这让Ubuntu在选择方面更优于CentOS。如果你是一个初学者,那么毫无疑问Ubuntu是更适合的选择。如果你正在经营自己的公司,在这两者之间,CentOS会更好一些。
|
10月前
|
Ubuntu Linux 数据中心
阿里云服务器纯净版系统解析:公共镜像版本特性与选择指南参考
当我们选购阿里云服务器时,系统镜像的选择至关重要。阿里云为用户提供了多种系统镜像,包括公共镜像、自定义镜像、共享镜像、云市场镜像和社区镜像。其中,公共镜像为纯净版系统,这些系统皆已正版授权,旨在为ECS实例上的应用程序提供安全、稳定的运行环境。本文将为大家详细汇总阿里云服务器纯净版系统及最新的系统版本,以供大家了解和选择。
|
9月前
|
存储 Ubuntu 安全
如何在服务器上快速安装 ERPNext 最新版本?
ERPNext 是一款开源且功能全面的企业资源规划软件,在企业信息化管理中广泛应用。本文介绍如何通过 Websoft9 控制台安装其最新版本,以提升部署效率。内容涵盖安装前的服务器准备、Websoft9 控制台登录,到通过应用市场安装 ERPNext 的详细步骤,以及安装后的验证与基础配置。帮助企业快速搭建稳定高效的信息化管理平台,满足财务、采购、销售、库存等多方面业务需求,助力企业降本增效,实现可持续发展。
|
开发框架 .NET C#
在 ASP.NET Core 中创建 gRPC 客户端和服务器
本文介绍了如何使用 gRPC 框架搭建一个简单的“Hello World”示例。首先创建了一个名为 GrpcDemo 的解决方案,其中包含一个 gRPC 服务端项目 GrpcServer 和一个客户端项目 GrpcClient。服务端通过定义 `greeter.proto` 文件中的服务和消息类型,实现了一个简单的问候服务 `GreeterService`。客户端则通过 gRPC 客户端库连接到服务端并调用其 `SayHello` 方法,展示了 gRPC 在 C# 中的基本使用方法。
421 5
在 ASP.NET Core 中创建 gRPC 客户端和服务器
|
Web App开发 前端开发 调度
一款基于 .NET + Blazor 开发的智能访客管理系统
一款基于 .NET + Blazor 开发的智能访客管理系统
248 8
|
数据挖掘 BI
.net8 Syncfusion生成pdf/doc/xls/ppt最新版本
通过使用 Syncfusion,您可以高效地生成各种文档,满足不同的业务需求。这些工具不仅易于使用,还具有高性能和高度可扩展性,是处理文档的理想选择。
611 16
下一篇
开通oss服务