Blazor EditForm 'model is a type, which is not valid in the given context'

Question

I have this simple Model:

using System.ComponentModel.DataAnnotations;

namespace BlazorApp.Data
{
    public class DataModel
    {

        [Required]
        [Range(1, 500, ErrorMessage = "Width needs to be above 1m and below 500m")]
        public int Width { get; set; }

        [Required]
        [Range(1, 500, ErrorMessage = "Length needs to be above 1m and below 500m")]
        public int Length { get; set; }

        [Required]
        [Range(1, 500, ErrorMessage = "Height needs to be above 1m and below 500m")]
        public int Height { get; set; }
    }
}

And this is my Razor file, which I am trying to use the model in:

<EditForm Model="@BlazorApp.Data.DataModel" OnValidSubmit="@Handle"> // ERROR OCCURS HERE 
<DataAnnotationsValidator />
<ValidationSummary />

<InputText id="width" @bind-Value="BlazorApp.Data.DataModel.Width" />
<InputText id="length" @bind-Value="BlazorApp.Data.DataModel.Length" />
<InputText id="height" @bind-Value="BlazorApp.Data.DataModel.Height" />

@code {
    private BlazorApp.Data.DataModel model = new BlazorApp.Data.DataModel();

    private void Handle()
    {

    }
}

The error occurs Model="@BlazorApp.Data.DataModel" and obviously within the `@bind-values' of each form. Whys this the case, I don't think the namspace Data is a type?

Answer 1

Model="@BlazorApp.Data.DataModel" should be Model="@model".

You need to reference the name of the variable (model) aka the variable holding all of the data for the form, not the name of it's type.

Your InputText's should also have something like @bind-Value="model.Height". Again, they need to reference the specific variable, not the field in the data type.