【问题标题】：Saving multiple partial views from one main page从一个主页保存多个部分视图
【发布时间】：2014-07-10 10:35:59
【问题描述】：

这是我的要求：

我正在设计一个页面来将车辆添加到数据库中：

普通车辆信息[型号-库存]

其他一些功能 [Model - IList]

这是我的 index.cshtml 页面

@model Model.ViewModel.VehicleViewModel

<div>
    <div class='col-md-12'>
        <div class="form-group">
            <input id="mainFormSubmit" type="button" value="Save" class="btn btn-default" />
        </div>
    </div>

    @{Html.RenderPartial("~/Views/Shared/_InventoryPartial.cshtml", Model.InventoryVM);}
    @{Html.RenderPartial("~/Views/Shared/_StandardFeaturePartial.cshtml", Model.StandardFeatures);}

</div>


<script type="text/javascript">
    $('#mainFormSubmit').click(function () {
        $('#InventoryForm').submit();
        $("#StandardFeatureForm").submit();
    });
</script>

这是我的视图模型类

public class VehicleViewModel
    {
        public InventoryViewModel InventoryVM { get; set; }
        public IList<StandardFeature> StandardFeatures { get; set; }
    }

库存局部视图 [_InventoryPartial.cshtml]

@model Model.ViewModel.InventoryViewModel

@{
    var options = new AjaxOptions() { HttpMethod = "Post" };
}

<div class="container">
    <div class="row">
        <div class="col-md-12">

            @using (Ajax.BeginForm("InventorySave", "AddVehicle", options, new { id = "InventoryForm" }))
            {
                <fieldset>
                <legend>Inventory Info</legend>

                    <div class='col-md-6'>
                        <!-- VIN input-->
                        <div class="form-group">
                           @Html.LabelFor(x => x.VIN, new { @class = "col-md-4 control-label" })
                            <div class="col-md-7">
                                @Html.TextBoxFor(x => x.VIN, new { @class = "form-control", @placeholder = "VIN" })
                            </div>
                        </div>
                    </div>
                </fieldset>
            }

标准功能局部视图 [_StandardFeaturePartial.cshtml]

@model IEnumerable<Model.DomainModel.StandardFeature>

@{
    var options = new AjaxOptions() { HttpMethod = "Post" };
}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            @using (Ajax.BeginForm("StandardFeatureSave", "AddVehicle", options, new { id = "StandardFeatureForm" }))
            {

当我点击索引页保存按钮时，只有

$('#InventoryForm').submit(); $("#StandardFeatureForm").submit();

最后一个(StandardFeatureForm)正在执行。

请让我知道此过程是否正确，以及此问题的原因。

【问题讨论】：

标签： ajax asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

您不应两次调用提交方法。根据浏览器的不同，您可能会遇到不同的问题：

表单提交导致浏览器导航到表单操作和提交第一个可能会阻止提交第二个
浏览器可以检测到有两个请求并丢弃首先提交。

在您的情况下，将两个部分视图包装在一个独特的表单中会更容易。

@using (Ajax.BeginForm("InventorySave", "AddVehicle", FormMethod.Post, new { id = "InventoryForm" }))
{
    @{Html.RenderPartial("~/Views/Shared/_InventoryPartial.cshtml", Model.InventoryVM);}
    @{Html.RenderPartial("~/Views/Shared/_StandardFeaturePartial.cshtml", Model.StandardFeatures);}
}

但是，当部分视图呈现时，它们不会为您要使用的较大的 modelModel.ViewModel.VehicleViewModel 生成正确的名称属性：

public void InventorySave(VehicleViewModel vehicleViewModel)         {}

在这种情况下，您应该使用 EditorTempmlate 而不是局部视图。从您的部分观点来看，这很简单，这篇文章应该对您有所帮助：Post a form with multiple partial views

基本上，将您的部分拖到文件夹 ~/Shared/EditorTemplates/ 并重命名它们以匹配模型名称它们是编辑器模板为。

最后是这样的：

@model Model.ViewModel.VehicleViewModel

@using (Html.BeginForm("InventorySave", "AddVehicle", FormMethod.Post, new { id = "InventoryForm" }))
{
   @Html.EditorFor(m => m.InventoryVM);
   @Html.EditorFor(m => m.StandardFeatures});
}

【讨论】：

我试过了，这很有意义——但是为什么我收到的模型是 null public void InventorySave(VehicleViewModel vehicleViewModel) {}
这是另一个问题。当局部视图呈现时，它们不会为较大的模型生成正确的名称属性。我更新了帖子。
我就是这样做的..它不工作..页面变成空白
没有错误？您是否使用浏览器开发人员工具检查了网络流量？（http错误？）尝试使用“常规”帖子而不是示例中的ajax：Html.BeginForm ...

【解决方案2】：

Ajax.BeginForm 助手已经有一个与之关联的提交事件，它创建了一个 Ajax POST 请求。当您使用$('#InventoryForm').submit(); 手动提交表单时，您同时调用了可能产生奇怪副作用的提交事件。

有几种方法可以解决这个问题。这是一种解决方案

使用 Html.BeingForm 帮助器将您的表单更改为常规 HTML 表单。

修改脚本以创建 ajax 请求并使用表单数据

$('#InventoryForm').submit(function(e) {
    e.preventDefault();
    $.post($(this).attr("action"), $(this).serialize(), function(r) {

       //Do something

    });
});

$('#StandardFeatureForm').submit(function(e) {
    e.preventDefault();
    $.post($(this).attr("action"), $(this).serialize(), function(r) {

       //Do something

    });
});

希望对你有帮助

【讨论】：