Razor Pages下拉列表绑定及ModelState验证失败问题排查

这个问题的根源在于MetaDropdown模型中的MetaField导航属性——ASP.NET Core的模型绑定机制会尝试绑定所有公开的属性，而你的表单里并没有提供MetaField相关的输入项，因此ModelState会将其标记为缺失，导致验证不通过。下面提供两种可行的解决办法：

方案一：忽略导航属性的模型绑定 #

直接在MetaField属性上添加[BindNever]特性，明确告诉模型绑定器跳过这个属性：

修改MetaDropdown模型代码：

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

    public int MetaFieldId { get; set; }

    public string? Value { get; set; }
    
    public bool active { get; set; }

    [BindNever] // 添加该特性忽略模型绑定
    public virtual MetaField MetaField { get; set; }
}

同时，在OnPostAsync方法中，如果ModelState无效返回页面时，记得重新填充下拉列表的数据源，否则页面返回后下拉框会为空：

public async Task<IActionResult> OnPostAsync()
{
  if (!ModelState.IsValid)
    {
        // 重新填充下拉列表数据源
        ViewData["MetaFieldId"] = new SelectList(_context.meta_fields, "Id", "FieldName");
        return Page();
    }

    _context.meta_dropdowns.Add(MetaDropdown);
    await _context.SaveChangesAsync();

    return RedirectToPage("./Index");
}

方案二：使用视图模型（ViewModel） #

更规范的做法是创建专门的视图模型，只包含表单需要的字段，避免实体模型和视图耦合：

1. 创建CreateMetaDropdownViewModel类：

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

    public int MetaFieldId { get; set; }

    public string? Value { get; set; }
    
    public bool active { get; set; }
}

2. 修改PageModel代码，使用视图模型接收表单数据，再映射到实体类：

public class CreateModel : PageModel
{
    private readonly DataContext _context;

    public CreateModel(DataContext context)
    {
        _context = context;
    }

    public IActionResult OnGet()
    {
        ViewData["MetaFieldId"] = new SelectList(_context.meta_fields, "Id", "FieldName");
        return Page();
    }

    [BindProperty]
    public CreateMetaDropdownViewModel Input { get; set; }
    

    public async Task<IActionResult> OnPostAsync()
    {
      if (!ModelState.IsValid)
        {
            ViewData["MetaFieldId"] = new SelectList(_context.meta_fields, "Id", "FieldName");
            return Page();
        }

        // 将视图模型映射到实体
        var metaDropdown = new MetaDropdown
        {
            Id = Input.Id,
            MetaFieldId = Input.MetaFieldId,
            Value = Input.Value,
            active = Input.active
        };

        _context.meta_dropdowns.Add(metaDropdown);
        await _context.SaveChangesAsync();

        return RedirectToPage("./Index");
    }
}

3. 修改Create.cshtml中的绑定目标为视图模型属性：

<form method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Input.Id" class="control-label"></label>
        <input asp-for="Input.Id" class="form-control" />
        <span asp-validation-for="Input.Id" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Input.MetaFieldId" class="control-label"></label>
        <select asp-for="Input.MetaFieldId" class="form-control" asp-items="ViewBag.MetaFieldId"></select>
    </div>
    <div class="form-group">
        <label asp-for="Input.Value" class="control-label"></label>
        <input asp-for="Input.Value" class="form-control" />
        <span asp-validation-for="Input.Value" class="text-danger"></span>
    </div>
    <div class="form-group form-check">
        <label class="form-check-label">
            <input class="form-check-input" asp-for="Input.active" /> @Html.DisplayNameFor(model => model.Input.active)
        </label>
    </div>
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>

内容的提问来源于stack exchange，提问作者Steve