提交EditForm后,组件不重新渲染
After submitting EditForm, component does not rerender
美好的一天!
我使用 Blazor 组件呈现和更新非 sql 数据库信息。我希望在提交后重新呈现组件,但是,即使在调用 this.StateHasChanged();
之后,我也必须手动刷新页面。我的代码没有错误或警告消息。
看了官方的Blazor和ASP.net文档,Whosebug上的很多教程和解答,我还是想不通为什么组件不刷新。
我还尝试使用控制变量和 if()
语句手动刷新组件的内容。
谢谢!
@page "/admin/selectcategory"
<h5>SelectCategory</h5>
@{
int count = categoryList.Count;
if (count != 0)
{
<div class="list-group list-group-flush mt-3 mb-5">
@foreach (var rec in categoryList)
{
<a href="Category/@rec.ID" class="list-group-item list-group-item-action pl-0 py-4">
<div class="d-flex justify-content-between">
<h5 class="mb-1 mt-2">@rec.Name</h5>
<small>500 anunturi</small>
</div>
<p class="mt-1">@rec.Description</p>
<small class="text-muted">Lorem, Ipsum, Dolor sit, Amet...</small>
</a>
}
</div>
}
<h3 class="panel-title my-2">Add Category</h3>
<p>Lorem ipsum dolor sit amet</p>
<EditForm Model="@newCategory" OnValidSubmit="AddCategory"
class="my-3">
<InputText @bind-Value="newCategory.Name"
class="form-control py-3 px-3 my-2"
id="new-category-name"
placeholder="Category Name" />
<InputTextArea @bind-Value="newCategory.Description"
class="form-control py-3 px-3 my-2"
id="new-category-description"
placeholder="Description" />
<button type="submit" class="btn btn-light py-2 px-3 my-2">Create Category</button>
</EditForm>
}
@code{
private List<Category> categoryList = new List<Category>();
private Category newCategory = new Category();
private Category cat = new Category();
protected override async Task OnInitializedAsync() => categoryList = await Task.Run(() => cat.Read("CategoryList"));
private async Task AddCategory()
{
await Task.Run(() => newCategory.Create("CategoryList"));
newCategory = new Category();
this.StateHasChanged();
您没有在创建后将项目添加到列表中。或者您应该再次调用 OnInitializedAsync() 中的相同代码。这就是它在刷新时显示的原因。
美好的一天!
我使用 Blazor 组件呈现和更新非 sql 数据库信息。我希望在提交后重新呈现组件,但是,即使在调用 this.StateHasChanged();
之后,我也必须手动刷新页面。我的代码没有错误或警告消息。
看了官方的Blazor和ASP.net文档,Whosebug上的很多教程和解答,我还是想不通为什么组件不刷新。
我还尝试使用控制变量和 if()
语句手动刷新组件的内容。
谢谢!
@page "/admin/selectcategory"
<h5>SelectCategory</h5>
@{
int count = categoryList.Count;
if (count != 0)
{
<div class="list-group list-group-flush mt-3 mb-5">
@foreach (var rec in categoryList)
{
<a href="Category/@rec.ID" class="list-group-item list-group-item-action pl-0 py-4">
<div class="d-flex justify-content-between">
<h5 class="mb-1 mt-2">@rec.Name</h5>
<small>500 anunturi</small>
</div>
<p class="mt-1">@rec.Description</p>
<small class="text-muted">Lorem, Ipsum, Dolor sit, Amet...</small>
</a>
}
</div>
}
<h3 class="panel-title my-2">Add Category</h3>
<p>Lorem ipsum dolor sit amet</p>
<EditForm Model="@newCategory" OnValidSubmit="AddCategory"
class="my-3">
<InputText @bind-Value="newCategory.Name"
class="form-control py-3 px-3 my-2"
id="new-category-name"
placeholder="Category Name" />
<InputTextArea @bind-Value="newCategory.Description"
class="form-control py-3 px-3 my-2"
id="new-category-description"
placeholder="Description" />
<button type="submit" class="btn btn-light py-2 px-3 my-2">Create Category</button>
</EditForm>
}
@code{
private List<Category> categoryList = new List<Category>();
private Category newCategory = new Category();
private Category cat = new Category();
protected override async Task OnInitializedAsync() => categoryList = await Task.Run(() => cat.Read("CategoryList"));
private async Task AddCategory()
{
await Task.Run(() => newCategory.Create("CategoryList"));
newCategory = new Category();
this.StateHasChanged();
您没有在创建后将项目添加到列表中。或者您应该再次调用 OnInitializedAsync() 中的相同代码。这就是它在刷新时显示的原因。