ASP.NET Core Blazor – значение привязки не обновляет поле

Я новичок в Blazor и пытаюсь создать с его помощью очень простую форму. Метод OnInitialized работает нормально, то есть после отображения на странице значения «Hello World!» отображается в текстовом поле.

Однако, если я изменю значение и отправлю форму, значение обновит поле userInput. Кто-нибудь знает причину этого и как это исправить?

Ваше здоровье!

@page "/simpleform"

<PageTitle>TestPage</PageTitle>
<h3>Einfaches Formular</h3>

<EditForm Model = "userInput" OnValidSubmit = "HandleSubmit" FormName = "test">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class = "form-group">
        <label for = "inputText">Text eingeben</label>
        <InputText id = "inputText" class = "form-control" @bind-Value = "userInput.InputText" />
    </div>

    <button type = "submit" class = "btn btn-primary">Absenden</button>
</EditForm>


@if (submittedText != null)
{
    <p>Du hast eingegeben: @submittedText</p>
}

@code {
    private UserInputModel userInput = new UserInputModel();
    private string? submittedText;

    protected override void OnInitialized()
    {
        userInput.InputText = "Hello World!";
    }

    private void HandleSubmit()
    {
        submittedText = userInput.InputText;
    }

    public class UserInputModel
    {
        public string? InputText { get; set; }
    }
}
using Test.Components;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

Хммм, из этой демо я вижу, что оба userInput и submittedText обновлены.

Yong Shun 03.09.2024 02:10

@nicesbrot ваш проект — веб-сборка Blazor или сервер Blazor?

Jerdine Sabio 03.09.2024 04:51

Каков тип режима рендеринга вашего приложения Blazor? Это SSR или InteractiveServer?

Yuning Duan 03.09.2024 05:43

Спасибо за ответы, ребята. Я добавил код из своего Program.cs. Я использую серверное приложение Blazor с режимом рендеринга InteractiveServer.

nicesbrot 03.09.2024 08:44

@YongShun Я согласен, в BlazorFiddle все работает нормально.

nicesbrot 03.09.2024 08:48
github.com/nicesbrot/BlazorServerTest Я опубликовал все это на своем GitHub.
nicesbrot 03.09.2024 08:51
Стоит ли изучать 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
6
56
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Убедитесь, что вы применяете режим рендеринга ко всему приложению.

Это должно предотвратить повторный рендеринг компонента и привести к тому, что значение userInput.InputText будет сброшено на «Hello World!».

Приложение.razor

<HeadOutlet @rendermode = "InteractiveServer" />

<Routes @rendermode = "InteractiveServer" />

Это исправило ситуацию. Спасибо! :) Почему это не установлено по умолчанию?

nicesbrot 03.09.2024 12:42

Пожалуйста. Что касается вашего вопроса, возможно, я не прав, исходя из того, что я знаю, что режим рендеринга включается (необязательно) через конвейер в Program.cs (AddInteractiveServerRenderMode()). А режим рендеринга можно было применить только к определенным компонентам @rendermode. Таким образом, Blazor может быть сложно установить его по умолчанию. Возможно, эту функцию можно предложить на GitHub и посмотреть, каковы отзывы и опасения разработчиков.

Yong Shun 04.09.2024 04:25

«Почему это не установлено по умолчанию?» Он устанавливается на основе того, какой шаблон и параметры шаблона вы выбираете при создании решения. Вы выбрали «На страницу/компонент», вот что вы получили. Это довольно распространенная ошибка, которую совершают при первом использовании Blazor.

MrC aka Shaun Curtis 04.09.2024 09:39

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