Removing the child component's Renderfragment from the collection based on a key in Blazor

Posted 3 years ago by Chandana
Edited 3 years ago
0

I am storing child components in a dictionary and trying to remove key =1 from the collection but the last row is removing and the keys are manipulated.

Please find the description below that I am trying blazor webassembly:

I am adding a child component as renderfragments to a dictionary in the main component when the user tells Addme. Similarly, when the user gives the row number and clicks on Deleteme, I am trying to remove the renderfragment based on the dictionary key. I am looping a dictionary and showing all the child components. But I observe always the last element in the dictionary is removed and the keys are pointing wrongly to the Renderfragment after a delete. Please help me.

Please find the parent component code below:

@page "/counter"
    
    <h1>Counter</h1>
    
    <button class="btn btn-primary" @onclick="IncrementCount">Add me</button>
    <br />
    
    <button class="btn btn-primary" @onclick="Remove">Delete me</button>
    <label>Enter row number to delete:</label>
    <input type="text" @bind-value="@getKey">
    <br />
    
    <label>CollectionCount: @dicCount</label>
    <label>Counter count: @currentCount</label>
    
    @{
        var dic = MyDic.OrderBy(x => x.Key).ToList();
    }
    @foreach (var item in dic)
    {
        <br />
        <label>Row Number:</label>
        <label>@item.Key</label>
        @item.Value;
    
    }
    
    @code {
        private Dictionary<int, RenderFragment> MyDic { get; set; } = new Dictionary<int, RenderFragment>();
    
        public int getKey { get; set; }
    
        private int currentCount = 0;
    
        private int dicCount = 0;
    
        public RenderFragment ChildRef { get; set; }
    
        private void IncrementCount()
        {
            ChildRef = builder =>
            {
                builder.OpenComponent<Child>(1);
                builder.CloseComponent();
            };
            MyDic.Add(currentCount, ChildRef);
            ChildRef = null;
            dicCount = MyDic.Count;
            currentCount++;
        }
    
        private void Remove()
        {
            MyDic.Remove(getKey);
        }
    }
    
    Please find the child code below:
    
    <h3>Child</h3>
    
    <label>Renderfragment loaded</label>
    <label>@RandomNumber</label>
    
    @code {
    
        // Instantiate random number generator.
        private readonly Random _random = new Random();
    
        public string RandomNumber { get; set; }
    
        protected override async Task OnInitializedAsync()
        {`enter code here`
            RandomNumber = _random.Next().ToString();
        }
    }
  • 0

    Try this instead:

    Counter.razor

    @page "/counter"
    
    <h1>Counter</h1>
    
    <button class="btn btn-primary" @onclick="IncrementCount">Add me</button>
    <br />
    
    <button class="btn btn-primary" @onclick="Remove">Delete me</button>
    <label>Enter row number to delete:</label>
    <input type="text" @bind-value="@getKey">
    <br />
    
    <label>CollectionCount: @dicCount</label>
    <label>Counter count: @currentCount</label>
    
    @{
        var dic = MyDic.OrderBy(x => x.Key).ToList();
    }
    @foreach (var item in dic)
    {
        <br />
        <label>Row Number:</label>
        <label>@item.Key</label>
        <Child RandomNumber="@item.Value"></Child>
    }
    
    @code {
        private Dictionary<int, string> MyDic { get; set; } = new Dictionary<int, string>();
    
        public int getKey { get; set; }
    
        private int currentCount = 0;
    
        private int dicCount = 0;
    
        // Instantiate random number generator.
        private readonly Random _random = new Random();
    
        private void IncrementCount()
        {
            MyDic.Add(currentCount, _random.Next().ToString());
            dicCount = MyDic.Count;
            currentCount++;      
        }
    
        private void Remove()
        {
            MyDic.Remove(getKey);
            dicCount = MyDic.Count;
            currentCount--;
        }
    }

     

    Child.razor

    <h3>Child</h3>
    
    <label>Child Component Loaded</label>
    <label>@RandomNumber</label>
    
    @code {
        [Parameter]
        public string RandomNumber { get; set; }
    }
    Posted 3 years ago by selliott Edited 3 years ago
Someone is typing...

Post a Reply

You must be logged in to add a new post.
Number of online users: 0
An error has occurred. This application may no longer respond until reloaded. Reload 🗙