Страница Razor / Blazor - форма и проверка без навигации

Question

У меня есть страница бритвы с формой, эта прикреплена к модели. Во время «отправки» я пытаюсь проверить некоторые данные на стороне сервера, если это не удается, тогда я отображаю «тост».

Проблема в том, что форма «обновляет» страницу, кажется ориентироваться в себе! Из-за этого я не могу отобразить свою ошибку в тосте из-за такого «refre sh».

index.cs html

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

Есть идеи, чтобы решить эту проблему?

Answer 1

Вы должны удалить тег Blazor. Ваша проблема связана с Razor Pages, а не с Blazor.

Вы видите код в другом ответе? Вы должны сделать что-то похожее на то, что EditForm делает в Blazor. Вообще говоря, вы должны использовать JavaScript Fetch API для связи с сервером, не отправляя вашу форму традиционным способом, результатом которого является полное обновление sh страницы. Я рекомендовал использовать Fetch API также потому, что Blazor использует его для взаимодействия с конечными точками API на сервере. Но вы можете использовать jQuery вместо этого ... однако я не рекомендую его. Я очень надеюсь, что к настоящему времени вы поняли, что вам следует использовать AJAX, верно?

Кстати, вы можете создавать компоненты Blazor, которые реализуют такую ​​функциональность, и включать их в свои страницы Razor.

Я думаю, что Крис Сэйнти построила библиотеку тостов в Блазоре. Это может помочь вам. Я также думаю, что видел образец уведомления pu sh от Daniel Wroth, продемонстрированный при создании PWA в Blazor.

Надеюсь, это поможет ...

Answer 2

Если вы переместили валидацию на клиентскую сторону, вы можете использовать EditForm и использовать DataAnnotationsValidator, например;

<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>

Где HandleValidSubmit будет вашим фактическим представлением (создание / обновление и т. Д. c) ), @CurrentObject будет экземпляром класса вашей модели, который, в свою очередь, будет обогащен атрибутами из пространства имен System.ComponentModel.DataAnnotations, например:

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; } = "";

    }
}

Если вы хотите сохранить проверку на стороне сервера, вы можете по-прежнему использовать EditForms и использовать метод «HandleSubmit» вместо этого, как подробно описано здесь; https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1