Question

想想我应该在页面顶部写下我的问题，因为有一堆垃圾代码要跟随。

我有一个包含内部视图模型列表的外部视图模型。当我在“创建”页面上单击“保存”并转到“创建POST”函数public ActionResult Create(DeviceTypeEntryViewModel model)时，将填充外部模型，但其内部视图模型列表为空。我做错了什么？

视图模型是：

public class DeviceTypeEntryViewModel
{
    public int ID { get; set; }
    public string Type { get; set; }
    public string Description { get; set; }
    public List<AttributeEntryViewModel> Attributes { get; set; }
}

public class AttributeEntryViewModel
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public bool Private { get; set; }
}

创建包含设备条目视图的视图：

@model ICMDB.ViewModels.DeviceTypeEntryViewModel

@{
    ViewBag.Title = "ICMD - Create Device Type";
}

<h2>Create Device Type</h2>

<div class="form-div">
    @using (Html.BeginForm()) {
        @Html.ValidationSummary(true)

        Html.RenderPartial("_DeviceTypeEntryPartial", Model);
        <input type="submit" value="Save" class="form-button"/>
    }

    @using (Html.BeginForm("Index", "DeviceType"))
    {
        <input type="submit" value="Cancel" class="form-button"/>
    }       
</div>

设备输入视图部分：

@model ICMDB.ViewModels.DeviceTypeEntryViewModel

<fieldset>
    @Html.HiddenFor(model => model.ID)

    <div> @Html.LabelFor(model => model.Type) </div>
    <div>
        @Html.EditorFor(model => model.Type)
        @Html.ValidationMessageFor(model => model.Type)
    </div>

    <div> @Html.LabelFor(model => model.Description) </div>
    <div>
        @Html.EditorFor(model => model.Description)
        @Html.ValidationMessageFor(model => model.Description)
    </div>

    <table id="AttributesTable" class="editor-table">
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Private</th>
        </tr>

         @Html.EditorFor(model => model.Attributes)
    </table>

    <input id="addAttributeButton" type="button" value="Add" 
     onclick="AddAttribute()" />
</fieldset>

AttributeEntryViewModel的编辑器模板：

@model ICMDB.ViewModels.AttributeEntryViewModel

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

<tr>
    <td>
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </td>
    <td>
        @Html.EditorFor(model => model.Description)
        @Html.ValidationMessageFor(model => model.Description)
    </td>
    <td>
        @Html.EditorFor(model => model.AttributePrivate)
    </td>
</tr>

AJAX调用添加属性行：

<script type="text/javascript">
    function AddAttribute() {
        // and send it as AJAX request
        $.ajax({
            url: '@Url.Action("AddAttribute")',
            type: 'POST',
            cache: false,
            success: function (result) {
                // when the AJAX succeeds add result to the table
                $('#AttributesTable').append(result);
            }
        })
    }
</script>

AJAX调用另一侧的控制器功能，用于添加：

[HttpPost]
public ActionResult AddAttribute()
{
   var model = new AttributeEntryViewModel();
   return PartialView("EditorTemplates/AttributeEntryViewModel", model);
}

Answer 1

问题在于，当您使用AJAX向表中插入新条目时，输入元素没有proper naming作为默认模型绑定器来绑定它们。使用FireBug进行检查，您将看到集合的索引未得到遵守。要实现您的目标，我会向您推荐following blog post。

使用AJAX插入表单时的模型绑定

1 个答案: