.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

目录
相关文章
|
5天前
|
运维 Prometheus 监控
如何在测试环境中保持操作系统、浏览器版本和服务器配置的稳定性和一致性?
如何在测试环境中保持操作系统、浏览器版本和服务器配置的稳定性和一致性?
|
3月前
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
45 8
|
30天前
|
监控 网络安全 调度
Quartz.Net整合NetCore3.1,部署到IIS服务器上后台定时Job不被调度的解决方案
解决Quartz.NET在.NET Core 3.1应用中部署到IIS服务器上不被调度的问题,通常需要综合考虑应用配置、IIS设置、日志分析等多个方面。采用上述策略,结合细致的测试和监控,可以有效地提高定时任务的稳定性和可靠性。在实施任何更改后,务必进行充分的测试,以验证问题是否得到解决,并监控生产环境的表现,确保长期稳定性。
46 1
|
1月前
|
网络协议 Unix Linux
一个.NET开源、快速、低延迟的异步套接字服务器和客户端库
一个.NET开源、快速、低延迟的异步套接字服务器和客户端库
|
1月前
|
IDE 网络安全 开发工具
IDE之pycharm:专业版本连接远程服务器代码,并配置远程python环境解释器(亲测OK)。
本文介绍了如何在PyCharm专业版中连接远程服务器并配置远程Python环境解释器,以便在服务器上运行代码。
288 0
IDE之pycharm:专业版本连接远程服务器代码,并配置远程python环境解释器(亲测OK)。
|
21天前
.NET 4.0下实现.NET4.5的Task类相似功能组件
【10月更文挑战第29天】在.NET 4.0 环境下,可以使用 `BackgroundWorker` 类来实现类似于 .NET 4.5 中 `Task` 类的功能。`BackgroundWorker` 允许在后台执行耗时操作,同时不会阻塞用户界面线程,并支持进度报告和取消操作。尽管它有一些局限性,如复杂的事件处理模型和不灵活的任务管理方式,但在某些情况下仍能有效替代 `Task` 类。
|
1月前
|
并行计算 Ubuntu 算法
Ubuntu18 服务器 更新升级CUDA版本 pyenv nvidia ubuntu1804 原11.2升级到PyTorch要求12.1 全过程详细记录 apt update
Ubuntu18 服务器 更新升级CUDA版本 pyenv nvidia ubuntu1804 原11.2升级到PyTorch要求12.1 全过程详细记录 apt update
97 0
|
1月前
|
存储 Linux 网络安全
【VMware VCF】使用 SFTP 服务器备份 VCF 核心组件的配置文件
【10月更文挑战第6天】以下是使用 SFTP 服务器备份 VMware VCF 核心组件配置文件的步骤:首先,设置 SFTP 服务器并配置用户账号与权限;其次,确保 VCF 环境能与 SFTP 服务器建立网络连接,并检查防火墙规则;接着,识别核心组件配置文件的位置,并使用 SFTP 客户端工具(如 `lftp` 或 WinSCP)进行备份;最后,验证备份结果的完整性和正确性,并定期执行备份操作,设置备份文件保留策略以节省存储空间。
|
2月前
|
开发框架 JavaScript 前端开发
|
3月前
|
安全 C#
【Azure 应用服务】在安全漏洞扫描中发现有泄露服务器IIS版本的情况,如何实现屏蔽服务版本号信息呢?
【Azure 应用服务】在安全漏洞扫描中发现有泄露服务器IIS版本的情况,如何实现屏蔽服务版本号信息呢?
144 1

热门文章

最新文章