title: Passing a list to partialview, BeginCollectionItem()
body: <p>I want to pass a list to PartialView that has BeginCollectionItem(). Here is the code,</p>
  
  <p><code>InquiryOrderViewModel</code></p>
  
  <pre><code>public class InquiryOrderViewModel
  {
      public InquiryOrder InquiryOrder { get; set; }
      public List&lt;InquiryOrderDetail&gt; InquiryOrderDetails { get; set; }
      public List&lt;InquiryComponentDetail&gt; InquiryComponentDetails { get; set; }        
  }
  </code></pre>
  
  <p><code>InquiryComponentDetail</code> model</p>
  
  <pre><code>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; }
  
  }
  </code></pre>
  
  <p><code>InquiryOrderIndex</code> View and the Script to render multiple items at once</p>
  
  <pre><code>@model eKnittingData.InquiryOrderViewModel 
  
  @using (Html.BeginForm("Save", "InquiryOrder"))
  {
  ..........
  &lt;div id="cmpDts"&gt;
    @foreach (var item in Model.InquiryComponentDetails)
      {
  
      }
  &lt;/div&gt;
  ..........
  }
  
  &lt;script&gt;
          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);
                      }
                  });
              }
          });
          &lt;/script&gt;
  </code></pre>
  
  <p>The <code>_DetailEditorRow</code> PartialView which gives ddls with <code>class03</code> and in main view where it got appended.(This is just to show you what is <code>class03</code>)</p>
  
  <pre><code>@model eKnittingData.InquiryOrderDetail
  @using eKnitting.Helpers
  
  @using (Html.BeginCollectionItem("InquiryOrderDetails"))
  {
  &lt;div class="editorRow"&gt;
      @Html.DropDownListFor(a =&gt; a.ComponentId, (SelectList)ViewBag.CompList, "Select", new { Class = "class02" })
      @Html.DropDownListFor(a =&gt; a.DesignCodeId, (SelectList)ViewBag.DCodeList, "Select", new { Class = "class03" })
      @Html.TextBoxFor(a =&gt; a.NoOfParts, new { Class = "class01" })
      &lt;a href="#" class="deleteRow"&gt;delete&lt;/a&gt;
  &lt;/div&gt;
  }
  
  and in main view it got appended to 
  
  &lt;div id="editorRows"&gt;         
              @foreach (var item in Model.InquiryOrderDetails)
              {
                  Html.RenderPartial("_DetailEditorRow", item);
              }           
      &lt;/div&gt;
  </code></pre>
  
  <p><code>_ComponentDetails</code> PartialView to render items(a list has been passed at once)</p>
  
  <pre><code>@model List&lt;eKnittingData.InquiryComponentDetail&gt;
  @using eKnitting.Helpers
  
  &lt;div class="cmpCls"&gt;
  @foreach(var icd in Model)
  {
      using (Html.BeginCollectionItem("InquiryComponentDetails"))
      {
      &lt;div class="innerCmpCls"&gt;
          @Html.DisplayFor(a =&gt; icd.DesignCodeId)
          @Html.DisplayFor(a =&gt; icd.QualityReferenceId)            
          @Html.TextBoxFor(a =&gt; icd.Height, new { Class="clsHeight clsSameHL"})
          @Html.TextBoxFor(a =&gt; icd.Length, new { Class = "clsLength clsSameHL" }) 
          @Html.TextBoxFor(a =&gt; icd.GscmComp, new { Class = "clsGscmComp clsSameHL" })
          @Html.TextBoxFor(A =&gt; icd.Wastage, new { Class = "clsWastage" })
          @Html.ActionLink("Fds", "View", new { id = icd.QualityReferenceId }, new { @class = "myLink", data_id = icd.QualityReferenceId })
          @Html.TextBoxFor(a =&gt; icd.TotalYarn, new { Class = "clsTotalYarn" })
          &lt;br&gt;
          &lt;div class="popFds"&gt;&lt;/div&gt;
      &lt;/div&gt;
      }
  }
  &lt;/div&gt; 
  </code></pre>
  
  <p>ActionResult that Passes a list at once and returns the PartialView</p>
  
  <pre><code>    public ActionResult ComponentDts(int DesignCdId)
      {
          var objContext = new KnittingdbContext();
          var QltyRefList = objContext.DesignCodeQltyRefs.Where(a=&gt;a.DesignCodeId==DesignCdId).ToList();
  
          var iocdList = new List&lt;InquiryComponentDetail&gt;();
  
          foreach(DesignCodeQltyRef dcqr in QltyRefList)
          {
              iocdList.Add(new InquiryComponentDetail { 
                  DesignCodeId=dcqr.DesignCodeId,
                  QualityReferenceId=dcqr.QltyRefId
              });
          }
          return PartialView("_ComponentDetails", iocdList);
      }
  </code></pre>
  
  <p>ActionResult for <code>GET</code></p>
  
  <pre><code>        var objContext = new KnittingdbContext();
  
          var newIovm = new InquiryOrderViewModel();
          var newIo = new InquiryOrder();
          var iocdL = new List&lt;InquiryComponentDetail&gt;();
  
          newIovm.InquiryOrder = newIo;
          newIovm.InquiryComponentDetails = iocdL;
  
          return View(newIovm);
  </code></pre>
  
  <p>ActionResult for <code>POST</code></p>
  
  <pre><code>public ActionResult Save(InquiryOrderViewModel inquiryOrderViewModel)
  {
      .........
  }
  </code></pre>
  
  <p>When user selects an item from a dropdownlist(<code>class03</code>), the items related to that item are rendered to the view  using the PartialView(<code>_ComponentDetails'</code>) and get appended. Then user selects another item from another ddl(<code>class03</code>), the related items are rendered and appended after earlier appended ones. User can go on like this.</p>
  
  <p>Rendering and appending items works fine. But for the PostBack even though i get the number of items in the list correctly(I checked it by putting a break point on <code>POST</code> ActionResult ) all items content show null values. Pls guide me in the correct way for achieving this. All help appreciated. Thanks!  </p>