.NET 8新预览版使用 Blazor 组件进行服务器端呈现(项目体验)

 更新时间:2023年04月13日 08:36:32   作者:tokengo  
这篇文章主要介绍了.NET 8新预览版使用 Blazor 组件进行服务器端呈现(项目体验),这是 Blazor 统一工作的开始,旨在使 Blazor 组件能够满足客户端和服务器端的所有 Web UI 需求,需要的朋友可以参考下

简介

此预览版添加了对使用 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

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

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

builder.Services.AddRazorComponents();

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

app.MapRazorComponents<WebApp.MyComponent>();

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

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

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

修改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去完成,欢迎大佬一块讨论讨论新的技术

到此这篇关于.NET 8新预览版本使用 Blazor 组件进行服务器端呈现的文章就介绍到这了,更多相关.NET使用 Blazor 组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • C# Lambda表达式用途深入理解

    C# Lambda表达式用途深入理解

    假如我们想要从一个整型数组中取出其中是奇数的选项,其实现方式有很多,接下来通过三种方法的对比理解Lambda表达式的用途,需要了解的朋友可以参考下
    2012-12-12
  • ASP.NET Core中使用滑动窗口限流的问题及场景分析

    ASP.NET Core中使用滑动窗口限流的问题及场景分析

    这篇文章主要介绍了ASP.NET Core中使用滑动窗口限流的问题,主要介绍服务限流场景中的应用,如何使用滑动窗口来解决这个问题,本文通过实例图文相结合给大家介绍的非常详细,需要的朋友参考下吧
    2021-12-12
  • WPF中常用的布局容器介绍

    WPF中常用的布局容器介绍

    这篇文章介绍了WPF中常用的布局容器,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • 不可忽视的 .NET 应用5大性能问题

    不可忽视的 .NET 应用5大性能问题

    ASP.NET 或是 Windows Forms 容器中,使用 ADO 库与运行在 CLR 交互,而 CLR 运行在操作系统中而该硬件又与其他包含不同技术堆栈的硬件通过网络相连。在你的应用与外部环境之间,。我们还有 API 管理服务以及多级缓存基础构造数量庞杂,都可能影响应用程序的性能!
    2016-05-05
  • .NET Core通过dotnet publish命令发布应用

    .NET Core通过dotnet publish命令发布应用

    这篇文章介绍了.NET Core通过dotnet publish命令发布应用的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03
  • ASP.NET Core Kestrel 中使用 HTTPS (SSL)

    ASP.NET Core Kestrel 中使用 HTTPS (SSL)

    这篇文章主要为大家详细介绍了ASP.NET Core Kestrel 中使用 HTTPS(SSL)的相关资料,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • LINQ重写博客垃圾图片回收算法

    LINQ重写博客垃圾图片回收算法

    本人博客后台管理模块有个功能,可以扫描图片上传文件夹下所有未被引用的博客
    2012-02-02
  • ASP.NET使用GridView导出Excel实现方法

    ASP.NET使用GridView导出Excel实现方法

    这篇文章主要介绍了ASP.NET使用GridView导出Excel实现方法,是asp.net操作office文件的一个典型应用,代码中备有较为详尽的注释便于读者理解,需要的朋友可以参考下
    2014-11-11
  • asp.net中生成饼状与柱状图实例

    asp.net中生成饼状与柱状图实例

    这篇文章主要介绍了asp.net中生成饼状与柱状图的方法,以实例形式较为详细的讲述了生成饼状与柱状图的原理与具体代码,包括前后台的实现代码,需要的朋友可以参考下
    2014-11-11
  • C#下载文件(TransmitFile/WriteFile/流方式)实例介绍

    C#下载文件(TransmitFile/WriteFile/流方式)实例介绍

    C#下载文件想必很多业内人士都不会陌生吧,C#下载文件方法很多,本文整理了一些,可供大家参考,感兴趣的你可以研究下,或许本文所提供的知识点对你有所帮助
    2013-02-02

最新评论