Blazor 元素在首次加载时不会更新

Question

I have a section of a page in Server-side blazor that will not update on the first load. After the page is reloaded it updates with no issues and acts as intended. Any guidance will be much appreciated.

The first time someone presses the Open or Close button, it runs the code successfully but does not update the UI so that if it is pressed again, it throws an error. But, as I said previously, if the same page is simply refreshed, then I can click Open/Close to my heart's content and it updates the UI and allows for the proper flip of the switch.

<div class="row row-padding mt-5 d-flex justify-content-between">
    <h5 class="secondary-font">Month End</h5>
    </div>
    <hr />
    <div class="row row-padding">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Month</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach(var date in OpenMonths)
                {
                    <tr>
                        <td class="align-middle">@date.ToString("MMMM, yyyy")</td>
                        @if (PropertyMonthCloseds.Exists(p => p.Month == date && !p.IsOpen)) 
                        {
                            <td class="align-middle">Closed</td>
                            <td class="align-middle">
                                <button type="button" class="btn btn-link accent-font" @onclick="@(async () => await OpenCloseMonth(date))">Open</button>
                            </td>
                        }
                        else
                        {
                            <td class="align-middle">Open</td>
                            <td class="align-middle">
                                <button type="button" class="btn btn-link accent-font" @onclick="@(async () => await OpenCloseMonth(date))">Close</button>
                            </td>
                        }
                    </tr>
                }
            </tbody>
        </table>
    </div>

private async Task OpenCloseMonth(DateTime date)
    {
        try
        {
            if (PropertyMonthCloseds.Exists(p => p.Month == date))
            {
                var prop = PropertyMonthCloseds.FirstOrDefault(p => p.Month == date);
                prop.IsOpen = !prop.IsOpen;
                await Repo.UpdatePropertyMonthClosed(prop);
                Toast.ShowSuccess("Month End change saved.");
            }
            else
            {
                var now = DateTime.UtcNow;
                var newProp = new PropertyMonthClosed
                {
                    Month = date,
                    CreatedBy = User.UserId,
                    ModifiedBy = User.UserId,
                    CreatedOn = now,
                    ModifiedOn = now,
                    PropertyId = PropId
                };

                await Repo.CreatePropertyMonthClosed(newProp);
                Toast.ShowSuccess("Month Closed.");
            }
            await ProcessOpenMonths();
        }
        catch(Exception ex)
        {
            ShowInnerException(ex);
        }
    }

    private async Task ProcessOpenMonths()
    {
        var subs = await Repo.GetSubmissions(PropId);
        OpenMonths = subs.GroupBy(x => new { Month = x.SubmissionDate.Month, Year = x.SubmissionDate.Year })
            .OrderByDescending(o => o.Key.Year).ThenByDescending(t => t.Key.Month)
            .Select(s => new DateTime(s.Key.Year, s.Key.Month, 1))
            .ToList();
    }

Answer 1

Please add the method StateHasChanged() to the end of your OpenCloseMonth() function. That should refresh the UI immediately.