时间戳

首页 > 解决方案 > 向数据库添加条目后 Blazor 组件不刷新

c# - 向数据库添加条目后 Blazor 组件不刷新

问题描述

我正在开发简单的应用程序来管理 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();
    }
}

感谢您的帮助我一直在寻找解决方案大约几个小时

标签： c#entity-frameworkasp.net-coreblazorblazor-server-side

解决方案

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

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

private async Task SaveRoom()
 {
       
 }

为什么要使用 2 个“提交”按钮？删除第二个...

推荐阅读