在“提交”按钮上提交多个局部视图会将视图模型设置为null

时间:2019-01-10 15:05:54

标签: c# asp.net-mvc razor

我将视图页面名称作为建筑物。在“添加垂直建筑物”的每次点击上,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为空

0 个答案:

没有答案