双向绑定在 Blazor 组件中不起作用

Question

我正在 .NET 8 中开发 ASP.NET Blazor 应用程序。模型类

SubjectName

与此

SubjectForm.razor

blazor 组件绑定。

@inject ISubjectNameRepo Repo

@if(Subject is not null)
{
    <div class="row justify-content-center">
        <div class="col-6">
            <EditForm Enhance="true" method="post" FormName="SubjectForm" Model="Subject" OnValidSubmit="AddOrEditSubject" OnInvalidSubmit="InvSubmit" autocomplete="off">
                <DataAnnotationsValidator/>
                <h3>@Title</h3>
                @if (IsEditMode)
                {
                    <input type="hidden" name="Subject.Id" value="@Subject.Id"/>
                }
                <div class="mb-3">
                    <label for="subname" class="form-label">
                        Subject Name
                    </label>
                    <InputText id="subname" @bind-Value="Subject.SubName" class="form-control shadow-none" />
                </div>
                <div class="mb-3">
                    <button type="submit" class="btn btn-primary shadow-none">
                        Submit
                    </button>
                    <a href="/subjects/list" class="btn btn-secondary shadow-none ms-3">
                        Back to List
                    </a>
                </div>
                <ValidationSummary />
            </EditForm>
        </div>
    </div>
}
else
{
    <div>
        The subject is null ghere
    </div>
}

@code {
    [Parameter]
    public bool IsEditMode { get; set; } = false;

    [Parameter]
    public int Id { get; set; }

    [SupplyParameterFromForm]
    public SubjectName? Subject { get; set; }

    public string Title => IsEditMode ? $"Edit Subject {Id}" : "Add New Subject";

    [Parameter]
    public EventCallback<SubjectName> OnValidSubjectNameSubmit { get; set; }

    protected override async Task OnInitializedAsync()
    {
        if (IsEditMode)
        {
            Subject ??= await Repo.GetByIdAsync(Id);
        }
        else
        {
            Subject ??= new();
        }
    }

    private async Task AddOrEditSubject()
    {
        await OnValidSubjectNameSubmit.InvokeAsync(Subject);
    }

    private async Task InvSubmit()
    {
        
    }

}

下面是

SubjectName

模型类的代码

    public class SubjectName
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int Id {  get; set; }

        [Required]
        [StringLength(50)]
        [Display(Name = "Subject Name")]
        public string? SubName { get; set; }

        public virtual ICollection<EvaluationTweak>? EvaluationTweaks { get; set; }
    }

当我运行这个应用程序时，导航到此页面，输入数据，然后单击“提交”按钮，然后

InputText

的内容消失并显示一条消息

Subject Name field is required

我无法理解那里出了什么问题？

Answer 1

奇怪。我知道解决方案，但它只是一个解决方案。真正的原因对我来说仍然是隐藏的。

问题的外层是提交表单时

Subject

属性为空。它应该具有表单中的值。表格已正确提交。

我只展示相关部分：

您要绑定到表单的模型：

public class SubjectName
{
  public string? SubName { get; set; }
  public virtual ICollection<EvaluationTweak>? EvaluationTweaks { get; set; }
}

这里的问题是

EvaluationTweaks

，如果删除它们，一切都会按预期进行。现在来说说原因。检查

EvaluationTweak

类：

public class EvaluationTweak
{
    [Required]
    public virtual SubjectName Subject { get; set; } = new();
}

当您删除

Subject

属性时，它也将起作用...请注意，您可以将其替换为

int SubjectId

，以便将引用保留在那里。另请注意，从

Subject

中删除

EvaluationTweak

属性不会更改数据库架构。

但是为什么这是一个问题呢？我不知道，我的猜测是 - 它在序列化方面存在某种问题？也许它被认为是循环引用？

如果能进一步调查就好了。