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!
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; }
}
}