How to edit and remove item from IReadonlyList in Blazor?

Question

I have two lists having uploaded image details here-:

list 1- IReadOnlyList<BrowserFile>? ListFileToUpload = Array.Empty<BrowserFile>(); ---binding to---> <MudList> list 2- IReadOnlyList<Images>? imageListUI { get; set; } = Array.Empty<Images>(); ---binding to---> <MudTable>

one list for pure image/uploaded file metadata and second list also contains same but for different operatios later.whenever user browse multiple images, first list will get the uploaded file details and trigger the second list..First list details i am binding in a <MudList> and second list i am binding first list in <MudList> and second list in <MudTable> .Both <MudList> and <MudTable> are in different component . second list getting details automaticaly when first list got updated.Till this i am able to do but for next, from <MudTable>,(using only second list) i need to edit the file name and i need a remove file items.that shoud reflect both <MudList> and <MudTable>. How i can do this edit and remove item operation from second list this with the below code pattern

MainUI.razor-page

  <FileInput @bind-SelectedFiles="createimage.ListFileToUpload"/> //calling fileinput component by passing file 
 details

 //in below table i need to add inline edit and delete item functionality.that change should reflects in  <MudList>
   @if (createimage.imageList.Count > 0)
  {

            <MudTable Items="createimage.imageListUI" Hover="true" Dense="true" Class="mb-4" Striped="true">
            <HeaderContent>
                <MudTh>Filename</MudTh>
                <MudTh>FileNameWithoutExtension</MudTh>
            </HeaderContent>
            <RowTemplate Context="mediaItem">
                    <MudTd DataLabel="Filename">@mediaItem.Name</MudTd>
                    <MudTd DataLabel="FileNameWithoutExtension">@mediaItem.ContentType</MudTd>
                <MudTd DataLabel="Edit">
                </MudTd>
            </RowTemplate>
        </MudTable>
    }      

@code{
 public partial class UI

   {
   private Createimage createimage = new();
 }
}

//initializing and get set to lists

     public class Createimage{

    public IReadOnlyList<Images>? imageListUI { get; set; } = Array.Empty<Images>();

    private IReadOnlyList<BrowserFile>? _ListFileToUpload = Array.Empty<BrowserFile>();

    public IReadOnlyList<BrowserFile>? ListFileToUpload
    {

        get { return this._ListFileToUpload; }

        set
        {
            this._ListFileToUpload = value;
            imageListUI = value.Select(file => new Images(file)).ToList();

        }
    }
}


  public class Images
   {
    private BrowserFile file;

    public Images(BrowserFile file)
    {
        this.file = file;
        Name = file.FileName;
        ContentType = file.FileExtension;
    }
    public String Name { get; set; }
    public String ContentType { get; set; }
   
    }
 }



 public class BrowserFile 
 {

 public BrowserFile(IBrowserFile file)
  {
    File = file ?? throw new ArgumentNullException(nameof(file));
    FileName = Path.GetFileName(File.Name);
    }


public IBrowserFile File { get; }

}

fileinputComponent.razor

      <MudList>
                @foreach (var fileInfo in SelectedFiles)
                {
                    <MudListItem @key="@fileInfo.File">
                        <MudChip Color="Color.Dark"
                                 Style="overflow: hidden; width: 60px;"
                                 Text="@(fileInfo.FileExtension)"/>
                        @(fileInfo.FileNameWithoutExtension)
                    </MudListItem>
                }
            </MudList>

  @code{
[Parameter]
public IReadOnlyList<BrowserFile> SelectedFiles { get; set; } = Array.Empty<BrowserFil>(); //getting selected files 
through component parameter

private async Task OnFilesChanged(InputFileChangeEventArgs e) {

   var files = new List<BrowserFile>(e.FileCount);
    files.AddRange(e.GetMultipleFiles(50).Select(file => new BrowserFilefile)));

   }
 }

Answer 1

Hi @RAMAN RAGAVAN,

The IReadOnlyList<T> represents a list in which the number and order of list elements is read-only. So, it doesn't provide the Add/Remove method to directly update the list items.

To add/update/remove the records in the IReadOnlyList<T>, you could convert it to a List, then call the Add/Remove method to change the items, after that reset the IReadOnlyList<T>.

You can refer to the following sample:

    public class PublicSetReadOnlyListClass
    {
        public IReadOnlyList<string> MyList { get; set; } = new List<string>() { "original", "original2", "original3" };
    }

    private void RemoveItem()
    { 
        var myObject = new PublicSetReadOnlyListClass();
        //myObject3.MyList.Add("added");  // this is NOT allowed, becaure the IReadOnlyList doesn't provide the Add/Remove method.

        //conevert the IReadOnlyList to a list
        List<string> exititems = myObject.MyList.ToList(); 
        //find the removed item.
        var removeitem = "original2";
        //call the add or remove method to change the existing items.
        exititems.Remove(removeitem);
        //update the IReadOnlyList.
        myObject.MyList = exititems;
    }

Then the result as below:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion