时间戳

首页 > 解决方案 > 如何在一个表单中一键提交多个部分表单？

c# - 如何在一个表单中一键提交多个部分表单？

问题描述

我有多个视图并将它们全部呈现在另一个视图中。现在，在用户完成输入后，我想一键提交所有 4 个视图。

我用谷歌搜索了很多，但到目前为止我发现的所有东西都与我想做的完全相反（分别提交多个表格）。

这是我现在拥有的：

@using Kunden.Models

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

    <h2>Index</h2>
    <div class="row">


        @using (Html.BeginForm("Create", "Firma", FormMethod.Post, new { id = "firma" })){
            @RenderPage("~/Views/Firma/Create.cshtml")
        }
    </div>
    <div class="col-md-6">

        @using (Html.BeginForm("Create", "Adresse", FormMethod.Post, new { id = "adresse" }))
        {
            @RenderPage("~/Views/Adresse/Create.cshtml")
        }
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        @using (Html.BeginForm("Create", "Person", FormMethod.Post, new { id = "person" }))
        {
            @RenderPage("~/Views/Person/Create.cshtml")
        }
    </div>
    <div class="col-md-6">
        @using (Html.BeginForm("Create", "Kontodaten", FormMethod.Post, new { id = "kontodaten" }))
        {
            @RenderPage("~/Views/Kontodaten/Create.cshtml")
        }

    </div>
</div>

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" name="commandName" value="Create" class="btn btn-default" 
               onclick="document.getElementById('adresse').submit();
                        document.getElementById('person').submit();
                        document.getElementById('kontodaten').submit();
                        document.getElementById('firma').submit();
                         " />
    </div>
</div>

我的要求是这样的：

[HttpPost]
        public ActionResult Create(Person person)
        {
            phentitis.Person.Add(person);
            phentitis.SaveChanges();

            return new EmptyResult();
        }

我希望保存所有数据，但只有一个提交通过（这是第三个？！这对我来说真的很困惑）

标签： c#asp.netrazor

解决方案

您需要 Ajax 发送多个表单，否则只有第一次提交到服务器会通过。您可以使用 Ajax 在 Javascript 函数中单独提交每个表单。首先，将您的 Html.BeginForms 切换为 Ajax.BeginForms，将它们包装在唯一的 div 中，将您的按钮更改为 Javascript 函数调用，然后添加 Javascript。

@using Kunden.Models

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
<div class="row">
    <div id="firmaDiv">
        @using (Ajax.BeginForm("Create", "Firma", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "firmaDiv" }, htmlAttributes: new { id = "firma" }))
        {
            @RenderPage("~/Views/Firma/Create.cshtml")
        }
    </div>
</div>
<div class="col-md-6">
    <div id="addresseDiv">
        @using (Ajax.BeginForm("Create", "Adresse", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "addresseDiv" }, htmlAttributes: new { id = "addresse" }))
        {
            @RenderPage("~/Views/Adresse/Create.cshtml")
        }
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div id="personDiv">
            @using (Ajax.BeginForm("Create", "Person", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "personDiv" }, htmlAttributes: new { id = "person" }))
            {
                @RenderPage("~/Views/Person/Create.cshtml")
            }
        </div>
    </div>
    <div class="col-md-6">
        <div id="kontoDiv">
            @using (Ajax.BeginForm("Create", "Kontodaten", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "kontoDiv" }, htmlAttributes: new { id = "kontodaten" }))
            {
                @RenderPage("~/Views/Kontodaten/Create.cshtml")
            }
        </div>
    </div>
</div>

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="button" name="commandName" value="Create" class="btn btn-default" onclick="submitForms()" />
    </div>
</div>

<script type="text/javascript">
    function submitForms() {
        document.getElementById('firma').submit();
        document.getElementById('adresse').submit();
        document.getElementById('person').submit();
        document.getElementById('kontodaten').submit();
    }
</script>

在您的控制器中，表单发布后，返回带有成功或失败消息的 PartialView。

if(successful)
{
    return PartialView("Success");
}
else
{
    return PartialView("Fail");
}

推荐阅读