将列表传递给partialview，BeginCollectionItem()

Question

我想将一个列表传递给具有PartialView ()的BeginCollectionItem()。这是密码，

InquiryOrderViewModel

public class InquiryOrderViewModel
{
    public InquiryOrder InquiryOrder { get; set; }
    public List<InquiryOrderDetail> InquiryOrderDetails { get; set; }
    public List<InquiryComponentDetail> InquiryComponentDetails { get; set; }        
}

InquiryComponentDetail模型

public class InquiryComponentDetail
{
    [Key]
    public int InquiryComponentDetailId { get; set; }

    public int DesignCodeId { get; set; }

    public int QualityReferenceId { get; set; }

    public int Height { get; set; }

    public int Length { get; set; }

    public int GscmComp { get; set; }

    public int Wastage { get; set; }

    public int TotalYarn { get; set; }

    public virtual DesignCodeQltyRef DesignCodeQltyRef { get; set; }

}

InquiryOrderIndex视图和脚本一次呈现多个项

@model eKnittingData.InquiryOrderViewModel 

@using (Html.BeginForm("Save", "InquiryOrder"))
{
..........
<div id="cmpDts">
  @foreach (var item in Model.InquiryComponentDetails)
    {

    }
</div>
..........
}

<script>
        var prev;
        $(document).on('focus', '.class03', function () {
            prev = $(this).val();
        }).on('change', '.class03', function () {
            if (prev != "") {
                $.ajax({
                    url: '@Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's
                    type: "GET",
                    data: { DesignCdId: $(this).val() }, // pass the selected value
                    success: function (data) {
                        $('.cmpCls').last().replaceWith(data);
                    }
                }); 
            }
            else {
                $.ajax({
                    url: '@Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's
                    type: "GET",
                    data: { DesignCdId: $(this).val() }, // pass the selected value
                    success: function (data) {
                            $(".class03 option[value='']").remove();
                            $('#cmpDts').append(data);
                    }
                });
            }
        });
        </script>

_DetailEditorRow PartialView，它提供了带有class03的ddls，并在主视图中添加了它。(这仅仅是为了向您展示什么是class03)

@model eKnittingData.InquiryOrderDetail
@using eKnitting.Helpers

@using (Html.BeginCollectionItem("InquiryOrderDetails"))
{
<div class="editorRow">
    @Html.DropDownListFor(a => a.ComponentId, (SelectList)ViewBag.CompList, "Select", new { Class = "class02" })
    @Html.DropDownListFor(a => a.DesignCodeId, (SelectList)ViewBag.DCodeList, "Select", new { Class = "class03" })
    @Html.TextBoxFor(a => a.NoOfParts, new { Class = "class01" })
    <a href="#" class="deleteRow">delete</a>
</div>
}

and in main view it got appended to 

<div id="editorRows">         
            @foreach (var item in Model.InquiryOrderDetails)
            {
                Html.RenderPartial("_DetailEditorRow", item);
            }           
    </div>

_ComponentDetails PartialView以呈现项(列表已被一次传递)

@model List<eKnittingData.InquiryComponentDetail>
@using eKnitting.Helpers

<div class="cmpCls">
@foreach(var icd in Model)
{
    using (Html.BeginCollectionItem("InquiryComponentDetails"))
    {
    <div class="innerCmpCls">
        @Html.DisplayFor(a => icd.DesignCodeId)
        @Html.DisplayFor(a => icd.QualityReferenceId)            
        @Html.TextBoxFor(a => icd.Height, new { Class="clsHeight clsSameHL"})
        @Html.TextBoxFor(a => icd.Length, new { Class = "clsLength clsSameHL" }) 
        @Html.TextBoxFor(a => icd.GscmComp, new { Class = "clsGscmComp clsSameHL" })
        @Html.TextBoxFor(A => icd.Wastage, new { Class = "clsWastage" })
        @Html.ActionLink("Fds", "View", new { id = icd.QualityReferenceId }, new { @class = "myLink", data_id = icd.QualityReferenceId })
        @Html.TextBoxFor(a => icd.TotalYarn, new { Class = "clsTotalYarn" })
        <br>
        <div class="popFds"></div>
    </div>
    }
}
</div> 

ActionResult，它一次传递一个列表并返回PartialView

    public ActionResult ComponentDts(int DesignCdId)
    {
        var objContext = new KnittingdbContext();
        var QltyRefList = objContext.DesignCodeQltyRefs.Where(a=>a.DesignCodeId==DesignCdId).ToList();

        var iocdList = new List<InquiryComponentDetail>();

        foreach(DesignCodeQltyRef dcqr in QltyRefList)
        {
            iocdList.Add(new InquiryComponentDetail { 
                DesignCodeId=dcqr.DesignCodeId,
                QualityReferenceId=dcqr.QltyRefId
            });
        }
        return PartialView("_ComponentDetails", iocdList);
    }

ActionResult for GET

        var objContext = new KnittingdbContext();

        var newIovm = new InquiryOrderViewModel();
        var newIo = new InquiryOrder();
        var iocdL = new List<InquiryComponentDetail>();

        newIovm.InquiryOrder = newIo;
        newIovm.InquiryComponentDetails = iocdL;

        return View(newIovm);

ActionResult for POST

public ActionResult Save(InquiryOrderViewModel inquiryOrderViewModel)
{
    .........
}

当用户从下拉列表(class03)中选择项时，与该项相关的项将使用PartialView(_ComponentDetails')呈现到视图中，并被追加。然后用户从另一个ddl(class03)中选择另一个项，相关项在前面附加的项之后呈现和附加。用户可以这样继续下去。

呈现和附加项可以正常工作。但是对于PostBack，即使我正确地获得了列表中的项目数(我通过在POST ActionResult上设置一个断点来检查它)，所有条目内容都显示空值。请以正确的方式指导我实现这一目标。所有的帮助都很感激。谢谢!

Answer 1

您的_ComponentDetails视图正在生成具有类似于名称属性(其中###是Guid)的表单控件。

name="InquiryComponentDetail[###].icd.Height"

这与您的模型不匹配，因为InquiryComponentDetail类型不包含名为icd的属性。为了绑定到模型，您的name属性需要

name="InquiryComponentDetail[###].Height"

要生成正确的html，需要两个部分。

_ComponentDetailsList.cshtml (这将由使用return PartialView("_ComponentDetailsList", iocdList);的ComponentDts()方法调用)

@model List<eKnittingData.InquiryComponentDetail>
<div class="cmpCls">
  @foreach(var item in Model)
  {
    Html.RenderPartial("_ComponentDetails", item);
  }
</div>

_ComponentDetails.cshtml

@model eKnittingData.InquiryComponentDetail
using (Html.BeginCollectionItem("InquiryComponentDetails"))
{
  <div class="innerCmpCls">
    @Html.DisplayFor(a => a.DesignCodeId)
    @Html.DisplayFor(a => a.QualityReferenceId)            
    @Html.TextBoxFor(a => a.Height, new { @class="clsHeight clsSameHL"}) // use @class, not Class
    @Html.TextBoxFor(a => a.Length, new { Class = "clsLength clsSameHL" }) 
    ....
  </div>
}