Blazor组件在向数据库添加条目后未刷新

Question

我正在Blazor服务器端开发一个简单的应用程序来管理酒店预订，使用EF Core作为数据库。我有一个酒店房间的添加表格，在同一页面上，我显示了所有房间的列表，我目前面临的问题是，当我添加新房间时，组件不会自行刷新，我必须单击F5，以便再次填充我的列表。我在youtube上发现了这段视频，他也在做类似的事情，这对他很有效。我还尝试将StateHasChanged放入我的页面代码中，但没有发生任何事情。

这里的页面代码：

@page "/rooms"
@using HotelServiceSystem.Interfaces.Services
@using HotelServiceSystem.Entities
@inject IRoomService roomService
<h3>Rooms</h3>
<div class="col-12">
<hr/>
<EditForm Model="@ModelRoom" OnSubmit="@SaveRoom">
<div class="col-12 row">
<label class="col-2">Room number</label>
<InputText class="form-control col-3" @bind-Value="ModelRoom.RoomIdentifier"/>
</div>
<br />
<div class="col-12 row">
<label class="col-2">Floor</label>
<InputNumber class="form-control col-3" @bind-Value="ModelRoom.Floor"/>
</div>
<br />
<div class="col-12 row">
<label class="col-2">Number of beds</label>
<InputNumber class="form-control col-3" @bind-Value="ModelRoom.NumberOfBeds"/>
</div>
<br />
<div class="col-12 row">
<span class="col-2"></span>
<input type="submit" class="form-control col-1 btn btn-primary" value="Submit"/>
<span>&nbsp;</span>
<input type="submit" class="form-control col-1 btn btn-primary" value="Clear"/>
</div>
</EditForm>

<div class="col-10">
<h3>Rooms</h3>
<table class="table">
<thead>
<tr>
<th>Room number</th>
<th>Capacity</th>
<th>Number of beds</th>
<th>Floor</th>
<th>Price</th>
<th>Is free?</th>
<th>Is out of service?</th>
<th>Need cleaning?</th>
</tr>
</thead>
<tbody>
@if (RoomList != null)
{
foreach (var room in RoomList)
{
<tr>
<td>@room.RoomIdentifier</td>
<td>@room.GuestsCapacity</td>
<td>@room.NumberOfBeds</td>
<td>@room.Floor</td>
<td>@room.Price</td>
<td>@room.IsFree</td>
<td>@room.IsOutOfService</td>
<td>@room.ShouldBeCleaned</td>
</tr>
}
}
else
{
<h3>..Loading</h3>
}
</tbody>
</table>
</div>
</div>
@code {
private List<Room> RoomList { get; set; }
private Room ModelRoom { get; set; }
protected override async Task OnInitializedAsync()
{
ModelRoom = new Room();
RoomList = roomService.GetAllRoomsAsync();
await base.OnInitializedAsync();
}
private async void SaveRoom()
{
ModelRoom.RoomReservations = new List<RoomReservation>();
ModelRoom.IsFree = true;
ModelRoom.IsOutOfService = false;
ModelRoom.ShouldBeCleaned = false;
await roomService.AddRoomAsync(ModelRoom);
ModelRoom = new Room();
}
}

谢谢你的帮助，我已经在寻找解决方案大约几个小时

Answer 1

您应该使用OnValidSubmit = "@SaveRoom"而不是OnSubmit="@SaveRoom"

并且SaveRoom方法的返回类型应该是Task，而不是void，如下所示。

private async Task SaveRoom()
{

}

为什么要使用2"；提交"；按钮？删除第二个。。。