首页 > 其他分享 >.NET 8新预览版本使用 Blazor 组件进行服务器端呈现

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

时间:2023-04-12 13:22:28浏览次数:33  
标签:服务器端 预览版 UI 组件 NET 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

标签:服务器端,预览版,UI,组件,NET,Blazor
From: https://www.cnblogs.com/hejiale010426/p/17309490.html

相关文章

  • Asp.NetWebApi跨域解决方案
    最近新开项目,项目初期本地部署访问webapi,api采用JWT验证,发现加上Authorization请求头后就报跨域问题,网上很多方案例如修改webconfig请求头什么的,均测试未果,多方尝试后有了以下方案,一行代码便完全解决跨域问题,特此记录!1、NuGet下载Microsoft.AspNet.WebApi.Cors  2、App_Sta......
  • Netty与Spring Boot的整合实现(转)
    来源:https://www.jb51.net/article/168212.htm最近有朋友向我询问一些Netty与SpringBoot整合的相关问题,这里,我就总结了一下基本整合流程,也就是说,这篇文章,默认大家是对netty与Spring,SpringMVC的整合是没有什么问题的。现在,就进入正题吧。Server端:总的来说,服务端还是比较简单的,......
  • win10、win2016离线安装 .netframework3.5
    下载地址:(网上收集的)   https://pan.baidu.com/s/1O24nLgXhehHveae25p9SLg密码:amgu   https://url93.ctfile.com/f/29519493-531656763-281351(访问密码:8843)   https://soft.3dmgame.com/down/205311.html下载NetFx3.cab后将其放于C盘WINDOWS文件夹下(C:\Windows)点击“......
  • asp.net webform 允许跨域
    voidApplication_BeginRequest(objectsender,EventArgse){//允许跨域请求的域名列表,可以根据需求进行修改string[]allowedOrigins=newstring[]{"http://example1.com","http://example2.com"};//获取请求来源stringorigin=HttpContex......
  • Kubernetes客户端认证(二)—— 基于ServiceAccount的JWTToken认证
    1、概述在Kubernetes官方手册中给出了“用户”的概念,Kubernetes集群中存在的用户包括“普通用户”与“ServiceAccount”,但是Kubernetes没有普通用户的管理方式,通常只是将使用集群根证书签署的有效证书的用户都被视为合法用户。那么对于使得Kubernetes集群......
  • Ado.net与EF的区别?
    运行效率方面:Ado.net更好,直接通过Command、Connection等命令写sql语句进行CRUD操作。开发效率方面:EF开发起来更快,代码可读性好。只需操作对象,使用C#语法完成数据库操作。适用性方面:EF适合大型项目,数据量大。Ado.net适合小型项目,运行效率高。......
  • .NET 个人博客系统
    前言之前通过github学习了一个.netcore的博客项目,最近也是完成了博客的备案,完善了一下。该项目是传统的MVC项目,可以进行主题的切换,采用Bootstrap进行前台页面的展示,有配套的后台管理系统,可以解析Markdown文件。参观地址ZY知识库可以将个人的意见评论到该文章,我可以采纳采纳。......
  • 通过netmiko备份h3c交换机的配置
    fromnetmikoimportConnectHandlerhostlist=['10.128.253.1','10.128.253.2']defconfiguration_backup(dev,cmd='discu'):withConnectHandler(**dev)asconn:output=conn.send_command(command_string=cmd)fil......
  • 从0到1手把手教你ASP.NET Core Web API项目配置接口文档Swagger(一)
    一、创建ASP.NETCoreWebAPI项目(若项目已创建,则可跳过本节内容)1、双击打开VS2022。2、单击“创建新项目”,如下图。3、选择“ASP.NETCoreWebAPI”类型,然后单击“下一步”,如下图。4、“项目名称”此处填写为“AllTestDemo”;“位置”此处放在E盘根目录;“解决方案名称”此......
  • 迁移学习()《Attract, Perturb, and Explore: Learning a Feature Alignment Network fo
    论文信息论文标题:Attract,Perturb,andExplore:LearningaFeatureAlignmentNetworkforSemi-supervisedDomainAdaptation论文作者:TaekyungKim论文来源:2020ECCV论文地址:download 论文代码:download视屏讲解:click1摘要提出了目标域内的域内差异问题。提......