使用一些参数向 RenderFragment 添加另一个小节

Question

我正在尝试制作自己的 DataGrid 组件：

组件文件：Grid.razor

@typeparam TableItem

@using System.Collections.Generic

@if (ItemsList == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="row">
        <div class="col">
            <table>
                <thead>
                    <tr>
                        @HeaderTemplate
                    </tr>

                </thead>

                <tbody>
                    @foreach (var item in ItemsList)
                    {
                        <tr>
                            @RowTemplate(item)
                        </tr>

                    }
                </tbody>

            </table>

        </div>
    </div>

}

@code {



    [Parameter]
    public IEnumerable<TableItem> ItemSource { get; set; }

    [Parameter]
    public RenderFragment HeaderTemplate { get; set; }


    [Parameter]
    public RenderFragment<TableItem> RowTemplate { get; set; }

    [Parameter]
    public bool AllowSorting { get; set; }

    IEnumerable<TableItem> ItemsList { get; set; }

    protected override async Task OnInitializedAsync()
    {
        ItemsList = ItemSource;
    }

}

组件使用页面：test.razor

...
 <Grid ItemSource="@MySource">      
        <HeaderTemplate>         
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </HeaderTemplate>
        <RowTemplate>
            <td>@context.Column1</td>
            <td>@context.Column2</td>
            <td>@context.Column3</td>
        </RowTemplate>

    </Grid>
...

我想做的是向 RenderFragment 添加另一个“子部分”并公开一些参数，如下所示：在我的 test.razor 页面中：

<Grid ItemSource="@MySource">      
        <HeaderTemplate> 
            <AnotherSecion Parameter1 =  ..., Parameter2 = ..../>

这可能吗？我正在尝试构建 table 而不在父页面中编写和标记。

谢谢。

Answer 1

I'm trying to build the table without writing the and tags in the parent page

与 Html 标签的使用不同，Blazor 要求您提供开始标签和结束标签。这是 RenderTreeBuilder 需要的，以便构建虚拟 DOM 这是用于渲染组件的底层，并计算 html 差异。

但是，您可以添加一个要作为 HeaderTemplate 的一部分呈现的组件，例如，以下组件用作宠物 table 的 header，显示宠物列表中第一个宠物的名字。但是当然你可以让它更复杂，比如当用户 select 一行宠物时，你更改 header 以反映这一点，等等......：

<TableTemplate Items="pets" Context="pet">
    <TableHeader>
        <tr><TableHeaderTitle Name="@pets.First().Name" /></tr>

        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>

    </TableHeader>
    <RowTemplate>
        <td>@pet.ID</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

@code{

        List<Pet> pets = new List<Pet>() { new Pet { ID = 1, Name = "Dog"},
                                          new Pet {ID = 2, Name = "Cat" },
                                          new Pet {ID = 3, Name = "Horse"}};
public class Pet
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }
}

您的 TableHeaderTitle 组件可能如下所示：

 <p>Name: @Name</p>

 @code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public string Name { get; set; }
 }

请注意，如果要向组件添加 child 内容，也可以添加 RenderFragment 类型的 ChildContent 属性。

使用一些参数向 RenderFragment 添加另一个小节

Add another subsection to the RenderFragment with some parameters

blazor

blazor-server-side