我将视图页面名称作为建筑物。在“添加垂直建筑物”的每次点击上,javascript都会呈现部分视图。最后,我们有一个提交按钮,用于提交视图模型为null的表单。
能帮我一下吗?我尝试了所有可能的方法来获取要发布的数据,但无法获取。
buidling.cshtml
@model BCPortal.Dto.BuildingsViewModel
......
@using (Html.BeginForm("Index", "Buildings", FormMethod.Post, new { id = "BuildingsSubmit" }))
{
<div class="rs-fe"></div>
<div class="row">
<div class="small-12 column">
<div class="small-6 column">
<h2>@Messages.Building_Details</h2>
</div>
<div class="small-3 column">
<a vertical-building>Add a Vertical Building</a>
</div>
<div class="small-3 column">
<a horizontal-building>Add a Horizontal Building</a>
</div>
</div>
</div>
var index = 0;
<div id="BuildingsMainDiv">
@foreach (var item in Model.VerticalBuildings)
{
var divid = "buildingDiv" + index;
<div id="@divid">
@{
Html.RenderPartial("VerticalBuilding", item, new ViewDataDictionary(ViewData)
{
TemplateInfo = new TemplateInfo()
{ HtmlFieldPrefix = "VerticalBuildings" + "[" + index + "]" }
});
}
</div>
}
</div>
<div>
<a class="rs-btn" form-submit>Next</a>
</div>
}
<script>
$('[form-submit]').click(function () {
if ($('#BuildingsSubmit').valid()){
var form = $("form").serialize();
$('#BuildingsSubmit').submit();
}
});
</script>
VerticalBuilding.cshtml
@model BCPortal.Dto.VerticalBuildingViewModel
<div class="row">
<div class="small-12 medium-6 columns">
<label>
<span class="rs-label">@Html.DisplayNameFor(model => model.BuildingName)</span>
@Html.EditorFor(model => model.BuildingName)
</label>
</div>
</div>
<div class="row">
<div class="small-12 medium-6 columns">
<label>
<span class="rs-label">@Html.DisplayNameFor(model => model.ResidentialUnits)</span>
@Html.EditorFor(model => model.ResidentialUnits)
</label>
</div>
<div class="small-12 medium-3 columns">
<div class="jsrs-resizerContainer">
<label>
<span class="rs-label jsrs-resizerPart">
@Html.DisplayNameFor(model => model.CommercialUnits)
</span>
@Html.EditorFor(model => model.CommercialUnits)
</label>
</div>
</div>
<div class="small-12 medium-3 columns">
<div class="jsrs-resizerContainer">
<label>
<span class="rs-label jsrs-resizerPart">
@Html.DisplayNameFor(model => model.TechnicalUnits)
</span>
@Html.EditorFor(model => model.TechnicalUnits)
</label>
</div>
</div>
</div>
脚本文件:
$('[vertical-building]').click(function (e) {
var $div = $("div[id^='VerticalBuildings']:last");
var num = {
id: 0
};
if ($div.prop("id") != undefined)
{
num.id = parseInt($div.prop("id").match(/\d+/g), 10) + 1;
}
e.preventDefault();
$.ajax({
type: 'GET',
url: '../Buildings/AddVerticalBuilding',
data: num,
datatype: "html",
cache: false,
success: function (data) {
var divid = "VerticalBuildings[" + num.id + "]";
var htmldiv = "<div id=" + divid + ">" + data + "</div>";
var Maindiv = $("div[id^='BuildingsMainDiv']").prop("id");
$('#' + Maindiv).append(htmldiv);
var form = $("form").removeData("validator").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(form);
},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
});
控制器:
[HttpPost]
public ActionResult Index(BuildingsViewModel buildingViewData)
{
return this.View(buildingViewData);
}
ViewModel:
public class BuildingsViewModel
{
/// <summary>
/// Gets or sets name
/// </summary>
public List<VerticalBuildingViewModel> VerticalBuildings { get; set; }
}
buildingViewData.VerticalBuildings为空