将 BeginCollectionItem 与 MVC 核心一起使用答案

【问题标题】：Using BeginCollectionItem with MVC Core将 BeginCollectionItem 与 MVC 核心一起使用
【发布时间】：2018-11-14 13:04:03
【问题描述】：

在使用 MVC 核心实现 BeginCollectionItem 时，我似乎没有遇到与大多数人相同的问题，我没有收到任何数据。

我的主页有很多工作要做，但这里是向页面添加新部分的 javascript，以及将在下面添加的部分。

@model QuizBuilderModel
...
function addSection() {
    $.ajax({
        url: '@Url.Action("AddSection","Quiz")',
        cache: false,
        success: function (html) {
        $("#sortable-survey").append(html);
        }
    });
}
...

<div class="quiz-builder" id="quiz-builder" style="@((Model.Quiz == null || string.IsNullOrEmpty(Model.Quiz.Id))? "display: none;" : "")">
        @{await Html.RenderPartialAsync("~/Views/Admin/Quiz/_QuizBuilder.cshtml", Model);}
</div>

现在，我们有了这个部分来开始我们正在构建的表单。

@model QuizBuilderModel

<div id="sortable-survey" class="sortable-survey">
    @using (Html.BeginForm("PostQuizUpdate", "Quiz", FormMethod.Post))
    {
        @if (Model.Quiz != null && !string.IsNullOrEmpty(Model.Quiz.Id))
        {
            <input type="submit" class="btn btn-lg btn-outline-primary top-right-button top-right-button-single" id="SaveQuizModal" name="SaveQuizModal" value="Save Quiz" />
        }

        @if (Model.Quiz != null && Model.Quiz.Sections != null)
        {
            foreach (Sections section in Model.Quiz.Sections)
            {
                await Html.RenderPartialAsync("~/Views/Admin/Quiz/_Section.cshtml", Model);
            }
        }
    }
</div>

<div>
    <div class="text-center">
        <button type="button" class="btn btn-outline-primary btn-sm my-5" id="AddSection" onclick="addSection();">
            <i class="simple-icon-plus btn-group-icon"></i>
            Add Section
        </button>
    </div>
</div>

然后我有这个部分，我们将在其中添加越来越多的内容。

@using HtmlHelpers.BeginCollectionItemCore
@model Sections

@using (Html.BeginCollectionItem("Sections"))
{
    <div class="form-group">
        @Html.LabelFor(x => x.Title);
        @Html.EditorFor(m => m.Title, new { @class = "form-control" })
    </div>

    <div class="form-group">
        <label>SubTitle (optional)</label>
        @Html.EditorFor(m => m.SubTitle, new { @class = "form-control" })
    </div>

    <div class="form-group">
        <label>Instructions (optional)</label>
        <textarea type="text" class="form-control" placeholder="" id="Instructions" name="Instructions" required rows="10" cols="50"></textarea>
    </div>
}

帖子的回复发到这里...

[HttpPost]
public async Task<IActionResult> PostQuizUpdate(IEnumerable<Sections> Sections)
{
    ...
}

就像我之前说的，当我点击提交时，我没有得到帖子中的部分列表。

【问题讨论】：

您显示的代码是否正确？您有一个 foreach (Sections section ...) 行将 QuizBuilderModel 传递给期望 Sections 的部分，这将抛出 this exception
@StephenMuecke 好的，我修复了这个错误，但我仍然得到零行。
你的意思是你在POST方法中的IEnumerable<Sections> Sections参数是null还是一个空集合？
@StephenMuecke 空集合... Count(0)
其余的代码看起来没问题，除了你应该使用@Html.TextAreaFor(m => m.Instructions, new { ... })。 _Section.cshtml partials 之一生成的实际 html 是什么

标签： asp.net-core-mvc begincollectionitem

【解决方案1】：

您的脚本将包含BeginCollectionItem 的部分附加到<div id="sortable-survey" class="sortable-survey"> 元素。但是该元素包含您的<form>....</form> 元素，因此$("#sortable-survey").append(html); 将在关闭</form> 标记之后附加html，结果，您的<form> 本身将不包含任何表单控件，因此没有什么可提交的。

更改 html 以使 <div> 位于 <form> 元素内

@using (Html.BeginForm("PostQuizUpdate", "Quiz", FormMethod.Post))
{
    <div id="sortable-survey" class="sortable-survey">
        ....
    </div>
}

以便附加的表单控件位于表单标签内。

附带说明，如果您的Sections 属性包含任何现有元素，那么您的await Html.RenderPartialAsync("~/Views/Admin/Quiz/_Section.cshtml", Model); 将引发The model item passed into the dictionary is of type .. but this dictionary requires a model item of type 异常。您需要将foreach循环修改为

foreach (Sections section in Model.Quiz.Sections)
{
    await Html.RenderPartialAsync("~/Views/Admin/Quiz/_Section.cshtml", section); // section, not Model
}

此外，我建议您在将模型传递给视图之前在控制器中初始化集合，以便您可以删除视图中的if null 检查。

【讨论】：