asp.net-mvc - 在同一页面上创建新的父级和子级

Question

我的 MVC 应用程序具有经典的父子(主从)关系。

我想要一个页面，在同一页面上创建新的父级和子级。我添加了一个返回部分 View 并将子 HTML 添加到父 View 的操作，但我不知道如何将操作中新创建的子级关联到原始父级(换句话说，我如何添加新的子实体到父实体中这些实体的集合)。

我想当我提交表单时，该操作应该在其集合中获取包含新创建子项的父实体。

所以简而言之，创建子实体的操作代码应该是什么，以及如何将子实体添加到其父集合中？

我在这里(和其他网站)阅读了很多帖子，但找不到示例。

该应用程序使用 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; }
}

以下部分 View (_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>
}

以下 View (Create.cshtml) 是创建表单的 View 。

@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

我认为对你来说最好和最简单的方法是你有一个创建 Form 的 View 。在它的底部放一个fieldset分配FormFields给它。

对于字段集，您应该有两个局部 View :一个用于创建，另一个用于编辑。创建的局部 View 应该是这样的:

@model myPrj.Models.Form_FormFieldInfo

@{ 
    var index = Guid.NewGuid().ToString(); 
    string ln = (string)ViewBag.ListName;
    string hn = ln + ".Index";
}

<tr>
    <td>        
        <input type="hidden" name="@hn" value="@index" />
        @Html.LabelFor(model => model.FormFieldID)
    </td>
    <td>
        @Html.DropDownList(ln + "[" + index + "].FormFieldID", 
            new SelectList(new myPrj.Models.DbContext().FormFields, "ID", "FieldName"))
    </td>        
    <td>
        <input type="button" onclick="$(this).parent().parent().remove();" 
            value="Remove" />
    </td>
</tr>

通过 ajaxly 在 create place view 中调用这个局部 View ，您可以为每个标签呈现一些元素。每行元素都包含一个标签、一个包含标签的 DropDownList 和一个删除按钮，用于简单地删除创建的元素。

在创建地点 View 中，您有一个裸表，其中包含您通过部分 View 创建的那些元素:

<fieldset>
     <legend>Form and FormFields</legend>
     @Html.ValidationMessageFor(model => model.FormFields)</label>
     <table id="tblFields"></table>                                        
     <input type="button" id="btnAddTag" value="Add new Field"/>
     <img id="imgSpinnerl" src="~/Images/indicator-blue.gif" style="display:none;" />
</fieldset>

并且您有以下脚本来为每个标签创建一行元素:

$(document).ready(function () {
    $("#btnAddField").click(function () {
        $.ajax({
            url: "/Controller/GetFormFieldRow/FormFields",
            type: 'GET', dataType: 'json',
            success: function (data, textStatus, jqXHR) {
                $("#tblFields").append(jqXHR.responseText);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#tblFields").append(jqXHR.responseText);
            },
            beforeSend: function () { $("#imgSpinnerl").show(); },
            complete: function () { $("#imgSpinnerl").hide(); }
        });
    });
});

操作方法 GetFormFieldRow如下所示:

public PartialViewResult GetFormFieldRow(string id = "")
    {            
        ViewBag.ListName = id;
        return PartialView("_FormFieldPartial");
    }

并且您已完成创建...您问题的整个解决方案有许多用于 View 、部分 View 、 Controller 、ajax 调用和模型绑定(bind)的代码。我试图向您展示方式，因为我真的无法在此答案中发布所有这些。

Here是完整的信息和操作方法。

希望这个答案对您有用并为您指明方向。