CODEWITHSUNDEEP
bindingblazor
Bitco Software
Bitco Software

Reputation: 437

Blazor EditForm and Model using 'this'

I am converting my asp.net application to Blazor and I have a question as to using the EditForm and the Model. Currently if I don't have a specific model setup for my form, I might just create a few variables to bind my form. When I do I do this:

<EditForm Model="this">

I know I don't have to use the EditForm but can just use the regular HTML controls. I want to use controls based on InputBase, which of course I have created a few of my own.

I might have a quick form where the user enters only a couple of fields of data like a string and date. Instead of creating a class object, I just add two public fields to the page and then create the EditForm as show above with my fields inside.

Can you tell me a good reason why I shouldn't do this or would this be perfectly fine?

Upvotes: 0

Views: 2284

Answers (2)

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30410

I agree with Henk's answer.

If you are only doing something "local" then why not just put your data into a local class in the component?

Here's a form I have just used to answer another question elsewhere:

@page "/"
@using System;
@using System.ComponentModel.DataAnnotations;

<h3>EditForm</h3>
@if (loaded)
{
    <EditForm EditContext=this.editContext OnValidSubmit=this.OnValidSubmit>
        <DataAnnotationsValidator />
        <div class="row mb-2">
            <div class="col-2">
                Name:
            </div>
            <div class="col-6">
                <InputText class="form-control" @bind-Value=this.model.Name />
            </div>
            <div class="col-4">
                <ValidationMessage For="() => this.model.Name" />
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-2">
                Count:
            </div>
            <div class="col-6">
                <InputNumber class="form-control" @bind-Value=this.model.Count />
            </div>
            <div class="col-4">
                <ValidationMessage For="() => this.model.Count" />
            </div>
        </div>
        <div class="row">
            <div class="col-12 text-end">
                <button class="btn btn-primary" type="submit">Add Record</button>
            </div>
        </div>
    </EditForm>
}

@code {
    private Model model = new Model();
    private bool loaded;
    private EditContext? _editContext;
    private EditContext editContext => _editContext!;

    protected async override Task OnInitializedAsync()
    {
        // emulate an async data get from elsewhere
        await Task.Delay(100);
        this.model = new Model();
        this._editContext = new EditContext(this.model);
        loaded = true;
    }

    private void OnValidSubmit()
    {
        // my code
    }

    public class Model
    {
        [Required]
        [StringLength(16, ErrorMessage = "Name too long (16 character limit).")]
        public string? Name { get; set; }

        [Range(10, 100, ErrorMessage = "Value must be between 10 and 100.")]
        public int Count { get; set; }
    }
}

Upvotes: 1

Henk Holterman
Henk Holterman

Reputation: 273774

Technically there is nothing wrong with this, it works fine as you will have noticed. And I do use it sometimes for very simple things like a search term.

But on an architectural level, you now have View == ViewModel. That is not correct or practical for larger data objects. It will be harder to test, and you will have to convert (map) the data for processing at some point.

Upvotes: 0

Related Questions