ASP.Net 核心 MVC - 复杂 ViewModel 未绑定 属性 与对象列表

Question

我有一个包含一些属性和对象列表的 ViewModel。我还有一个控制器来从 ViewModel 创建数据。

只要请求返回到控制器，我就会限制 Nickname 和 Items 上的绑定。 ModelState 无效，因为列表上的绑定是 null.

ViewModel

public class ContainerViewModel
{
    public Guid ID { get; set; }
    public string Nickname { get; set; }
    public List<ItemViewModel> Items { get; set; }
    public Guid NewItemID { get; set; }
    public string NewItemNickname { get; set; }
    public uint NewItemQuantity { get; set; }

    public void AddNewItem()
    {
        Items.Add(new ItemViewModel {
            ID = NewItemID,
            Nickname = NewItemNickname,
            Quantity = NewItemQuantity
        });
        NewItemID = Guid.NewGuid();
        NewItemNickname = default;
        NewItemQuantity = default;
    }

    public class ItemViewModel
    {
        public Guid ID { get; set; }
        public string Nickname { get; set; }
        public uint Quantity { get; set; }
    }
}

控制器

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Nickname,Items")] ContainerViewModel containerVM, CancellationToken token)
{
    if (ModelState.IsValid) {
        await _manager.Add(PrepareDataModel(containerVM), token);
        return RedirectToAction(nameof(Index));
     }
     return View(containerVM);
}

--编辑--

Create.cshtml

@model MyProject.Models.ContainerViewModel

@{
    ViewData["Title"] = "Create";
}

<h1>Create</h1>

<h4>Container</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Nickname" class="control-label"></label>
                <input asp-for="Nickname" class="form-control" />
                <span asp-validation-for="Nickname" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Quantity" class="control-label"></label>
                <input asp-for="Quantity" type="number" class="form-control" />
                <span asp-validation-for="Quantity" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Items" class="control-label"></label>
                @await Html.PartialAsync("Items/_Create")
                <span asp-validation-for="Items" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Items/_Create.cshtml

@model MyProject.Models.ContainerViewModel

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.NewItemNickname)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.NewItemQuantity)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model.Items) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Nickname)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Quantity)
            </td>
            <td></td>
        </tr>
}
        <tr>
            <td>
                <input asp-for="NewItemNickname" class="form-control" />
                <span asp-validation-for="NewItemNickname" class="text-danger"></span>
            </td>
            <td>
                <input asp-for="NewItemQuantity" type="number" class="form-control" />
                <span asp-validation-for="NewItemQuantity" class="text-danger"></span>
            </td>
            <td>
                <input type="submit" asp-action="CreateNewItem" value="Add" class="btn btn-secondary" />
            </td>
        </tr>
    </tbody>
</table>

Answer 1

在你的Partial View中，你只是用@Html.DisplayFor(xxxxx)显示了Items的数据，所以这些数据不会被提交。像这样更改您的代码：

Items/_Create.cshtml

//.......
@for (var i = 0; i < @Model.Items.Count; i++)
{
        <tr>
            <td>
                @Html.DisplayFor(modelItem => @Model.Items[i].Nickname)

                // use hidden to submit the data
                <input type="hidden" asp-for="@Model.Items[i].Nickname">
            </td>
            <td>
                @Html.DisplayFor(modelItem => @Model.Items[i].Quantity)
                <input type="hidden" asp-for="@Model.Items[i].Quantity">
            </td>
            <td></td>
        </tr>
 }
//.......

结果

因为你没有提供CreateNewItem的代码，我想可能是用来在Items中添加新的数据，我不写这个动作，所以ss.3 不会提交给控制器。

可以看到controller可以接收Items成功