Blazor Data binding

Question

I'm trying to bind data from an input but an error appears during the build. I've read how I'm supposed to bind it but it's not working.

I've tried putting @bind="..." as there was an update which said that this is how it should be done but there's still a mistake.

<div class="col-md-2">
    <div class="form-group">
                <label for="LicensePlateNumber">Рег. номер</label>
                <input for="LicensePlateNumber" class="form-control" @bind="_event.LicensePlateNumber" placeholder="Рег. номер">
            </div>
        </div>
</div>
@functions{
    public Event _event { get; set; }

    public class Event
    {
        public string LicensePlateNumber { get; set; }

        public string Owner { get; set; }

        public string Vehicle { get; set; }

        public string Type { get; set; }

        public string Date { get; set; }

        public string NextDate { get; set; }
    }
}

Here's the mistake I get. "Found a malformed 'input' tag helper. Tag helpers must have a start and end tag or be self closing." How to fix it?

Answer 1

Try this:

<div class="col-md-2">
    <div class="form-group">
        <label for="LicensePlateNumber">Рег. номер</label>
        <input id="LicensePlateNumber" class="form-control" @bind-Value="@_event.LicensePlateNumber" placeholder="Рег. номер" />
    </div>

</div>

@code {
    public Event _event { get; set; } 

    // more code 
}

Note: The reason why you gets this error is a superfluous </div>

• Please use the word code instead of functions , in Blazor. Use functions in Razor Pages. Right now this is not enforced, but we must learn to adhere to properly coding in Blazor.

• It's not a good idea to name a class with the word Event. This may lead to subtle errors.

• I'd recommend you to use the InputComponents such as InputText Component with EditForm, etc.

Hope this helps...