c# - 将未知数量的输入元素绑定(bind)到 MVC5 中的模型

Question

我对 MVC5 和 C# 相当陌生，我正在尝试实现一些我不完全理解的东西。

我有一个这样的团队模型:

public class Team
{
    [Key]
    public Guid ID { get; set; }
    public string TeamName { get; set; }
    public string Coach { get; set; }
    public string Conference { get; set; }
}

我还有一个像这样的玩家模型:

public class Player
{
    [Key]
    public Guid Id { get; set; }
    [ForeignKey("Teams")]
    public Guid TeamId { get; set; }
    public string Name { get; set; }
    public virtual Team Teams { get; set; }
}

View 模型是

public class TeamViewModel
{
    public string TeamName { get; set; }
    public string Coach { get; set; }
    public string Conference { get; set; }
    public List<Player> Players { get; set; }
}

通过这种结构，您应该能够向每个团队添加无限数量的玩家。因此，我有一个包含很少属性的 Teams 表和一个包含玩家姓名以及玩家 TeamId 的 Player 表，以便我们知道他们属于哪个团队。

当我创建团队时，我的问题就出现了。我有这样的创建 Controller :

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create(TeamViewModel model)
{
    if (ModelState.IsValid)
    {
        var team = new Team { TeamName = model.TeamName, Coach = model.Coach, Conference = model.Conference, Player = model.Player };
        db.Teams.Add(team);
        var result = await db.SaveChangesAsync();
        return RedirectToAction("Index");
    }
    return View();
}

我的观点如下:

@model SoccerTeams.Models.ViewModels.TeamViewModel
@{
    ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Team</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.TeamName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.TeamName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.TeamName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Coach, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Coach, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Coach, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Conference, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Conference, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Conference, "", new { @class = "text-danger" })
            </div>
        </div>
        @if (@Model != null)
        {
            foreach (var p in Model.Player)
            {
                <div class="form-group">
                    @Html.Raw("<label class=\"control-label col-md-2\">" + p.ToString() + "</label>")
                    <div class="col-md-10">
                        @Html.Raw("<input class=\"form-control text-box single-line\" name=\"Player\" type-\"text\"")
                    </div>
                </div>
            }
        }
        else
        {
            <div class="form-group">
                @Html.Raw("<label class=\"control-label col-md-2\">Player</label>")
                <div class="col-md-10">
                    @Html.Raw("<input class=\"form-control text-box single-line\" name=\"Player\" type-\"text\"")
                </div>
            </div>
        }
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

根据我的理解， View 应该能够将输入元素转换为列表并将其传递给我的 ViewModel。但是，我的 ViewModel 总是显示为 null。

我缺少什么以及如何才能完成这项工作？

附注我知道我可以使用 Html.EditorFor，但我无法让它工作，所以我只是将其打印为 Html，因为我需要先解决我的其他问题。

编辑

我已更改我的 View 以包含以下代码

<div class="form-group">
                @Html.Raw("<label class=\"control-label col-md-2\">Player</label>")
                <div class="col-md-10">
                    @Html.Raw("<input class=\"form-control text-box single-line\" name=\"model.Players[0].Name\" type-\"text\"")
                </div>
            </div>

因此，模型现在可以正确填充 Players 数组，但所有其他值现在都已变为 null。如果我删除输入元素，则会填充值，但玩家数组再次为空，因为它没有表单字段。你知道罪魁祸首是什么吗？

在 TeamViewModel 中，我还将 Player 重命名为 Players。

Answer 1

为了让 MVC 将表单数据绑定(bind)到 Action 方法的参数 他们的名字应该匹配。

假设您的 ViewModel 具有 List<Player> Players 的属性你的代码应该是:

就您而言:

foreach (var p in Model.Player)
            {
                <div class="form-group">
                    @Html.Raw("<label class=\"control-label col-md-2\">" + p.ToString() + "</label>")
                    <div class="col-md-10">
                        @Html.Raw("<input class=\"form-control text-box single-line\" name=\"Player\" type-\"text\"")
                    </div>
                </div>
            }

应该是:

for (int i = 0; i < Model.Player.Length; i++)
            {
                <div class="form-group">
                    @Html.Raw("<label class=\"control-label col-md-2\">" + p.ToString() + "</label>")
                    <div class="col-md-10">
                        @Html.Raw("<input class=\"form-control text-box single-line\" name=\"model.Player[" + i + "].Name\" type-\"text\"")
                    </div>
                </div>
            }

因为这是您提供的参数的名称:

Create(TeamViewModel model)

还要小心，因为索引不应该被破坏，这意味着它们应该是 0、1、2.. 等，而不跳过数字。

The way that we read in the properties is by looking for parameterName[index].PropertyName. The index must be zero-based and unbroken.

注意您可以在 Scott Hanselman 的帖子 - here 中阅读有关绑定(bind)集合的更多信息。

---

最后，我建议您是否有一个包含某些内容的属性 - 在您的情况下列表为 Player使用复数形式作为属性名称 - Players .

编辑

尝试删除“模型”。在名字前面。使其像这样“Players[0].Name”。由于您的 Create Action 方法中只有一个参数，因此应该没问题。