Blazor EditForm 和模型使用 'this'

Question

我正在将我的 asp.net 应用程序转换为 Blazor，但我对使用 EditForm 和模型有疑问。目前，如果我的表单没有特定的模型设置，我可能只创建一些变量来绑定我的表单。当我这样做时，我会这样做：

<EditForm Model="this">

我知道我不必使用 EditForm，但可以只使用常规 HTML 控件。我想使用基于 InputBase 的控件，当然我已经创建了一些自己的控件。

我可能有一个快速表单，用户只需输入几个数据字段，例如字符串和日期。我没有创建 class 对象，而是将两个 public 字段添加到页面，然后创建 EditForm，如上所示，其中包含我的字段。

你能告诉我一个我不应该这样做的充分理由吗？或者这样做会完全没问题吗？

Answer 1

从技术上讲，这没有任何问题，正如您所注意到的那样，它工作正常。有时我确实会用它来做一些非常简单的事情，比如搜索词。

但是在架构层面上，您现在拥有 View == ViewModel。对于较大的数据对象，这是不正确或不实用的。测试起来会更难，在某些时候你将不得不转换（映射）数据进行处理。

Answer 2

我同意 Henk 的回答。

如果您只是在做一些“本地”的事情，那么为什么不直接将您的数据放入组件中的本地 class？

这是我刚刚在别处回答另一个问题时使用的表格：

@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; }
    }
}

Blazor EditForm 和模型使用 'this'

Blazor EditForm and Model using 'this'

binding

blazor