Blazor ——支持 UI 片段的 RenderFragment

最新推荐文章于 2023-07-30 14:58:00 发布

叫我 Teacher 周

最新推荐文章于 2023-07-30 14:58:00 发布

阅读量3.2k

点赞数 1

分类专栏： ASP.NET Core 文章标签： aspnetcore blazor UI RenderFragment

所有原创文章版权均归博主“佛系最高指挥官”所有，若要转载，必须注明出处！！！

本文链接：https://blog.csdn.net/playermaker57/article/details/114586336

版权

ASP.NET Core 同时被 2 个专栏收录

23 篇文章 8 订阅

订阅专栏

Blazor

12 篇文章 10 订阅

订阅专栏

前言

似乎很久没有写 Blazor 的东西了，因为我感觉我写的差不多了。现在觉得可能还需要补充一些细节，比如这个 RenderFragment 和 RenderFragment<TValue> 的使用，

RenderFragment

Represents a segment of UI content, implemented as a delegate that writes the content to a Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.

表示UI内容的一个片段，作为一个将内容写入到Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder 的委托实现。

    public delegate void RenderFragment(RenderTreeBuilder builder);

RenderFragment<TValue>

Represents a segment of UI content for an object of type TValue, implemented as a function that returns a Microsoft.AspNetCore.Components.RenderFragment.

表示类型为 TValue 的对象的UI内容段，已实现作为一个函数，返回一个 Microsoft.AspNetCore.Components.RenderFragment。

    public delegate RenderFragment RenderFragment<TValue>(TValue value);

示例

使用 .razor 创建组件

首先定义一个 Table.razor 组件

<table class="table table-striped">
    <thead>
        <tr>
            @Header
        </tr>
    </thead>
    <tbody>
        @if (DataSource != null)
        {
            foreach (var item in DataSource)
            {
                <tr>
                    @Body(item)
                </tr>
            }
        }
    </tbody>
</table>

@typeparam T

@code {
    [Parameter] public IEnumerable<T> DataSource { get; set; }
    [Parameter] public RenderFragment Header { get; set; }
    [Parameter] public RenderFragment<T> Body { get; set; }
}

使用这个组件：

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <Table DataSource="forecasts">
        <Header>
            <th>Date</th>
            <th>Temp. (C)</th>
            <th>Temp. (F)</th>
            <th>Summary</th>
        </Header>
        <Body>
            <td>@context.Date.ToShortDateString()</td>
            <td>@context.TemperatureC</td>
            <td>@context.TemperatureF</td>
            <td>@context.Summary</td>
        </Body>
    </Table>
}

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
        }
    }
}

在这里插入图片描述
Header 参数是一个自定义的 UI 代码块，这个应该很好理解。

Body 参数也是一个自定义的 UI 代码块，不同的是它具备一个 context 参数，数据类型是一个泛型类型，也就是 DataSource 定义的 T 的类型，也就是 context 的数据类型就是 T 的类型。

使用 RenderTreeBuilder 创建组件

public class Table<T> : ComponentBase
{
    [Parameter] public IEnumerable<T> DataSource { get; set; }
    [Parameter] public RenderFragment Header { get; set; }
    [Parameter] public RenderFragment<T> Body { get; set; }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "table"); //table
        builder.AddAttribute(1, "class", "table table-striped");

        builder.AddContent(2, table =>
        {
            #region thead
            table.OpenElement(0, "thead");
            table.AddContent(1, tr =>
            {
                tr.OpenElement(0, "tr");
                tr.AddContent(1, Header);
                tr.CloseElement();
            });
            table.CloseElement();
            #endregion

            #region tbody
            if (DataSource != null)
            {
                table.OpenElement(10, "tbody");
                foreach (var item in DataSource)
                {
                    table.AddContent(11, tr =>
                    {
                        tr.OpenElement(0, "tr");
                        tr.AddContent(1, Body(item));
                        tr.CloseElement();
                    });
                }
                table.CloseElement();
            }
            #endregion

        });

        builder.CloseElement(); //table end
    }
}