在同一页面上创建新的父级和子级

Question

我的MVC应用程序具有经典的父子关系(master-detail).

我希望有一个页面可以在同一页面上创建新父项和子项.我添加了一个动作,它返回一个局部视图,并将子HTML添加到父视图中,但我不知道如何将动作中新创建的子视图与原始父视图相关联(换句话说,如何添加新的子实体到父实体中这些实体的集合).

我想当我提交表单时,操作应该让父实体在其集合中创建新创建的子节点.

因此,为了简化,创建子实体的操作代码应该是什么以及子代如何添加到其父集合中？

我在这里(和其他网站)阅读了很多帖子,但找不到一个例子.

该应用程序使用MVC 4和Entity Framework 5.

代码示例(我删除了一些代码,保持简单).该模型是Form(父)和FormField(子)实体.

public partial class Form
{ 
    public int ID { get; set; }
    public string Name { get; set; }

    public virtual ICollection<FormField> FormFields { get; set; }
}

public partial class FormField
{
    public int ID { get; set; }
    public string Name { get; set; }
    public int FormID { get; set; }
}

以下部分视图(_CreateFormField.cshtml)创建新的FormField(子).

@model FormField

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
    <legend>FormField</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.FormID)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.FormID)
        @Html.ValidationMessageFor(model => model.FormID)
    </div>


</fieldset>
}

以下视图(Create.cshtml)是创建Form的视图.

@model Form

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
    <legend>Form</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>

<div>
        @Html.ActionLink(
                "Add Field",
                "CreateFormField", 
                new { id = -1},
                new { @class = "form-field" })
    </div>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<div id="CreateFormField"></div>

@section Scripts {
<script>
    $(function () {
        $('.form-field').on('click', function (e) {

            $.get($(this).prop('href'), function (response) {
                $('#CreateFormField').append(response)
            });

            e.preventDefault();
        });
    });
</script>

@Scripts.Render("~/bundles/jqueryval")

}

以下操作处理FormController中的创建.

[HttpPost]
public ActionResult Create(Form form)
{
    if (ModelState.IsValid)
    {
        db.Forms.Add(form);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    return View(form);
}

public ActionResult CreateFormField(string id = null)
{
    // I guess something is missing here.

    return PartialView("_CreateFormField", new FormField());
}

提前致谢,

沙龙.

Answer 1

问题是您的部分视图需要使用：

@model Form //Instead of FormField

然后在局部视图内部，您必须使用 model => model。表单域.x

<div class="editor-label">
    @Html.LabelFor(model => model.FormField.Name)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.FormField.Name)
    @Html.ValidationMessageFor(model => model.FormField.Name)
</div>

这只适用于一对一关系（或者我在这个线程中读到的：Here）。如果局部视图中有 @Html.Form 也没关系。

进行这些更改后，我可以毫无问题地将所有发布的数据传回控制器。

编辑：我遇到了这个问题，任何人很快就会发现。

更好的方法（我见过）是使用 EditorTemplate。这样，编辑器就可以独立于父级，并且您可以在任何页面上添加表单，而不仅仅是在其中添加 FormField 的页面。

然后你会替换

@Html.Partial("view")

和

@Html.EditorFor()

基本上，我发现在进行编辑时使用 @Html.EditorFor 而不是部分视图要好得多（它称为视图 - 不是编辑器）。