这是我的index.cshtml页面

Question

这是我的要求：

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

正常车辆信息[型号 - 库存]

其他一些功能[型号 - 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" }))
            {

当我点击索引页面SAVE按钮时，只有

$（＆＃39;＃InventoryForm＆＃39）。提交（）; $（＆＃34;＃StandardFeatureForm＆＃34）。提交（）;

最后一个（StandardFeatureForm）正在执行。

如果此过程正确，请告知我们，这可能是导致此问题的原因。

Answer 1

您不应该两次调用submit方法。根据浏览器的不同，您可能面临不同的问题：

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

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

@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});
}

Answer 2

Ajax.BeginForm帮助器已经有一个与之关联的submit事件，它创建了一个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

    });
});

希望这有帮助

从一个主页面保存多个部分视图

这是我的index.cshtml页面

这是我的视图模型类

清单部分视图[_InventoryPartial.cshtml]

2 个答案: