Question

我的问题可能很简单，但我一直在努力了解问题所在。我有一个Blazor页面，该页面带有单独的模型类（在代码中循环时，List<Type>的引用为LsC或单个为ls的引用）加载数据。但是，当我单击以更新该数据时，页面不会刷新。如果我添加新条目，则该页面会加载新条目。

出现问题的Blazor页面代码很简单：

@if (ls.PrimaryContact)
{
    <div style="cursor: pointer;" class="badge badge-pill badge-success">Primary</div>
}
else
{
    <div style="cursor: pointer;" @onclick="@(() =>MakePrimaryContact(@ls.Id))" class="badge badge-pill badge-info">Make Primary</div>
}

当主字段中的结果为true时，代码应放置绿色药丸，或使用make原始文本放置常规信息药丸。手动（F5）刷新页面后，代码可以正常工作。但是，当我单击“设为主要药丸”时，数据库确实会更新，但是页面却没有。我必须再次手动更新页面以正确反映更改。

它调用onClick的函数：

private void MakePrimaryContact(int LCId)
{
    LeadsContactsGateway LCGw = new LeadsContactsGateway();
    var wt = LCGw.UpdatePrimary(Lead.Id, LCId);
    LsC = LsCGw.GetByLeadsId(Id);
    StateHasChanged();
    OnInitialized();
}

我添加了StateHasChanged()作为一项附加措施，但是我的页面没有使用正确的主要联系人来获取更新的记录集。直到我手动（F5）刷新网页，才能反映出正确的更新。

在同一页面上，足够奇怪的是，我还有另一个按钮，用于添加新的数据库条目并自动弹出更新。

没有有问题的新数据库条目的代码：

<button class="btn btn-primary btn-sm" @onclick="() => NewLeadContactModal.Open()">+ New 
    <i class="icon icon-people-fill icon-white"></i>
</button>

...

<Modal @ref="@NewLeadContactModal">
<Title>Add New Contact for: @Lead.LeadName</Title>
<Body>
    <ContactAdd LeadsId="@Lead.Id"></ContactAdd>
</Body>
<Footer>
    <button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="() => ContactModalClickHandler(0)">Close</button>
</Footer>

...

 private void ContactModalClickHandler(int completed)
 {
    if (completed > 0)
    { }
    NewLeadContactModal.Close();
    OnInitialized();

 }

任何建议将不胜感激。

Answer 1

我猜你在OnInitialized（）方法上调用databse方法

您可以使用StateHasChanged（）尝试同样的方法吗？您可以在这里找到文档

https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.statehaschanged

否则，唯一的解决方案是更改要在UI中绑定的项目的值

Answer 2

在您的代码中：

@if (ls.PrimaryContact)
{
    <div style="cursor: pointer;" class="badge badge-pill badge-success">Primary</div>
}
else
{
    <div style="cursor: pointer;" @onclick="@(() =>MakePrimaryContact(@ls.Id))" class="badge badge-pill badge-info">Make Primary</div>
}

在此处，您编写了-ls.PrimaryContact-（如果-ls-是更改此引用类型时的引用类型）不需要刷新页面，因为这是更改页面代码的原因

如果-ls或ls.PrimaryContact-不是引用类型，则应在页面组件中创建一个参数，如下所示；

[Parameter] 
public YourModel YourParam { get; set; }

然后

调用组件时

<MyComponent YourParam ="@Data"></MyComponent>

所以它将像这样

我的示例包括在下面；

@foreach (var item in AllCourseMaster){
     @if(item.Active){
       <div id="first"></div>
      }
     else
     {
      <div id="second"></div>  
     }
}
<button @onclick="@(e=>CollapseClick(item.Id))"></button>

有效

@code{
   void CollapseClick(int id)
    {
        var changed=AllCourseMaster.FirstOrDefault(x=>x.Id==id);
        changed.Active= !changed.Active;
    }
}

Answer 3

非常感谢您的输入，因为它不会导致我找到答案。当我做进一步研究并从所有答案中了解更多信息时，我发现此问题的关键不仅与更新UI和数据库有关，而且还需要刷新DBSet并在记录集上重新填充数据。我在函数中添加了简单的LsC = LsCGw.GetByLeadsId(Id);行。完整功能如下：

private async Task MakePrimaryContact(int LCId)
    {
        bool isConfirmed = await js.InvokeAsync<bool>("confirm", "Please confirm you want to make Primary?");
        if (isConfirmed)
        {
            LsCGw.UpdatePrimary(Ls.Id, LCId);
            LsC = LsCGw.GetByLeadsId(Id);
            StateHasChanged();
            OnInitialized();
        }
    }

有些人会说我需要删除OnInitialized（），但是当我这样做时，它仅与StateHasChanged（）不兼容。一切照旧，它确实起作用。为了使销售线索重新回到记录集中而添加的那一行实际上是刷新所有数据以正确刷新UI的内容。

再次感谢您。

成功更新数据库后，Blazor服务器页面无法刷新

3 个答案: