Why is my bind-Value not working it always returns null

Question

i have a problem with my @bind-Value is always coming up NULL

@page "/database"
<PageTitle>Database</PageTitle>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h1 class="card-title text-center">DataBase Insert</h1>

                <br />
                <br />

                <EditForm Model="@employee" method="post" OnValidSubmit="AddNewEmployee" FormName="registerMaster">

                    <div class="form-floating mb-3">
                        <InputText @bind-Value="employee.Name" class="form-control" placeholder="Name" />
                        <label for="Name">Name</label>
                    </div>                    
                    <div class="form-floating mb-3">
                        <InputNumber @bind-Value="employee.Age" class="form-control" placeholder="Age" />
                        <label for="Age">Age</label>
                    </div>
                    <div class="form-floating mb-3">
                        <InputText value="employee.Title" class="form-control" placeholder="Title" />
                        <label for="Title">Title</label>
                    </div>                    
                    <div class="form-floating mb-3">
                        <InputText @bind-Value="employee.Gender" class="form-control" placeholder="Gender" />
                        <label for="Gender">Gender</label>
                    </div>

                    <button type="submit" class="btn btn-primary btn-rounded">Submit</button>

                </EditForm>

            </div>
        </div>
    </div>
</div>

@inject Data.AppDbContext DbContext
@code{
    public Employee employee = new Employee();

    public async Task AddNewEmployee()
    {
        DbContext.Employees.Add(employee);
        await DbContext.SaveChangesAsync();
    }
}

I tried @bind-value="" that just straight give me a error to use @bind-Value can someone explain what am i missing

Answer 1

Did you solve the problem? If not, check the following solution:

I tried @bind-value="" that just straight give me a error to use @bind-Value can someone explain what am i missing

By default, in Blazor component, we should use @bind-Value syntax to bind value (the V is uppercase) and achieve the two-way binding, otherwise, it will show an InvalidOperationException.

More detail information, see ASP.NET Core Blazor data binding and InputBase.Value Property.

i have a problem with my @bind-Value is always coming up NULL

About this issue, I think your application is an Asp.net 8 Blazor Web App application, right?

From .NET 8, Blazor is a full-stack web UI framework which contains different render modes. By default, the component is render as Static server-side rendering (static SSR), and we can use the @rendermode Razor directive to set the render mode. Refer to ASP.NET Core Blazor render modes.

So, from your code, I think you are using the static SSR render mode.

In static SSR render mode, when submit the form, to get the form data, we need to use the [SupplyParameterFromForm] attribute to indicate that the value of the associated property should be supplied from the form data for the form. More detail, see ASP.NET Core Blazor forms binding

To solve this issue, you can add the [SupplyParameterFromForm] for the employee, like this:

[SupplyParameterFromForm]
public EmployeeVM employee { get; set; } = new EmployeeVM();

Or, you can set the render mode using the @rendermode Razor directive, like this:

@page "/database"
@rendermode InteractiveServer 

Note: you can also change it to InteractiveAuto or InteractiveWebAssembly, it depends on your application and requirement, see ASP.NET Core Blazor render modes.

The following sample works well on my side, you can check it:

@page "/database"
@using BlazorApp5.Models
<PageTitle>Database</PageTitle>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h1 class="card-title text-center">DataBase Insert</h1>

                <br />
                <br />

                <EditForm Model="@employee" method="post" OnValidSubmit="AddNewEmployee" FormName="registerMaster">

                    <div class="form-floating mb-3">
                        <InputText @bind-Value="employee.Name" class="form-control" placeholder="Name" />
                        <label for="Name">Name</label>
                    </div>
                    <div class="form-floating mb-3">
                        <InputNumber @bind-Value="employee.Age" class="form-control" placeholder="Age" />
                        <label for="Age">Age</label>
                    </div>
                    <div class="form-floating mb-3">
                        <InputText @bind-Value="employee.Title" class="form-control" placeholder="Title" />
                        <label for="Title">Title</label>
                    </div>
                    <div class="form-floating mb-3">
                        <InputText @bind-Value="employee.Gender" class="form-control" placeholder="Gender" />
                        <label for="Gender">Gender</label>
                    </div>

                    <button type="submit" class="btn btn-primary btn-rounded">Submit</button>

                </EditForm>

            </div>
        </div>
    </div>
</div>
<div class="bg-dark text-white m-2 p-2">
    <pre>Name: @employee?.Name</pre>
    <pre>Age: @employee?.Age</pre>
    <pre>Title: @employee?.Title</pre>
    <pre>Gender: @employee?.Gender</pre>
</div> 
@code {
    [SupplyParameterFromForm]
    public Employee employee { get; set; } = new Employee();

    public async Task AddNewEmployee()
    {
        employee.Name = "Tom";
        var item = employee;
    }
}

Before clicking the submit button, the form like this:

After submitting the form, the result as below: we changed the name in the AddNewEmployee method.