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

我的媒体卡文件：

<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 集合的代码回复了我：

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

如果上面link失败，可以下载上面的代码here

Syncfusion Blazor 列表框模板

Syncfusion Blazor ListBox Template

listbox

syncfusion

blazor