Blazor c# following value (testInput) is not appearing in binding nor is the form breakpoint getting hit in SubmitAnswers method in VS 2022

Question

I am using Visual studio 2022. Following is the code. The value (testInput) is not appearing in binding nor is the form breakpoint getting hit in SubmitAnswers method in VS 2022

@page "/Test"

<h3>test</h3>
<form @onsubmit="SubmitAnswers">
    <input type="text" @bind="testInput" />
    <button type="submit">Submit</button>
    <br />
    value=@testInput
</form>

@code {
    private string testInput;

    private async Task SubmitAnswers()
    {
        Console.WriteLine("SubmitAnswers method hit!");

    }
}

When i use

@rendermode InteractiveServer

It binds to the value of text box however the method call (to method SubmitAnswers) is not happening When i try the following it throws the following error

@rendermode InteractiveAuto OR @rendermode InteractiveWebAssembly

error:-

InvalidOperationException: A component of type 'BlazorApp1.Components.Pages.Test' has render mode 'InteractiveAutoRenderMode', but the required endpoints are not mapped on the server. When calling 'MapRazorComponents', add a call to 'AddInteractiveWebAssemblyRenderMode'. For example, 'builder.MapRazorComponents<...>.AddInteractiveWebAssemblyRenderMode()'

How do I fix this ?

Answer 1

You almost certainly chose Per Page/Component as the interactivity location when you created the solution, and are currently rendering the page statically - there's no render mode set for the page.

Review this Microsoft article that explains render modes and will guide you as to the appropriate mode for your application.

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0.

There are also several basic problems with your code where you are trying to mix standard Html controls with Blazor functionality.

Here's a refactored version that switches to using the standard Blazor form controls, such as EditForm and InputText.

@page "/"
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<h3>Test</h3>
<EditForm Model="_model"  OnSubmit="SubmitAnswers">
    <InputText class="form-control mb-2" @bind-Value="_model.Value" />
    <div class="text-end mb-2">
        <button class="btn-primary" type="submit">Submit</button>
    </div>
</EditForm>

<div class="text-white bg-dark m-2 p-2">
    <pre>value: @_model.Value</pre>
</div>

@code {
    private Model _model = new();

    private Task SubmitAnswers()
    {
        Console.WriteLine("SubmitAnswers method hit!");
        return Task.CompletedTask;
    }

    public class Model
    {
        public string? Value { get; set; }
    }
}