Question

我有一个Blazor服务器端页面，其中包含以下内容：

@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>
}

Component OpportunitiesStagesDiv如下：

<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();
    }
}

MoveItUp（s）和MoveItDown（s）是用于根据数据库中查询的顺序参数向上或向下移动foreach循环中的主要div元素的函数。这很完美。奇怪的是，一旦DIV元素被上下移动，组件中的编辑功能@onclick="() => EditStage(MyEditOst.Id)"就会反映出它是前一个元素。

要使用的MoveItUp和MoveItDown功能供参考：

 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();
        }
    }

示例我的列表如下：

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

当我向上移动一格时

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

，然后在div 3的第2行上单击现在的编辑，它会像div 2一样显示编辑内容。似乎组件仍然保留了呈现的UI的位置，就好像DIV 2处于打开状态一样。第二行和DIV 3仍在第三行，尽管上移和下移功能已更新了数据库，并且已正确更新了UI以在移动时按顺序显示列表。有什么建议吗？

下面是呈现的示例页面：

Sample list picture

Answer 1

仔细阅读Microsoft LifeCycle文档后，我发现了一个简单的解决方案。我发现如果使用：

protected override void OnParametersSet()
{
    ...
}

我的模态上的编辑表单显示正确的信息。即使设置了在OnInitialized（）上提供它们的原始参数，OnParameterSet仍允许我更新任何局部组件变量。

谢谢，我希望这个答案对所有人有帮助。

Blazor组件在StateHasChanged（）

1 个答案: