Blazor Component not updating after StateHasChanged()

Question

I have a Blazor Server-Side page that has the following:

@foreach (var s in OSTs)
{
    <div class="alert" style="height: 30px; background:@s.Color; color: @s.TextColor;">

        <div class="form-row">
            <div class="col-sm-3"><strong>@s.Stage</strong><br />@s.Description</div>
            <OpportunitiesStageDiv MyEditOst="@s" UpdateIt="AddOrEditStage"></OpportunitiesStageDiv>
            <div class="badge badge-primary" @onclick="() => MoveItUp(s)" style="cursor: pointer; width: 6rem;"><i class=" oi oi-arrow-top"></i> Move Up</div>
            <div class="badge badge-primary" @onclick="() => MoveItDown(s)" style="cursor: pointer; width: 6rem;"><i class="oi oi-arrow-bottom"></i> Move Down</div>
            <div class="badge badge-primary">@s.Id - @s.StageOrder</div>
        </div>
    </div>
}

The Component OpportunitiesStagesDiv is as follows:

<div class="badge badge-primary" @onclick="() => EditStage(MyEditOst.Id)" style="cursor: pointer; width: 6rem;">Edit Stage</div>
<Modal @ref="@EditModal">
    <Title>Edit Opportunity Stage</Title>
    <Body>
        <EditOpportunityStage EditOSt="@MyEditOst" Complete="AddOrEditStage"></EditOpportunityStage>
    </Body>
    <Footer>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="() => EditModal.Close()">Close</button>
    </Footer>
</Modal>
@code {
    [Parameter]
    public OpportunityStagesTemplate MyEditOst { get; set; }
    private Modal EditModal = new Modal();
    [Parameter]
    public EventCallback<int> UpdateIt { get; set; }

    protected override void OnInitialized()
    { 
        base.OnInitialized();
    }
    private void EditStage(int SId)
    {
        EditModal.Open();
    }
    private void AddOrEditStage(int Completed)
    {
        if (Completed == 99)
        {
        }
        EditModal.Close();
    }
}

The MoveItUp(s) and MoveItDown(s) are functions that move the main div element in the foreach loop either up or down based on the order parameter in the query from the database. This works perfectly. What is strange is that once a DIV element is moved up or down, the edit function @onclick="() => EditStage(MyEditOst.Id)" in the component reflects as if it is the previous element.

For reference the working MoveItUp and MoveItDown functions:

 private void MoveItUp(OpportunityStagesTemplate MyEditOst)
    {
        if (MyEditOst.StageOrder > 1)
        {
            OpportunitiesStagesTemplateGateway OSTGw = new OpportunitiesStagesTemplateGateway();
            OpportunityStagesTemplate PreviousOst = OSTGw.GetStageByOIdAndStageOrder(MyEditOst.OId, MyEditOst.StageOrder - 1);
            PreviousOst.StageOrder = MyEditOst.StageOrder;
            MyEditOst.StageOrder -= 1;
            OSTGw.UpdateOpportunityStage(PreviousOst);
            OSTGw.UpdateOpportunityStage(MyEditOst);
            ExecuteTheGetStages(LastId);
            StateHasChanged();
        }
    }
    private void MoveItDown(OpportunityStagesTemplate MyEditOst)
    {
        OpportunitiesStagesTemplateGateway OSTGw = new OpportunitiesStagesTemplateGateway();
        int ct = OSTGw.GetCountByOId(MyEditOst.OId);
        if (ct > MyEditOst.StageOrder)
        {
            OpportunityStagesTemplate NextOst = OSTGw.GetStageByOIdAndStageOrder(MyEditOst.OId, MyEditOst.StageOrder + 1);
            NextOst.StageOrder = MyEditOst.StageOrder;
            MyEditOst.StageOrder += 1;
            OSTGw.UpdateOpportunityStage(NextOst);
            OSTGw.UpdateOpportunityStage(MyEditOst);
            ExecuteTheGetStages(LastId);
            StateHasChanged();
        }
    }

Example I have a list as follows:

<div 1 edit moveup movedown>
<div 2 edit moveup movedown>
<div 3 edit moveup movedown>

When I move up one div

<div 1 edit moveup movedown>
<div 3 edit moveup movedown>
<div 2 edit moveup movedown>

and then click on the edit for now on line 2 for div 3, it brings up the edit as if was the div 2. It seems that the component still retains the position on the rendered UI as if DIV 2 is in on the second line and DIV 3 is still on the thirdline, although the move up and move down functions have updated the database and have updated the UI correctly to display the list in the order as it is moved. Any suggestions?

Below is sample rendered page:

Sample list picture

Mariano Mariano · Accepted Answer · 2020-10-08T19:00:27

I have found a simple solution after careful reading of the Microsoft LifeCycle Documenttation. I found that if use the:

protected override void OnParametersSet()
{
    ...
}

the edit form on my modal displays the correct information. The OnParameterSet allows me to update any local component variables even if the original parameter that fed them on the OnInitialized() were set.

Thanks and I hope this answer helped all.

Blazor Component not updating after StateHasChanged()

1 Answers