Asp.Net MVC3 Razor - 子项列表未从编辑器发回

Question

我正在尝试在 MVC3 中创建一个多级编辑器。多级我的意思是我希望能够编辑三个层次结构（父对象、父子对象和子子对象集合）的数据。我的模型大致如下：

namespace MvcApplication1.Models
{
    public class Parent
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public Child Child { get; set; }
    }

    public class Child
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public IEnumerable<SubChild> SubChildren { get; set; }    
    }

    public class SubChild
    {
        public int Id { get; set; }
        public string Name { get; set; }
        private DateTime _date = DateTime.Now;
        public DateTime Date { get { return _date; } set { this._date = value; } }
    }
}

由于我想在一个屏幕上显示整个层次结构，我创建了以下视图模型：

namespace MvcApplication1.Models.ViewModels
{
    public class ParentViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public Child Child { get; set; }
        public IEnumerable<SubChild> SubChildren { get { return Child.SubChildren; } set { this.Child.SubChildren = value; } }
    }
}

控制器看起来像：

    public class ParentController : Controller
    {
        public ActionResult MultiLevelEdit(int id)
        {
            // Simulate data retrieval 
            Parent parent = new Parent { Id = 2 , Name = "P"};
            var child = new Child { Id = 3, Name = "Cild1" };
            List<SubChild> children = new List<SubChild>();
            children.Add(new SubChild { Id = 3, Name = "S1"});
            children.Add(new SubChild { Id = 5, Name = "S 22" });
            child.SubChildren = children;
            parent.Child = child;
            // Create view model
            ParentViewModel vm = new ParentViewModel() { Id = parent.Id, Name = parent.Name, Child = parent.Child, SubChildren = parent.Child.SubChildren };

            return View(vm);
        }

    }

正在呈现的视图是：

@model MvcApplication1.Models.ViewModels.ParentViewModel

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>

    @Html.HiddenFor(model => model.Id)
    @Html.LabelFor(model => model.Name)
    @Html.EditorFor(model => model.Name)
    <hr />
    Child
    <br />
    @Html.EditorFor(model => model.Child)

    <hr />
    SubChild
    <br />
    @Html.EditorFor(model => model.SubChildren)


    <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

我在 Views\Shared\EditorTemplates 中创建了两个编辑器模板：

子模板.cshtml

@model MvcApplication1.Models.Child

@{
    ViewBag.Title = "Child";
}

<h2>Child</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Child</legend>

        @Html.HiddenFor(model => model.Id)

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

和 SubChildTemplate.cshtml

@model MvcApplication1.Models.SubChild

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>SubChild</legend>

        @Html.HiddenFor(model => model.Id)

        <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.Date)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Date)
            @Html.ValidationMessageFor(model => model.Date)
        </div>
    </fieldset>
}

一切都正确呈现，但是当我尝试保存更改时，SubChildren 集合为空。我尝试了编辑方法的两个签名：

[HttpPost]
public ActionResult MultiLevelEdit(ParentViewModel parentVM)
{...

[HttpPost]
public ActionResult MultiLevelEdit(ParentViewModel parentVM, FormCollection collection)
{...

并且其中任何一个都没有价值。

任何人都可以建议可以改进什么以使其工作？非常感谢。

Answer 1

Your templates are not named correctly. Should be:

• ~/Views/Shared/EditorTemplates/Child.cshtml
• ~/Views/Shared/EditorTemplates/SubChild.cshtml

Also I don't quite see the purpose of the SubChildren property on your view model.

You could remove it and in your main view:

@model MvcApplication1.Models.ViewModels.ParentViewModel

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>

    @Html.HiddenFor(model => model.Id)
    @Html.LabelFor(model => model.Name)
    @Html.EditorFor(model => model.Name)
    <hr />
    Child
    <br />
    @Html.EditorFor(model => model.Child)

    <hr />
    SubChild
    <br />
    @Html.EditorFor(model => model.Child.SubChildren)

    <p>
        <input type="submit" value="Save" />
    </p>
    </fieldset>
}

But your biggest problem is that you have nested HTML <form> elements which is not allowed. It's invalid HTML and results into undefined behavior. Some values might be posted, others not, ... Remove all Html.BeginForm helpers from inside your templates because your main view already contains a form.