将局部视图插入另一个局部视图问题（Collection.cshtml 问题）

Question

我有 PROPERTY 个包含 List<FounderInvestmentViewModel> 的虚拟机。我已经成功地将 FounderInvestmentViewModel 的部分视图插入到 Main Create 属性视图中。

FounderInvestmentViewModel 又包含 List<InstallmentDetailsViewModel>。我已将 InstallmentDetailsViewModel 的部分视图创建为 _InstallmentDetails.cshtml 以及所有必要的操作。

我想将 _InstallmentDetails.cshtml 插入到 FounderInvestmentViewModel 的部分视图中，然后将其插入到主视图中。

首先让我们看一下我到目前为止使用的代码:--

属性查看模型：-

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

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>

这个 _InstallmentDetails.cshtml 被插入到这个 _FounderInvestmentDetails.cshtml 中，它是 FounderInvestmentDetails 视图模型的 PartialView:-

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

这是主创建视图：-

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

这是我在主视图中的 JS 代码：-

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);
        });
    };

控制器代码：-

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");
        }

编辑：- 抱歉，这是抛出异常的原因 -->> Collection.cshtml 过程：- 在主视图中，"Add Founder Investor Buttons" 单击事件添加局部视图 _FounderInvestmentDetails.cshtml successfully.Now "Add Installment Details" 按钮是 appended.Upon 单击此 "Add Installment Details"按钮 _InstallmentDetails.cshtml 应该附加部分视图，但是这部分不起作用。单击此按钮时，在以下代码中出现错误 "Object reference not set to an instance of an object"：-

@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

Paydates 和 Installments 不需要 <List> 因为它已经是 PartialView 并且可以添加多次。

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

将局部视图插入另一个局部视图问题（Collection.cshtml 问题）

Inserting Partial View inside another Partial View Issues (Collection.cshtml ISSUE)

c#

asp.net-mvc

partial-views