首页 > 其他分享 >Blazor学习记录_8.CSS隔离和代码隔离_异常处理_流式渲染

Blazor学习记录_8.CSS隔离和代码隔离_异常处理_流式渲染

时间:2024-03-30 20:55:37浏览次数:14  
标签:文件 隔离 渲染 代码 流式 Blazor CSS 页面

19.CSS隔离和代码隔离

19.1 代码隔离

  • 使用C# partial 关键字,创建一个与razor文件同名,扩展名加.CS的C#类文件,然后把 razor 文件中的 @code 中的代码迁移至 cs 文件中。注意命名空间、泛形参数声明、依赖注入的迁移

19.2 CSS隔离

  • 如同前面代码隔离文件一样,我们创建一个组件样式文件,并以 .CSS 为文件名后缀。
  • 组件默认的样式文件来自wwwroot文件夹下的app.css样式文件。
  • 每个组件都可以有自己独立的CSS样式文件,最终所有组件的CSS样式文件会在项目编绎时生成一个CSS合成样式文件,生成位置在wwwroot目录下,文件名为"Blazor.styles.css"。
    所以,在wwwroot目录下的文件app.razor中有这样一行代码:
    <link rel="stylesheett" href="Blazor.styles.css">

20.异常处理

20.1.系统默认的处理方式

在布局页面 MainLayout.razor 中,将代表子页面占位符的 @Body 参数,使用 <ErrorBoundary> @Body </ErrorBoundary> 包裹起来。这样,当发生异常时,将在页面的这个区域提示出默认错误信息:黄色三角中一个叹号、红色背景白色文字:"An error has occurred."。

20.2.自定义异常处理

在 ErrorBoundary 组件中放置 ErrorContent 组件,它后面再放置被ChildContent包裹的 @Body 参数, MainLayout.razor 代码如下:

@inherits LayoutComponentBase
<article class="content px-4">
    <ErrorBoundary>
        <ErrorContent>
            发生异常,消息:@content.Message
        </ErrorContent>
        <ChildContent>
            @Body
        </ChildContent>
    </ErrorErrorBoundary>
</article>

说明:ErrorContent 组件中有代表异常上下文的C#对象@content可以使用,它的属性 Message,InnerException,Data,Source等。

21. NET8中的流式渲染

21.1 历史遗留的负面包袱

以.NET8之前,如果我们有这样一段代码:
Home.razor

@page "Home"
<p> Count:@count </p>
@code
{
    int count = 0;
    async Task DoCountAsync()
    {
        for(int i=0;i<5;i++)
        {
            await Task.Delay(1000);
            count++;
            StateHasChanged();
        }
    }
    protected override async OnInitializedAsync()
    {
        await DoCountAsync();
    }
}

该代码表示一个共5秒每秒自增1的计数器,但是实现页面渲染效果却是页面会卡住5秒,5秒后才渲染。如果从命令行用crul https://localhost/Home来请求该页面,则明显观察到,当回键执行命令后,命领行界面5秒内没有结果,5秒后显示出一屏html的请求结果。
然后,为了解决这个问题在 .NET8之前,我们的做法是,把上面await DoCountAsync();执行代码从生命周期方法OnInitializedAsync放入生命周期方法OnAfterRenderAsync(bool firstRender)中,代码如下:

protected override async OnAfterRenderAsync(bool firstRender)
{
    if(firstRender)
        await DoCountAsync();
}

当相于,先把页面所有元素渲染出来(包含可能其他前前后后众多的元素),然后才轮到响应OnAfterRenderAsyn生命周期方法,才开始处理计数器逻辑并重新渲染计数器部分的页面。
负面影响:当页面元素较多,渲染任务繁重时,计数器部分的执行要等待所有页面元素的渲染完成,会有巨大延迟

21.2 流式渲染出场

  • 设计思想:
    在页面元素从上至下的渲染过程中,遇到动态刷新的部分,则先把动态刷新的部分执行并渲染完毕,再执行该部分的后面的元素的渲染任务。达到,依然是自上而下的流式渲染过程。
  • 方法:
    1.在页面增加流式渲染指令支持 @attribute [StreamRedering]
    2.await DoCountAsync();执行代码依然方在生命周期方法OnInitializedAsync
    3.流式渲染模式并不要求页面启用交互呈现模式,即使是静态页面也能达成目标。
    4.从命令行调用获取页面,返回的结果如下:
    image

标签:文件,隔离,渲染,代码,流式,Blazor,CSS,页面
From: https://www.cnblogs.com/hrx521/p/18105899

相关文章

  • 【CSS定位属性】用CSS定位属性精确控制你的网页布局!
    CSS定位属性是用于控制网页中元素位置的一种方式,它能够让元素在页面上精准地落在我们想要的位置。在CSS中,定位(Positioning)是控制元素在页面上如何定位和显示的一种机制。它主要包括四种属性:静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)。每种定位方式......
  • 基于SpringBoot+Vue的疫情隔离管理系统附带文章和源代码设计说明文档ppt
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • CSS3 实现16:9大屏居中显示
    大屏项目中,一般需要在不同分辨率上显示居中显示大屏内容,且不出现滚动条。实际展示大屏的硬件设备比例不一,为了兼容,并且不出现UI被拉伸的情况,发现可以使用CSS3的transfrom-scale属性,并配合CSS变量实现。其中transfrom-scale用在大屏绘制最外层盒子上,盒子内的样式按照UI给出的16:9......
  • HTML元素语义化补充之css函数(三)
    文章目录CSS中的函数css函数–varcss函数–calccss函数–blurcss函数–gradientlinear-gradient的使用CSS中的函数◼在前面我们有使用过很多个CSS函数:比如rgb/rgba/translate/rotate/scale等;CSS函数通常可以帮助我们更加灵活的来编写样式的值;◼下面有几个......
  • HTML5 和 CSS3 提高
    一、HTML5的新特性HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。声明:1.新特性增加了很多,但是我们专注于开发......
  • 还记得PostCSS吗,看这一篇文章就够了!!!
    背景由于项目中的使用,又想深入了解,想着写一篇博客,以此监督自我学习~那么首先,让我们带着几个问题来了解一下,PostCSSPostCSS是什么PostCSS有什么用如何使用PostCSS一、是什么官方:用JavaScript代码来处理CSS那么我们根据官方的这一段话,就可以得知一些相关信息......
  • css一行显示文本
    1.例如p元素,里面的文字不换行显示,超出部分不隐藏p{width:100px;word-break:keep-all;white-space:nowrap;}2.例如p元素,里面的文字不换行,超出部分用省略号代替p{width:100px;word-break:keep-all;white-space:nowrap;overflow:hidden;text-o......
  • CSS盒子模型
     注:css盒子模型跟ps的基本操作以及圆角切割1.盒子模型1.1网页布局的本质网页布局的核心本质:就是利用CSS摆盒子。网页布局过程:1、先准备好相关的网页元素,网页元素基本都是盒子Box。2、利用CSS设置好盒子样式,然后摆放到相应位置。3、往盒子里面装内容1.2盒子......
  • ps将一张图片分隔成几张,来完成css的布局。
    之前拿到一张图,是整个首页的布局,然后呢,用css处理,总感觉差了一些,而且一张图太大了,处理起来不方便。那就想到了将一张图分成几张来处理。 ps:如果是手工直接划动分割的话,分出现很多小的图片,这样不利于完整性。1、选择切片工具 ,右击鼠标,然后出现如下的界面: 2、设置水平(纵向......
  • CSS 空白问题汇总
    元素之间的空白问题行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符去除换行和空格给父元素font-size:0再给需要显示的元素单独设置大小行内块元素的空白问题行内块元素与文本的基线对齐,基线不是最底端,故有一定的距离解决:给行内元素设置vertical,值......