Blazor component not refreshing after adding entry to database

Question

I'm working on simple app to manage hotel reservations in Blazor server side, using EF Core for database. I have a Adding form for Rooms in hotel, and at the same page I'm showing list of all rooms, and Im currently facing an issue with that when i'm adding a new room the component is not refreshing itself I have to click F5 to so my list gets populated again. I've found this video on youtube he is doing something similar and it works for him. I've also tried to put StateHasChanged in my page code, and nothing happend.

Heres page code:

@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();
    }
}

Thanks for help I've been looking for solution for about few hours

Answer 1

You should use OnValidSubmit = "@SaveRoom" instead of OnSubmit="@SaveRoom"

and the return type of the SaveRoom method should be Task, not void, like the following.

private async Task SaveRoom()
 {
       
 }

Why do you use 2 "submit" buttons ? Remove the second...