Может ли взаимодействие компонентов Blazor происходить внутри формы страницы Razor, не вызывая HTTP POST?

У меня есть требование создать форму, которая принимает следующую (сильно упрощенную) модель данных:

public class MyPost {
    public string MyTitle { get; set; }
    public List<DateTime> Dates { get; set; } = new();
}

Проблема заключается в том, что может быть много дат, и пользователю необходимо генерировать их на основе определенных критериев (например, «разовая дата» или генерировать даты, которые проходят «каждую среду до 30 декабря», или любую комбинацию). Поэтому мне нужна функциональность в форме, чтобы пользователь мог генерировать/просматривать даты до того, как форма будет окончательно отправлена.

Я новичок в .Net Core, поэтому, пожалуйста, извините мое невежество, так как я страдаю от перегрузки учебника.

Краткое описание проблемы

Надеясь использовать Blazor вместо JavaScript из-за аккуратной функциональности даты в C#, я создал компонент Blazor для этого, но любое взаимодействие (например, @onclick) запускает HTTP-публикацию на родительской странице Razor, которая ломает все.

Таким образом, возможно ли взаимодействовать с компонентом Blazor внутри формы страницы Razor, не вызывая POST формы?

Пример/исследование

Взяв пример компонента счетчика от Microsoft и упростив его:

<p>Count: @currentCount</p>
<button @onclick = "IncrementCount">Click me</button>
@code {
    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
    }
}

Если затем поместить это на страницу Razor (cshtml) как внутри, так и вне тега <form>, я вижу совершенно разные результаты, когда происходит взаимодействие.

<h3>Outside form tag</h3>
<Counter  />
<form method = "post">
    <h3>Inside form tag</h3>
    <Counter />
</form>
  • Компонент вне тега формы увеличивается, и я также не вижу сетевого трафика в анализаторе (хотя я подозреваю, что причиной может быть SignalR?).
  • Однако компонент внутри формы запускает публикацию страницы, когда происходит событие @onclick.

Можно ли использовать компонент для создания динамической формы страниц Razor или всю форму нужно перемещать внутри компонента (последний в настоящее время требует много работы, поэтому и возникает причина этого вопроса, прежде чем я сделаю что-нибудь ненужное)?

Кажется, вы написали приложение WASM blazor. В этом случае вы можете выполнить POST с помощью HttpClient

Max 12.04.2023 15:43
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
1
78
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема здесь в том, что кнопки внутри форм обрабатываются как type = "submit". Вы должны добавить type = "button" к своей фактической кнопке, тогда она должна работать без запроса POST.

<p>Count: @currentCount</p>
<button type = "button" @onclick = "IncrementCount">Click me</button>
@code {
    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
    }
}

Большое спасибо. После многих лет в игре я никогда не использовал тег button, только input type. Я даже не знал, что button type=button это вещь. Для всех, кто читает это, есть хорошо объясненный ответ с обсуждением различий на stackoverflow.com/a/10079197/792888 или полное объяснение на html.com/attributes/button-type

EvilDr 12.04.2023 20:27

Другие вопросы по теме