Добавьте еще один подраздел в RenderFragment с некоторыми параметрами - PullRequest
Новая
       1

Добавьте еще один подраздел в RenderFragment с некоторыми параметрами

1 голос
/ 24 января 2020

Я пытаюсь создать свой собственный компонент 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 = ..../>

Возможно ли это? Я пытаюсь создать таблицу без записи тегов и на родительской странице.

Спасибо.

1 Ответ

1 голос
/ 25 января 2020

Я пытаюсь построить таблицу без записи тегов и на родительской странице

В отличие от Html использования тегов, Blazor требует, чтобы вы также предоставили открывающие теги в качестве закрывающих тегов. Это необходимо для RenderTreeBuilder для построения виртуального DOM, который является базовым слоем, используемым для визуализации компонентов, и вычисления html diffs.

Однако вы можете добавить компонент, который должен быть визуализирован. как часть HeaderTemplate, например, следующий компонент служит заголовком таблицы домашних животных, отображая имя первого домашнего животного в списке домашних животных. Но, конечно, вы можете сделать его более сложным, например, когда пользователь выбирает питомца, вы меняете заголовок, чтобы отразить это, et c ...: 

<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; }
 }

Обратите внимание, что вы также можете добавить свойство ChildContent типа RenderFragment, если хотите добавить дочерний контент в компонент.

...