Syncfusion Blazor 列表框模板

Question

我最近开始使用 Syncfusion Blazor，但我无法理解列表框的模板功能是如何工作的。我正在尝试将组件动态添加到列表框并将每个新添加的索引传递给组件。但是，当我添加一个新组件时，之前组件中的所有索引也会更新。我需要能够为一个组件设置索引。

@page "/test"
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns

<div class="container px-5">
    <SfButton @onclick="AddMedia">Add Media</SfButton>
    <SfListBox TValue="int[]" DataSource="@Data" TItem="ViewMedia" @ref="MediaListBoxObj">
        <ListBoxFieldSettings></ListBoxFieldSettings>
        <ListBoxTemplates TItem="ViewMedia">
            <ItemTemplate>
                <MediaCard media="new ViewMedia { ListIndex = MediaCount }" ></MediaCard>
            </ItemTemplate>
        </ListBoxTemplates>
        <ListBoxSelectionSettings Mode="SelectionMode.Single"></ListBoxSelectionSettings>
    </SfListBox>   
</div>

@code { 
    // public ListData Model = new ListData();
    SfListBox<int[], ViewMedia> MediaListBoxObj;
    public List<ViewMedia> Data = new List<ViewMedia>
    {
        new ViewMedia{ ListIndex = 0}
    };  
    int MediaCount = 0;
    public List<ViewMedia> NewMediaItem { get; set; } = new List<ViewMedia>();
    public List<ViewMedia> NewMedia()
    {
        NewMediaItem.Add(new ViewMedia { ListIndex = MediaCount});
        return NewMediaItem;
    }
    private void AddMedia()
    {
        var newMediaItem = NewMedia();
        MediaListBoxObj.AddItems(newMediaItem);
        Data.Add(newMediaItem[0]);
        MediaCount++;        
        NewMediaItem.Clear();
    }

我的 MediaCard 文件：

<div class="AddMedia">
    <div name="mediaAdd" class="container-fluid px-4">
        <div class="form-row align-middle mb-2 pl-1">
            <SfTextBox CssClass="e-filled" Placeholder="Provide a brief description" @bind-Value="media.Blurb"></SfTextBox>
        </div>
        <div class="form-row">
            <label class="form-check-label">
                Is there any blood or gore in the video?<span class="text-danger ml-1">*</span>
            </label>
            <div class="row">
                <div class="form-check m-2 d-inline">
                    <SfRadioButton Label="No" Name="@media.ListIndex.ToString()" Value="0" Checked="@media.Gore"></SfRadioButton>
                </div>
                <div class="form-check m-2 d-inline">
                    <SfRadioButton Label="Yes" Name="@media.ListIndex.ToString()" Value="1" Checked="@media.Gore"></SfRadioButton>
                </div>
            </div>
        </div>
    </div>
</div>
@code {
    [Parameter]
    public ViewMedia media { get; set; } 
}

Answer 1

我在 Syncfusion forums 上问了这个问题，他们用以下使用 Observable Collection 的代码回复我：

<div class="container px-5"> 
    <SfButton @onclick="AddMedia">Add Media</SfButton> 
    <SfListBox TValue="int[]" DataSource="@Data" TItem="ViewMedia" @ref="MediaListBoxObj"> 
        <ListBoxFieldSettings></ListBoxFieldSettings> 
        <ListBoxTemplates TItem="ViewMedia"> 
            <ItemTemplate> 
                @{ 
                    var data = (context as ViewMedia); 
                    <MediaCard media="new ViewMedia { ListIndex = data.ListIndex }"></MediaCard> 
                } 
            </ItemTemplate> 
        </ListBoxTemplates> 
        <ListBoxSelectionSettings Mode="SelectionMode.Single"></ListBoxSelectionSettings> 
    </SfListBox> 
</div> 
 
@code { 
 
    SfListBox<int[], ViewMedia> MediaListBoxObj; 
    public ObservableCollection<ViewMedia> Data { get; set; } 
    int MediaCount = 0; 
 
    protected override void OnInitialized() 
    { 
        this.Data = ViewMedia.getListData(); 
    } 
 
    private void AddMedia() 
    { 
        MediaCount++; 
        this.Data.Add(new ViewMedia() { ListIndex = MediaCount }); 
    } 
public class ViewMedia 
    { 
        public int ListIndex { get; set; } 
        public int Gore { get; set; } 
        public string Blurb { get; set; } 
 
        public static ObservableCollection<ViewMedia> getListData() 
        { 
            ObservableCollection<ViewMedia> Data = new ObservableCollection<ViewMedia>(); 
            Data.Add(new ViewMedia() { ListIndex = 0 }); 
            return Data; 
        } 
    } 

如果以上链接失效，可以下载以上代码here