Passer une liste à partialview, BeginCollectionItem()

Question

Je veux passer une liste à PartialView qui a BeginCollectionItem(). Voici le code,

InquiryOrderViewModel

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

InquiryComponentDetail modèle

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 Voir et le script pour rendre plusieurs éléments à la fois

@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> 

Le _DetailEditorRow PartialView qui donne ddls avec class03 et vue principale où il a obtenu ajouté. (Ceci est juste pour vous montrer ce qui est 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 pour rendre les éléments (une liste a été adoptée à la fois)

@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 qui adopte une liste à la fois et renvoie le 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 pour 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 pour POST

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

Lorsque l'utilisateur sélectionne un élément d'une dropdownlist (class03), les éléments liés à cet élément sont rendus à la vue à l'aide du PartialView (_ComponentDetails') et se joint en annexe. Ensuite, l'utilisateur sélectionne un autre élément d'un autre ddl (class03), les éléments associés sont rendus et ajoutés après ceux ajoutés précédemment. L'utilisateur peut continuer comme ça.

Le rendu et l'ajout d'éléments fonctionnent correctement. Mais pour le PostBack, même si j'obtiens le nombre d'éléments dans la liste correctement (je l'ai vérifié en mettant un point d'arrêt sur POST ActionResult) tous les éléments du contenu affichent des valeurs nulles. Pls me guider de la bonne façon pour y parvenir. Toute aide appréciée. Merci!

Answer 1

Votre vue _ComponentDetails génère des contrôles de formulaire qui ont des attributs de nom qui ressemblent à (où ### est un Guid)

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

qui ne correspond pas à votre modèle, car typeof InquiryComponentDetail ne contient pas une propriété nommée icd.Afin de se lier à votre modèle, votre name attribut aurait besoin

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

Pour générer le code HTML correct, vous aurez besoin de 2 partials

_ComponentDetailsList.cshtml (ce sera appelée par la méthode ComponentDts() utilisant return PartialView("_ComponentDetailsList", iocdList);)

@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> 
}