Razor / Blazor page - form & validation without navigation - asp.net

Question

I have a razor page with a form, this one is attached to a model.
At 'submit' time, I try to validate some data on the server-side, if it fails then I display a 'toast'.
The problem is that the form is 'refreshing' the page, it seems to navigate to himself!
Because of this, I cannot display my error in the toast because of this 'kind of refresh'.
index.cshtml
#model TestModel
<form method="post">
<button type="submit">GO</button>
</form>
TestModel.cs
public virtual async Task<IActionResult> OnPostAsync()
{
_toaster.ShowError("Hellow world", "I got an issue");
return Page();
}
Any idea to solve this ?

Answer 1

You should remove the Blazor tag. Your issue is with Razor Pages, not Blazor.
Do you see the code in the other answer. You should do something similar to what the EditForm does in Blazor. Generally speaking, you should use the JavaScript Fetch API to communicate with the server, without submitting your form the traditional way, the result of which is full refresh of the page. I've recommended
to use the Fetch API also because Blazor employs it to communicate with API end points on the server. But you may use jQuery instead... however, I do not recommend it. I do hope that by now you've realized that you should use AJAX, right ?
Incidentally, you may create Blazor components that implement such functionality,
and include them in your Razor Pages.
I think chris sainty has built a toast library in Blazor. It may help you.
I also think I saw a push notification sample by Daniel Wroth, demonstrated when creating a PWA in Blazor.
Hope this helps...

Answer 2

If you moved validation client-side, you could use an EditForm and use the DataAnnotationsValidator, for example;
<EditForm Model="#CurrentObject" OnValidSubmit="#HandleValidSubmit">
<DataAnnotationsValidator />
<div class="form-group">
<label for="Name">Name</label>
<InputText id="Name" class="form-control" #bind-Value="#CurrentObject.Name" />
<ValidationMessage For="#(() => CurrentObject.Name)" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</EditForm>
Where HandleValidSubmit would be your actual submission (create/update etc), #CurrentObject would be an instance of your model class, which in turn would be enriched with attributes from the System.ComponentModel.DataAnnotations namespace, eg;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
namespace [YourNamespace].Data.Model
{
public class ExampleModel
{
// holds the front-end name for the record
[Required(ErrorMessage = "Name is required")]
public string Name { get; set; } = "";
}
}
If you wanted to keep validation serverside, you can still use EditForms, and use the "HandleSubmit" method instead as detailed here; https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1