CODEWITHSUNDEEP
c#asp.netblazorblazor-server-side
Jameel Hussain
Jameel Hussain

Reputation: 68

Blazor Server Component not refreshing after state change

I am rendering a component within another component based on some ifs, logic is that there are clients and they have linked clients, if there are any linked clients then a dropdown is shown, and if user selects any linked client from the dropdown, the linked client data will be shown side by side in the same component.

But the problem is that it works for the first time when I select a linked client, if I select another, component doesn't refresh, if I change it to 0 then it again refreshes and only shows the client data, and then if I change it again from 0 it works again.

below is my code.


@if (LinkedClients?.Count() > 0)
{
    <select class="form-control input-width-auto bg-white" @onchange="e => ChangeLinkedClient(e)">
        <option value="0">Select Linked Account</option>
        @foreach (var item in LinkedClients)
        {
            <option value="@item.LinkedClient.Id">@item.LinkedClient.Name</option>
        }
    </select>
}
<div class="row mt-3">
    <div class="@((SelectedLinkedClient != 0)? "col-md-6" : "col-md-12")">
                

<MyProject.ComponentLibrary.Profile.ProfilePrimaryDetailsComponent ClientId="ClientId" GoToNextEvent="GoToNext" LoadProfileProgress="DoNothing"></MyProject.ComponentLibrary.Profile.ProfilePrimaryDetailsComponent>
            </div>
                <div class="col-md-6">
                    @if (SelectedLinkedClient != 0)
                    {
                    

<MyProject.ComponentLibrary.Profile.ProfilePrimaryDetailsComponent ClientId="SelectedLinkedClient" GoToNextEvent="GoToNext" LoadProfileProgress="DoNothing"></MyProject.ComponentLibrary.Profile.ProfilePrimaryDetailsComponent>
                    }
                </div>
            </div>

Change method code

public void ChangeLinkedClient(Microsoft.AspNetCore.Components.ChangeEventArgs e)
    {
        SelectedLinkedClient = Convert.ToInt32(e.Value.ToString());
        StateHasChanged();
    }

I am rendering this component in an MVC Core project inside a view.

Upvotes: 1

Views: 1098

Answers (1)

Ali Borjian
Ali Borjian

Reputation: 1108

Use @key to control the preservation of elements and components :

<option value="@item.LinkedClient.Id" @key="@item">@item.LinkedClient.Name</option>

You can also use @key to preserve an element or component subtree when an object doesn't change

Upvotes: 3

Related Questions