我需要创建一个View，我可以在其中添加用户输入的其他表单。该表单有几个下拉列表。我正在尝试在用户单击“添加新”按钮时添加另一个表单，但我无法弄清楚如何执行此操作以及如何在部分视图中绑定下拉列表。
以下是主视图中的代码：
@using (Html.BeginForm())
{
<form class="autoWidth">
<h4 class="hr">
<a class="btn btn-danger icon-subtract sm btn-xs" data-nodrag ng-click="remove(this)"></a>
</h4>
<div class="">
<span class="inline-block">
@Html.LabelFor(model => model.LoanClasses, new { @class = "control-label" })
@Html.DropDownListFor(model => model.SelectedLoanClass, Model.LoanClasses, new { @class = "inputROW" })
</span>
<span class="inline-block">
@Html.LabelFor(model => model.LoanPurpose, new { @class="control-label"})
@Html.DropDownListFor(model => model.SelectedLoanPurpose, Model.LoanPurpose, new { @class = "inputROW" })
</span>
<span class="inline-block">
@Html.LabelFor(model => model.AmountRequested, new { @class = "control-label" })
@Html.TextBoxFor(model => model.AmountRequested, new{@class="inputROW"})
</span>
<span class="inline-block">
@Html.LabelFor(model => model.RequestedRate, new { @class = "control-label" })
@Html.TextBoxFor(model => model.RequestedRate, new { @class = "inputROW" })
</span>
</div>
<div class="breakup">
<span class="inline-block">
@Html.LabelFor(model => model.LoanTypes, new { @class = "control-label" })
@Html.DropDownListFor(model => model.SelectedLoanType, Model.LoanTypes, new { @class = "inputROW" })
<span id="types-loading-progress" style="display: none;">Please wait...</span>
</span>
<span class="inline-block">
@Html.LabelFor(model => model.RateIndex, new { @class = "control-label" })
@Html.DropDownListFor(model => model.SelectedRateIndex, Model.RateIndex, new { @class = "inputROW" })
</span>
<span class="inline-block">
@Html.LabelFor(model => model.OriginationFeePercentage, new { @class = "control-label" })
@Html.TextBoxFor(model => model.OriginationFeePercentage, new { @class = "inputROW" })
</span>
</div>
<div class="breakup">
<span class="inline-block">
@Html.LabelFor(model => model.VariableRateFloor, new { @class = "control-label" })
@Html.TextBoxFor(model => model.VariableRateFloor, new { @class = "inputROW" })
</span>
<span class="inline-block">
@Html.LabelFor(model => model.VariableRateCeiling, new { @class = "control-label" })
@Html.TextBoxFor(model => model.VariableRateCeiling, new { @class = "inputROW" })
</span>
<span class="inline-block">
@Html.LabelFor(model => model.VariableRateMargin, new { @class = "control-label" })
@Html.TextBoxFor(model => model.VariableRateMargin, new { @class = "inputROW" })
</span>
</div>
<div class="breakup">
<span class="inline-block">
@Html.LabelFor(model => model.PaymentType, new { @class = "control-label" })
@Html.DropDownListFor(model => model.SelectedPaymentType, Model.PaymentType)
</span>
<span class="inline-block">
@Html.LabelFor(model => model.PaymentPeriod, new { @class = "control-label" })
@Html.DropDownListFor(model => model.SelectedPaymentPeriod, Model.PaymentPeriod)
</span>
<span class="inline-block">
@Html.LabelFor(model => model.NumberOfPayments, new { @class = "control-label" })
@Html.TextBoxFor(model => model.NumberOfPayments, new { @class = "inputROW" })
</span>
<span class="inline-block">
@Html.LabelFor(model => model.AmortizationTerm, new { @class = "control-label" })
@Html.TextBoxFor(model => model.AmortizationTerm, new { @class = "inputROW" })
</span>
</div>
</form>
}
<div id="newrow">
<div><input id="addBtn" type="button" value="Add New" /></div>
</div>
<script>
$("#addBtn").on("click", function () {
$.get('@Url.Action("AddNewRow")', function () {
$('#newrow');
});
});
</script>
<script type="text/javascript">
$(function () {
$("#SelectedLoanClass").change(function () {
var selectedItem = $(this).val();
var ddlTypes = $("#SelectedLoanType");
var typesProgress = $("#types-loading-progress");
typesProgress.show();
$.ajax({
cache: false,
type: "GET",
url: "@(Url.RouteUrl("GetLoanTypesByClass"))",
data: { "LoanClassId": selectedItem },
success: function (data) {
ddlTypes.html('');
$.each(data, function (id, option) {
ddlTypes.append($('<option></option>').val(option.id).html(option.name));
});
typesProgress.hide();
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Failed to retrieve types.');
typesProgress.hide();
}
});
});
});
</script>
部分视图在@ Html.BeginForm {}之间具有与主视图完全相同的代码（它应该是相同的形式）。
以下是我的控制器的代码。 “新”方法填充主视图：
[HttpGet]
[Route("New")]
public async Task<ActionResult> New()
{
var loanClasses = await GetLoanClasses();
var loanTypes = await GetLoanTypes();
var loanPurposes = await GetLoanPurposes();
var rateIndex = await GetRateIndex();
var paymentPeriod = GetPaymentPeriodList();
var paymentTypes = await GetPaymentTypes();
var model = new LoanRequestRowViewModel();
model.LoanClasses.Add(new SelectListItem {Text = "-Please Select-", Value ="-1"});
foreach(var _class in loanClasses)
{
model.LoanClasses.Add(new SelectListItem()
{
Text = _class.Text.ToString(),
Value = _class.Value.ToString()
});
}
model.LoanTypes.Add(new SelectListItem { Text = "-Please Select-", Value = "-1" });
foreach(var _type in loanTypes)
{
model.LoanTypes.Add(new SelectListItem()
{
Text = _type.Text.ToString(),
Value = _type.Value.ToString()
});
}
model.LoanPurpose.Add(new SelectListItem { Text = "-Please Select-", Value = "-1" });
foreach(var purpose in loanPurposes)
{
model.LoanPurpose.Add(new SelectListItem()
{
Value = purpose.Value.ToString(),
Text = purpose.Text.ToString()
});
}
model.RateIndex.Add(new SelectListItem {Text ="-Please Select-", Value = "-1"});
foreach (var index in rateIndex)
{
model.RateIndex.Add(new SelectListItem()
{
Value = index.Value.ToString(),
Text = index.Text.ToString()
});
}
foreach(var period in paymentPeriod)
{
model.PaymentPeriod.Add(new SelectListItem()
{
Value = period.Value.ToString(),
Text = period.Text.ToString()
});
}
model.PaymentType.Add(new SelectListItem{Text="-Please Select-", Value ="-1"});
foreach(var paytype in paymentTypes)
{
model.PaymentType.Add(new SelectListItem()
{
Value = paytype.Value.ToString(),
Text = paytype.Text.ToString()
});
}
return View(model);
}
我试图使用以下内容添加部分视图。 View确实尝试加载（我在脚本中有不同的代码，但它仍然是不正确的），但是当它试图在部分上呈现下拉列表时，它不断抛出“对象未设置为实例...”。因此，我有两个问题，渲染部分单击Add Button，并在渲染部分时将部分下拉列表绑定。
[HttpGet]
[Route("Create")]
public ActionResult AddNewRow()
{
return PartialView("_newLoanRequest");
}
非常感谢任何帮助！
我意识到我没有很好地解释这一点，所以结果应该是这样的：
Loan Request 1
Loan Class Loan Purpose Requested Amount, etc. etc.
Loan Type Rate Index Origination Fee, etc. etc.
Loan Request 2
Loan Class Loan Purpose Requested Amount, etc. etc.
Loan Type Rate Index Origination Fee, etc. etc.
Loan Request 3
Loan Class Loan Purpose Requested Amount, etc. etc.
Loan Type Rate Index Origination Fee, etc. etc.
我试图使用局部视图继续呈现新的空白贷款请求。他们希望每个人都能像上面那样显示出来。如果有更好的方法来达到预期的效果，那么任何指导都会受到赞赏！