在 Blazor 中自动刷新组件
Posted
技术标签:
【中文标题】在 Blazor 中自动刷新组件【英文标题】：Automatically refresh a component in Blazor 【发布时间】：2019-11-02 20:03:28 【问题描述】：我正在 Blazor 页面上添加新对象。对象“RepairOrder”具有对象“RepairSection”的列表。
页面上有一个区域将循环遍历列表“RepairOrder”.“RepairSections”并显示元素：
<div class="col-lg-10">
@if (sections.Count > 0)
foreach (var sec in sections)
<h3>Section @sec.SectionNumber</h3>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-5">
<label for="Failure" class="control-label">Failure: </label>
<input for="Failure" class="form-control" bind="@sec.Failure" readonly />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-1">
<label><input type="checkbox" checked="@IsCApprovedChecked(sec)" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" value="@IsWarrantyChecked(sec)" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="AdminComments" class="control-label">Admin Comments: </label>
<input for="AdminComments" class="form-control" bind="@sec.AdminComments" readonly />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="TechComments" class="control-label">Tech Comments: </label>
<input for="TechComments" class="form-control" bind="@sec.TechComments" readonly />
</div>
</div>
</div>
列表中的所有当前部分都添加到页面后，有一个按钮可以添加新部分。单击按钮时，该函数将 bool 值更改为 true 以将模式作为对话框打开。 modal 包含用于输入新部分元素的字段。
调用打开模态的函数：
protected void AddSectionCalled()
_newSection = new RepairSection();
this.isAddNew = true;
模式代码：
<div class="modal" tabindex="-1" style="display:block" role="dialog">
<div class="modal-dialog modal-dialog-scrollable modal-xl">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">New Repair Section</h3>
<button type="button" class="close" onclick="@CloseModal"><span aria-hidden="true">X</span></button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label for="sectionLetter" class="control-label">Section: </label>
<input for="sectionLetter" class="form-control" bind="@_newSection.SectionNumber" />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label><input type="checkbox" bind="@_newSection.Warranty" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" bind="@_newSection.CustomerApproved" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_failure" class="control-label">Failure: </label>
<input for="_failure" class="form-control" bind="@_newSection.Failure"/>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_adminComments" class="control-label">Admin Comments: </label>
<input for="_adminComments" class="form-control" bind="@_newSection.AdminComments" />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_techComments" class="control-label">Tech Comments: </label>
<input for="_techComments" class="form-control" bind="@_newSection.TechComments"/>
</div>
</div>
<br/>
<button class="btn btn-primary float-left" onclick="AddNewSection">Add New Section</button>
</form>
</div>
</div>
</div>
</div>
当点击“Add NewSection”按钮时，根据modal中收集的信息创建的“_newSection”对象被添加到页面加载时最初循环的“sections”列表中。
private void AddNewSection()
sections.Add(_newSection);
this.StateHasChanged();
this.isAddNew = false;
如您所见，在将新部分添加到部分列表后，我添加了“StateHasChanged()”。但是页面不会呈现以显示新部分。
我最初在页面“OnInitAsync()”事件上创建了虚拟数据，该事件在显示之前用数据加载了节列表。这样我可以确保页面正确显示列表中的内容。
如何在用户向列表中添加新对象后，使页面重新呈现列表中的信息？
----编辑-----
下面是整个页面的代码。我会在周末尽量减少这个，但是这里真的不多。
@page "/AddRepairOrder"
@using ShopLiveWebVersion2._0.Models
@using ShopLiveWebVersion2._0.DataAccess
@using ShopLiveWebVersion2._0.Services
@using ShopLiveWebVersion2._0.Data
@inject IUriHelper UriHelper
@inject RepairOrderContext context
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10"><h1>Create New Repair Order</h1></div>
</div>
<br /><br />
<form id="AddROForm">
<div class="form-group">
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label for="ControlNumber" class="control-label">Repair Order #: </label>
<input for="ControlNumber" class="form-control" bind="@ro.ControlNumber" maxlength="15" required />
</div>
<div class="col-lg-1">
<label for="TagNumber" class="control-label">Tag #: </label>
<input for="TagNumber" class="form-control" bind="@ro.TagNumber" maxlength="8" />
</div>
<div class="col-lg-3">
<label for="VIN" class="control-label">VIN: </label>
<input for="VIN" class="form-control" bind="@ro.VIN" maxlength="18" />
@*<small id="Chasis" class="form-text text-muted">@ro.GetChassisNumber()</small> figure out how to get chassis from vin after box looses focus*@
</div>
<div class="col-lg-2">
<label for="Make" class="control-label">Make: </label>
<input for="Make" class="form-control" bind="@ro.Make" maxlength="30" />
</div>
<div class="col-lg-2">
<label for="Madel" class="control-label">Model: </label>
<input for="Madel" class="form-control" bind="@ro.Madel" maxlength="30" />
</div>
</div>
<div class="row AddRow">
<div class="col-lg-1"></div>
<div class="col-lg-4">
<label for="Customer" class="control-label">Customer: </label>
<input for="Custoemr" class="form-control" bind="@ro.Customer" maxlength="50" />
</div>
<div class="col-lg-2">
<label asp-for="Location" class="control-label">Vehicle Location: </label>
<select asp-for="Location" class="form-control" bind="@ro.Location">
<option value="">-- Select a Location --</option>
@foreach (var loc in Location)
<option value="@loc">@loc</option>
</select>
</div>
<div class="col-lg-2">
<label asp-for="Assigned" class="control-label">Assigned: </label>
<select asp-for="Assigned" class="form-control" bind="@ro.Assigned">
<option value="">-- Select an Employee --</option>
@foreach (var emp in Employee)
<option value="@emp">@emp</option>
</select>
</div>
<div class="col-lg-2">
<label asp-for="Status" class="control-label">Status: </label>
<select asp-for="Status" class="form-control" bind="@ro.Status">
<option value="">-- Select a Status --</option>
@foreach (var st in Status)
<option value="@st">@st</option>
</select>
</div>
</div>
<br />
<div class="row"><div class="col-lg-1"></div><div class="col-lg-10"><hr id="Double" /></div></div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
@if (sections.Count > 0)
foreach (var sec in sections)
<h3>Section @sec.SectionNumber</h3>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-5">
<label for="Failure" class="control-label">Failure: </label>
<input for="Failure" class="form-control" bind="@sec.Failure" readonly />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-1">
<label><input type="checkbox" checked="@IsCApprovedChecked(sec)" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" value="@IsWarrantyChecked(sec)" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="AdminComments" class="control-label">Admin Comments: </label>
<input for="AdminComments" class="form-control" bind="@sec.AdminComments" readonly />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="TechComments" class="control-label">Tech Comments: </label>
<input for="TechComments" class="form-control" bind="@sec.TechComments" readonly />
</div>
</div>
</div>
</div>
<div class="row"></div>
</div> @*Form-group*@
</form>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-9">
<br /><br />
<button class="btn btn-primary float-right" onclick="@AddSectionCalled">Add New Section</button>
</div>
</div>
@if (isAddNew == true)
<div class="modal" tabindex="-1" style="display:block" role="dialog">
<div class="modal-dialog modal-dialog-scrollable modal-xl">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">New Repair Section</h3>
<button type="button" class="close" onclick="@CloseModal"><span aria-hidden="true">X</span></button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label for="sectionLetter" class="control-label">Section: </label>
<input for="sectionLetter" class="form-control" bind="@_newSection.SectionNumber" />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label><input type="checkbox" bind="@_newSection.Warranty" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" bind="@_newSection.CustomerApproved" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_failure" class="control-label">Failure: </label>
<input for="_failure" class="form-control" bind="@_newSection.Failure" />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_adminComments" class="control-label">Admin Comments: </label>
<input for="_adminComments" class="form-control" bind="@_newSection.AdminComments" />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_techComments" class="control-label">Tech Comments: </label>
<input for="_techComments" class="form-control" bind="@_newSection.TechComments" />
</div>
</div>
<br />
<button class="btn btn-primary float-left" onclick="AddNewSection()">Add New Section</button>
</form>
</div>
</div>
</div>
</div>
@functions
private RepairOrder ro;
private RepairOrder incomingRO;
private RepairOrderDataAccess RoData;
private string chassis;
private List<string> Location;
private List<string> Employee;
private List<string> Status;
private FileService fileService;
private List<RepairSection> sections;
private bool isAddNew;
//for new repair section modal
private RepairSection _newSection;
protected override async Task OnInitAsync()
ro = new RepairOrder();
Location = new List<string>();
Employee = new List<string>();
Status = new List<string>();
sections = new List<RepairSection>();
isAddNew = false;
fileService = new FileService();
RoData = new RepairOrderDataAccess(context);
await LoadData();
private async Task LoadData()
Location = await Task.Run(() => fileService.ReadLocation());
Employee = await Task.Run(() => fileService.ReadEmployees());
Status = await Task.Run(() => fileService.ReadStatus());
public string IsCApprovedChecked(RepairSection sc)
if (sc.CustomerApproved == true)
return "checked";
else
return "";
public string IsWarrantyChecked(RepairSection sc)
if (sc.Warranty == true)
return "checked";
else
return "";
protected void AddSectionCalled()
_newSection = new RepairSection();
this.isAddNew = true;
private void AddNewSection()
sections.Add(_newSection);
this.StateHasChanged();
this.isAddNew = false;
private void CloseModal()
this.isAddNew = false;
【问题讨论】：
我认为你应该更好地展示数据流（_newSection）。另外，您在模态组合中使用了什么库或示例？ 你能把问题改写成minimal reproducible example吗？我的意思是，没有模态，只有最少的 html 和最少的RepairSection 字段。
哪个组件包含 AddNewSection 方法？
@MisterMagoo AddNewSection() 方法在页面的函数部分。
将添加新部分按钮上的 onclick 更改为 onclick="@AddNewSection"
【参考方案1】：
您在模态表单上绑定按钮的onclick 事件的方式存在问题。
你有onclick="AddNewSection()"
- 以这种方式编写可能会被解释为纯 javascript 调用，如果您在浏览器工具中检查 DOM，您可能会在按钮上看到 onclick="AddNewSection()"。
你应该有onclick="@AddNewSection"
- 这样，Blazor 会将 onclick 事件连接到您的 C# 方法。
【讨论】：
你不应该在 Blazor 中使用form 元素，至少使用 null 方法来防止提交行为 - 如果你真的需要 form 元素（我认为你不需要）然后添加像 onsubmit="@(()=>)" 或 onsubmit="@DoNothing" 这样的 null 方法，其中 DoNothing() 什么都不做 - 这将阻止默认的表单提交行为。
起初我在 onclick="@AddNewSection" 中留下了“()”——一旦我删除它，效果会更好。现在，当我点击模态框时，所有文本（即使是 RepairOrder 字段中的文本也消失了。我在 AddNewSection 方法中注释掉了 StateHasChanged()。现在，当我单击“AddNewSection”时，页面显示新部分片刻然后刷新 - 清除页面上的所有数据。--保存后阅读以上内容！我认为这是我的问题！
请使用 .NETCore SDK、Visual Studio 和 VS 的 Blazor 扩展的特定版本号更新您的问题 - 还包括您在 csproj 中的 PackageReferences
删除 form 元素 - 请参阅我上面的评论 - 它们可能会导致整页刷新
从页面中删除表单标签成功了！！！非常感谢。我接受这个作为正确答案！以上是关于在 Blazor 中自动刷新组件的主要内容，如果未能解决你的问题，请参考以下文章
使用 StateHasChanged 从父组件刷新 Blazor 服务器子组件
如何从服务器端 Blazor 应用程序中的 Blazor 组件调用 razor 页面而不导致页面刷新
Laravel Livewire 组件在刷新后不会自动刷新/重新加载
为啥我的 Blazor 服务器应用程序的计时器没有刷新其组件