Использование Blazor InputFile в повторяющемся компоненте — OnChange, по-видимому, не может отследить, из какого компоне ⇐ C#

[Гость]

I'm having some issues with Blazor InputFile when using it within a repeating component, specifically getting the OnChange event to call the method in the correct instance of the repeating component.
Here's some code I've put together to demonstrate what I mean (I'm using Radzen components also):
The top level page razor component:

Код: Выделить всё

@page "/testing"

@foreach (var id in testingRepeaterIds)
{

}

@code {
private List testingRepeaterIds = new List { 1, 2, 3 };
}

The

Код: Выделить всё

TestingRepeater

component:

Код: Выделить всё

@code {
[Parameter] public int ComponentId { get; set; }

private RadzenDataGrid attachmentGrid;

private List attachedFiles = new List();

private async void LinkFilesToComponent(List files, int entityId)
{
if (entityId == ComponentId)
{
foreach (var file in files)
{
attachedFiles.Add(file);
}

attachmentGrid.Reload();
}
}
}

And the

Код: Выделить всё

TestUpload

component which contains the built in Blazor InputFile component:

Код: Выделить всё

Choose File(s)

@code {
[Parameter] public EventCallback OnChange { get; set; }

private List loadedFiles = new();
private bool isLoading;
private string _inputFileId = Guid.NewGuid().ToString();

private async Task LoadFiles(InputFileChangeEventArgs e)
{
isLoading = true;

foreach (var file in e.GetMultipleFiles())
{
var uploadedFile = new AttachmentDto
{
DiskName = Path.Combine("uploads", file.Name),
FileName = file.Name,
FileSize = file.Size,
FileType = file.ContentType,
};

loadedFiles.Add(uploadedFile);
}

await OnChange.InvokeAsync(loadedFiles);

isLoading = false;
}
}

My object

Код: Выделить всё

AttachmentDto

looks like this:

Код: Выделить всё

public class AttachmentDto
{
[MaxLength(1000)]
public string FileName { get; set; }
[MaxLength(1000)]
public string FileType { get; set; }
[MaxLength(1000)]
public long FileSize { get; set; }
[MaxLength(1000)]
public string DiskName { get; set; }
}

What I'm finding is that whichever repeater button I use to upload the files, they always get uploaded to the table of the first component, like in the screenshot below. I thought that providing a

Код: Выделить всё

@key

against the

Код: Выделить всё

InputFile

component would help Blazor track which component I was trying to work with, but this doesn't seem to help here. I've also tried passing through the

Код: Выделить всё

ComponentId

as a parameter to the

Код: Выделить всё

TestUpload

component so that I can then pass it back with the files, but although it seems to have the correct Id at the point of initialising, it's always then the wrong Id by the time

Код: Выделить всё

LoadFiles

is called.

For context, I'm using .net 8 and Blazor Web App, though my Routes component is set to use InteractiveServerRenderMode(prerender: false) so I think it's essentially like working with Blazor Server.


Источник: https://stackoverflow.com/questions/781 ... gly-unable