razor - 使用 BeginCollectionItem 在 MVC5 局部视图中添加/删除 Lineitems

Question

我正在尝试将 EnquiryLineItems 添加/删除到报价视图中。试图跟随

• 带有 BeginCollectionItem 的 MVC 5 动态行
• 部分内的 BeginCollectionItem 部分行为不正确
• 带有部分 CRUD 的 MVC 5 BeginCollectionItem

但是在单击添加时会引发错误

加载资源失败：服务器响应状态为 500（内部服务器错误）

并且可能构造错误的 URl（http://localhost:53363/Enquiries/CreateLineItem?_=1505728151541- 根据错误消息）

使用 Partialview 和 Single Controller 。

视图模型：

 public class EnquiryVM
    {
        public int ID { get; set; }

        public DateTime? PreparedDate { get; set; }
        [StringLength(12)]
        public string EnquiryNumber { get; set; }
        public DateTime? ClosingDate { get; set; }
        public int ClientID { get; set; }
        public IEnumerable<SelectListItem> Clients { get; set; }//DDL in main view
        public Client Client { get; set; }
        public DateTime? RFQSentDate { get; set; }

        public int ItemID { get; set; }
        public List<EnquiryLineItem> LineItems { get; set; }// this is added/deleted dynamically

    }
 public class EnquiryLineItemVM
    {
        public int ID { get; set; }
        public string ItemDesc { get; set; }
        public int Quantity { get; set; }
        public int ManufacturerId { get; set; }
        public SelectList ManufacturerList { get; set; }
    }

控制器：

 // GET: Enquiries/Create
        public ActionResult Create()
        {
            var viewModel = GetAllCategories();
            return View(viewModel);
        }
  //Create View Population method - for dropdownlists
        private EnquiryVM GetAllCategories()
        {
            var model = new EnquiryVM();
            var clients = db.Clients.ToList();
            model.Clients = clients.Select(s => new SelectListItem
            {
                Value = s.ID.ToString(),
                Text = s.Name
            });

           var LineItems = new List<EnquiryLineItem>();//added to avoid null exception, 
            model.LineItems = LineItems;

           return model;
        }
//to render partialView
 public PartialViewResult CreateLineItem()
        {
            return PartialView(new EnquiryLineItemVM());
        }

MainView (Enquiry-create) - 只添加了相关代码

@model EnquiryVM

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.EnquiryNumber, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                @Html.EditorFor(model => model.EnquiryNumber, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EnquiryNumber, "", new { @class = "text-danger" })
            </div>
        </div>

         <div class="form-group">
            @Html.LabelFor(model => model.ClientID, "Client", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">

                @Html.DropDownListFor(u => u.ClientID, (IEnumerable<SelectListItem>)Model.Clients, "--Select--")
                @Html.ValidationMessageFor(model => model.ClientID, "", new { @class = "text-danger" })
            </div>
        </div>


        </div>

        <div id="LineItems">
            @using (Html.BeginForm())
            {
                <div id="editorRowsLineitems">
                    @foreach (var item in Model.LineItems)
                    {
                        @Html.Partial("_CreateEnquiryItem", item)
                    }
                </div>
                @Html.ActionLink("Add Items", "CreateLineItem", null, new { id = "addItem", @class = "button" });
            }
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    $(function () {
        $('#addItem').on('click', function () {
            $.ajax({
                url: '@Url.Action("CreateLineItem")',
                    cache: false,
                    success: function (html) { $("#editorRowsLineitems").append(html); }
                });
                return false;
            });
        $('#editorRowsLineitems').on('click', '.deleteRow', function () {
                $(this).closest('.editorRow').remove();
            });

        });
</script>
}

部分视图 - _createEnquiryItem.cshtml

@model .EnquiryLineItemVM

<div class="editorRow">
    @using (Html.BeginCollectionItem("ItemList"))
    {
        <table class="table">

            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            <tr>
                <td>
                    @Html.EditorFor(model => model.ItemDesc)
                    @Html.ValidationMessageFor(model => model.EnquiryLineItem.ItemDesc, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.EditorFor(model => model.Quantity)
                    @Html.ValidationMessageFor(model => model.EnquiryLineItem.Quantity)
                </td>

                <td>
                    @Html.DropDownListFor(model => model.ManufacturerId, Model.ManufacturerList, "--Please Select--")
                    @Html.ValidationMessageFor(model => model.ManufacturerId, "", new { @class = "text-danger" })
                </td>
            </tr>
        </table>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>

    }
    </div>

我在这里做错了什么。此外，这是否可以通过使用单个局部视图的更好或更简单的方法来完成？请帮忙。提前致谢。