InputText requires a value for the 'ValueExpression' parameter

Question

I want to be able to render a form with Blazor (Server Side Rendering) but I am not getting the right syntax.

    <EditForm Model="@Model" OnValidSubmit="@SubmitValidForm">
        <FluentValidationValidator />
        <ValidationSummary />

        <p class="name">
            Name: <InputText bind-Value="@Model.Name" placeholder="Name"/>
        </p>

        <button type="submit">Submit</button>
    </EditForm>

@code {
    Person Model = new Person();

    void SubmitValidForm()
    {
        Console.WriteLine("OnValidSubmit");
    }
}

and

public class Person : ComponentBase
    {
        [Required(ErrorMessage = "Enter a name")]
        [StringLength(10, ErrorMessage = "That name is too long")]
        public string Name { get; set; } = "asd";

        [Range(0, 200, ErrorMessage = "Nobody is that old")]
        public int AgeInYears { get; set; }

        [Required]
        [Range(typeof(bool), "true", "true", ErrorMessage = "Must accept terms")]
        public bool AcceptsTerms { get; set; }
    }

But I get this error

Microsoft.AspNetCore.Components.Forms.InputText requires a value for the 'ValueExpression' parameter. Normally this is provided automatically when using 'bind-Value'.

How does one render the page and do a simple post to the server?

Solution 1

For me, it was because I was using @bind-value.

The v is uppercase. Use @bind-Value

Solution 2

I've been struggling with the exact same thing tonight. I omitted the "@" sign before the "bind-Value" (can I call it a property?) and got the exact same error.

According to the ASP.NET Core Blazor forms and validation page you should change your InputText element's declaration to <InputText @bind-Value="@Model.Name" placeholder="Name"/>

I add the @ character and my control renders.

Solution 3

I forgot the @ infront of @bind-Value="@Model.Name". It should be @bind-Value="@Model.Name", not bind-Value="@Model.Name".

Solution 4

Add to InputText field meaningless spell

ValueExpression="@( () => Model.Name )" 

Yes, this is no sense, but this is working.

Unfortunately, Blazor is not a really environment for commercial development, because Blazor not support VB.NET, not support jQuery, not supported by Visual Studio Designer, has no convenient for ASP.NET developer components like Pager, DataGrid and so on. Its only a clear naked idea with a lot of issues.

View more solutions

Comments

[Tom Stein]

Not the problem stated in the question, but nice that you posted it here. This typo should give a warning IMO...

[FranzHuber23]

Yes, @bind-value seems to come from the HTML tags while @bind-Value comes from Blazor...

[SilenceAmongCrows]

AHAH! Thanks, I agree with Tom Stein above... there really needs to be a warning for these silly typos. or at least a warning

[minameismud]

"Not support VB.NET" lmfao VB.Net is dead. It supports jQuery through the JSRuntime object which you can inject. The VS Designer has always been junk for web. And no, it doesn't have complex, black box components like a pager or DataGrid.... it's for more-pure HTML than ASP.NET Web Forms could ever imagine. That said, you actually gave me the answer I needed in that code snippet.

[Leaky]

Jeez, that was my issue too. It honestly seems to me Blazor is still not quite ready for normal use yet... I had easier time learning Angular.

[Steve Greene]

@minameismud Funny, was going to say the same thing - answer works, but comments about Blazor incorrect. It is a different, better paradigm. Plenty of free grid/pager and other components out there.