Einfügen Teilansicht innerhalb einer anderen Teilansicht Probleme (Collection.cshtml PROBLEM)

Question

Ich habe PROPERTY VM, die List<FounderInvestmentViewModel> enthält. Ich habe erfolgreich die Teilansicht von FounderInvestmentViewModel in die Ansicht Haupteigenschaften erstellen eingefügt.

FounderInvestmentViewModel wiederum enthält List<InstallmentDetailsViewModel>. Ich habe die Teilansicht für InstallmentDetailsViewModel als und alle notwendigen Aktionen erstellt.

Ich möchte die _InstallmentDetails.cshtml in die Teilansicht FounderInvestmentViewModel einfügen, die wiederum in die Hauptansicht eingefügt wird.

Zuerst schauen wir uns die Codes einen Blick darauf werfen, die ich verwendet habe, so weit: -

Property View Modell: -

public class PropertyViewModel 
    { 

     public int? Id { get; set; } 
     public string PropertyTitle { get; set; } 
     ....other attributes.... 
     public List<FounderInvestmentViewModel> FounderInvestments { get; set; } = new List<FounderInvestmentViewModel>(); 
    } 

FounderInvestmentViewModel: -

public class FounderInvestmentViewModel 
    { 
     public int? Id { get; set; }   
     public int InvestorId { get; set; } 
     public double Investment { get; set; } 
     public int InstallmentPeriod { get; set; } 
     public IEnumerable<SelectListItem> FounderInvestorList { get; set; } 
     public List<InstallmentDetailsViewModel> InstallmentDetails { get; set; } = new List<InstallmentDetailsViewModel>(); 

    } 

InstallmentDetailsViewModel: -

public class InstallmentDetailsViewModel 
    { 
     public int? Id { get; set; } 

     [Display(Name = "Pay Date")] 
     public List<DateTime> PayDates { get; set; } 
     [Required] 
     public List<double> InstallmentAmounts { get; set; } 
    } 

PartialView für InstallmentDetails (_InstallmentDetails.cshtml): -

@model propertyMgmt.ViewModel.InstallmentDetailsViewModel 

<div class="installmentDetails"> 
    @using (Html.BeginCollectionItem("InstallmentDetails")) 
    { 
     @Html.HiddenFor(m => m.Id, new { @class = "id" }) 

     <div class="form-group"> 
      @Html.LabelFor(m => m.InstallmentAmounts, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(m => m.InstallmentAmounts, new { htmlAttributes = new { @class = "form-control", @type = "number" } }) 
       @Html.ValidationMessageFor(m => m.InstallmentAmounts, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(m => m.PayDates, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(m => m.PayDates, new { htmlAttributes = new { @class = "form-control", @placeholder = "01/02/2017" } }) 
       @Html.ValidationMessageFor(m => m.PayDates, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
    } 
</div> 

Diese _InstallmentDetails.cshtml in diese eingeführt ist, die _FounderInvestmentDetails.cshtml PartialView für FounderInvestmentDetails Ansicht Modell ist: -

@model propertyMgmt.ViewModel.FounderInvestmentViewModel 

<div class="founderInvestmentDetails"> 
    @using (Html.BeginCollectionItem("FounderInvestments")) 
    {  
      @Html.HiddenFor(m => m.Id, new { @class = "id" }) 

      <div class="form-group"> 
       @Html.LabelFor(m => m.InvestorId, htmlAttributes: new { @class = "control-label col-md-2" }) 
       <div class="col-md-10"> 
        @Html.DropDownListFor(m => m.InvestorId, Model.FounderInvestorList, "Select Investor", htmlAttributes: new { @class = "form-control" }) 
        @Html.ValidationMessageFor(m => m.InvestorId, "", new { @class = "text-danger" })      
       </div> 
      </div> 

      <div class="form-group"> 
       @Html.LabelFor(m => m.Investment, htmlAttributes: new { @class = "control-label col-md-2" }) 
       <div class="col-md-10"> 
        @Html.EditorFor(m => m.Investment, new { htmlAttributes = new { @class = "form-control", @type = "number" } }) 
        @Html.ValidationMessageFor(m => m.Investment, "", new { @class = "text-danger" }) 

       </div> 
      </div> 
      <div class="form-group"> 
       @Html.LabelFor(m => m.InstallmentPeriod, htmlAttributes: new { @class = "control-label col-md-2", @type = "number" }) 
       <div class="col-md-10"> 
        @Html.EditorFor(m => m.InstallmentPeriod, new { htmlAttributes = new { @class = "form-control" } }) 
        @Html.ValidationMessageFor(m => m.InstallmentPeriod, "", new { @class = "text-danger" }) 

       </div> 
      </div> 
      <div class="form-group" id="installmentDetailsDiv"> 
       @foreach (var InstallmentDetails in Model.InstallmentDetails) 
       { 
        @Html.Partial("_InstallmentDetails", InstallmentDetails) 
       } 
      </div> 

      <div class="form-group col-md-10"> 
       <input type="button" class="btn btn-info btn-xs" value="Add Installment Details" onclick="addInstallmentDetails()" /> 
      </div>  
    } 
</div> 

Dies ist der Haupt CREATE VIEW: -

@model propertyMgmt.ViewModel.PropertyViewModel.PropertyViewModel 
@{ 
    ViewBag.Title = "Create";  
} 
<script src="~/Areas/Admin/themes/jquery/jquery.min.js"></script>   
<h2>Property</h2>  
@using (Html.BeginForm("Create", "Property", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <h4>Add Property</h4> 
     <hr /> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
     <div class="form-group"> 
      @Html.LabelFor(model => model.PropertyTitle, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.PropertyTitle, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.PropertyTitle, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     .....Other form Groups..... 
     <div id="founderInvestmentDetails">   
      @foreach(var FounderInvestments in Model.FounderInvestments) 
      { 
      @Html.Partial("_FounderInvestmentDetails", FounderInvestments) 
      } 
     </div> 

     <div class="form-group col-md-10" > 
      <input type="button" class="btn btn-info btn-xs" value="Add Founder Investors" onclick="addFounderInvestors()" /> 
     </div> 
    </div> 
} 

das ist mein JS-Code in der Hauptansicht ist: -

function addFounderInvestors() { 
     var url = '@Url.Action("FounderInvestmentDetails")'; 
     var form = $('form'); 
     var founders = $('#founderInvestmentDetails'); 
     $.get(url, function (response) { 
      founders.append(response); 
      // Reparse the validator for client side validation 
      form.data('validator', null); 
      $.validator.unobtrusive.parse(form); 
     }); 
    }; 

    function addInstallmentDetails() { 
     var url = '@Url.Action("InstallmentDetails")'; 
     var form = $('form'); 
     var installments = $('#installmentDetailsDiv'); 
     $.get(url, function (response) { 
      installments.append(response); 
      // Reparse the validator for client side validation 
      form.data('validator', null); 
      $.validator.unobtrusive.parse(form); 
     }); 
    }; 

Controller-Code: -

public PartialViewResult FounderInvestmentDetails() 
     { 
      var model = new FounderInvestmentViewModel { 
       FounderInvestorList = _investorQueryProcessor.GetInvestorByType(1).Select(x => new SelectListItem 
       { 
        Value = x.Id.ToString(), 
        Text = x.InvestorName 
       }) 

     }; 
      //return PartialView(model); 
      return PartialView("_FounderInvestmentDetails", model); 
     } 

     public PartialViewResult InstallmentDetails() 
     { 
      return PartialView("_InstallmentDetails",new InstallmentDetailsViewModel()); 
     } 
public ActionResult Create() 
     { 
      if (Session["AdminName"] != null) 
      { 
       //ViewBag.Investors = SelectListItems; 
       List<FounderInvestmentViewModel> model = new List<FounderInvestmentViewModel>(); 
       List<InstallmentDetailsViewModel> model2 = new List<InstallmentDetailsViewModel>(); 
       return View(new PropertyViewModel()); 

      } 
      else return Redirect("/Account/Login"); 
     } 

EDIT: - leider das ist, was die Ausnahme wirft - >>Collection.cshtml PROZESS: - in der Hauptansicht "Gründer Investor Buttons hinzufügen" on click event fügt die Teilansicht _FounderInvestmentDetails.cshtml erfolgreich hinzu. Nun wird die Schaltfläche "Add Rate Details" angehängt. Nach Klicken auf diese Schaltfläche "Add Rate Details" _InstallmentDetails.cshtml sollte eine Teilansicht angehängt werden, ABER dieser Teil funktioniert nicht. Wenn ich auf diese Schaltfläche klicken, erhalte ich die Fehler "Object reference not set to an instance of an object" in dem folgenden Code: -

@using HtmlHelpers.BeginCollectionItem 

<ul>         
    @foreach (object item in Model)-->>ERROR CODE 
    { 
     <li> 
      @using (Html.BeginCollectionItem(Html.ViewData.TemplateInfo.HtmlFieldPrefix)) 
      { 
       @Html.EditorFor(_ => item, null, "") 
      } 
     </li> 
    } 
</ul> 

Answer 1

Die Paydates und Fortsetzungs muss nicht <List> sein, wie es bereits ein PartialView und kann mehrfach hinzugefügt werden.

public class InstallmentDetailsViewModel { 
    public int? Id { get; set; }  
    [Display(Name = "Pay Date")] 
    public List<DateTime> PayDates { get; set; } 
    [Required] 
    public List<double> InstallmentAmounts { get; set; } 
}