渲染部分视图以在同一父视图中单击按钮时显示表单控件

Question

我创建了一个表单以提交详细信息，该表单如下所示：

在此表单中，单击添加成员按钮后，我们应该能够通过同一表单再添加一个家庭。我决定在同一父视图中通过局部视图显示表单控件。我们最多可以添加5个家庭详细信息，这意味着我们最多可以单击添加成员按钮4次。

问题是，我无法在同一父视图中渲染局部视图。

父视图：

@model HIS.ViewModels.Household

@{
    ViewBag.Title = "CreateApplication";
}

<h2>CreateApplication</h2>
<h3>Household Member @ViewBag.memberNum  </h3>
@using (Html.BeginForm())
{

@ Html.AntiForgeryToken（）  @ Html.Partial（“ _ Household”）

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="button" value="Add Member" onclick="location.href='@Url.Action("DisplayForm", "HomeController")'" class="btn btn-default" />
        <br /> <br />
        <input type="submit" value="Save and Exit" formaction="ApplicationId" class="btn btn-default" />
    </div>
</div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="button" value="Back" class="btn btn-default" onclick='redirectHome()' />
            <input type="button" value="Next" class="btn btn-default" />
        </div>
    </div>

}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script>
function redirectHome(){
    document.location ='Index';
}
</script>

部分视图：

@model HIS.ViewModels.Household

<div class="form-horizontal">

    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div>
        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

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

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

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

        <div class="form-group" id="divCont">
            @Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.RadioButtonFor(m => m.Gender, "Male")
                @Html.Label("Male")
                @Html.RadioButtonFor(m => m.Gender, "Female")
                @Html.Label("Female")
                @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

</div>

请建议如何使用局部视图实现此目的。建议其他方式。

谢谢。