How do I refresh/reload a Blazor Server EditForm back to new state like Ajax Update Panel used to?

Question

I have a comments form:

When the user clicks the button, I need it to reload the form without reloading the page; exactly as the <asp:updatepanel> would, looking like the screenshot once the user clicks the button. I have been searching for days and have found nothing about how to accomplish this simple task. I know Blazor Server takes over a lot of work that UpdatePanel did, but I can't find how to do this.

My EditForm:

<EditForm Model="@commentForm" Context="CommentsContext" OnValidSubmit="Comments">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div class="row">
        <div class="col-xxl-12 d-flex justify-content-lg-center align-items-lg-center justify-content-xl-center align-items-xl-center justify-content-xxl-center align-items-xxl-center">
            <DxMemo 
                CssClass="cw-480"
                ResizeMode="MemoResizeMode.Disabled"
                Rows="5" 
                Columns="200"
                ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" 
                NullText="Enter your comment..."
                @bind-Text="commentForm.CommentText" >
            </DxMemo>
        </div>
    </div>
    <div class="row" style="margin-top: 10px;">
        <div class="col d-flex justify-content-end align-items-center justify-content-sm-end align-items-sm-center justify-content-md-end align-items-md-center justify-content-lg-end justify-content-xl-end justify-content-xxl-end align-items-xxl-center">
            <DxButton SubmitFormOnClick=true Text="Save Comment" style="font-size:20px; border-radius:6px;" />
        </div>
    </div>
</EditForm>

Here is the simple function I have for OnValidSubmit:

CommentFormModel commentForm { get; set; } = new CommentFormModel();
public EditContext CommentsContext { get; set; }

public async Task Comments() {
    commentText = commentForm.CommentText;
    CommentsContext = new EditContext(commentForm);
    StateHasChanged();
}

I am using DevExpress. However EditForm is a Blazor component. I'll do whatever is needed. I just need this functionality.

Thanks for any help!

Answer 1

Here's a very simple demo page. It uses the base Blazor controls, DevEx costs money. It shows how to set up and reset the edit model and the EditContext.

I've saved the model to a list: you will obviously do something more permanent.

@page "/"
@using System.ComponentModel.DataAnnotations;

<PageTitle>Index</PageTitle>

<h1>Comment on this Site</h1>


<EditForm EditContext="_editContext" OnValidSubmit="this.Save">
    <DataAnnotationsValidator />
    <InputTextArea class="form-control mb-3" @bind-Value=_editComment.Comment placeholder="Enter a comment, don't hold back!" />
    <ValidationSummary />
    <div class="text-end">
        <button class="btn btn-primary" >Save</button>
    </div>
</EditForm>

<div>
    @foreach(var comment in _comments)
    {
        <pre>@comment.Comment</pre>
    }

</div>

@code {
    private List<CommentData> _comments = new();
    private EditContext? _editContext;
    private CommentData _editComment = new();

    protected override Task OnInitializedAsync()
    {
        _editContext = new EditContext(_editComment);
        return Task.CompletedTask;
    }

    private async Task Save()
    {
        //Fake a async database save
        await Task.Delay(100);
        _comments.Add(_editComment);

        // Reset the edit context
        _editComment = new();
        _editContext = new EditContext(_editComment);
    }


    public class CommentData
    {
        public Guid Uid { get; init; } = Guid.NewGuid();

        [Required]
        public string? Comment { get; set; }
    }
}