有没有办法用 1 个提交按钮 mvc 提交 3 个表单

Posted 2023-04-13

【中文标题】有没有办法用 1 个提交按钮 mvc 提交 3 个表单

【英文标题】：Is there any way to submit 3 forms with 1 submit button mvc

【发布时间】：2020-04-09 15:22:57

【问题描述】：

我有一个项目，我必须使用一个提交按钮提交 3 种不同的表单

我有一个视图，其中我有三个带有 3 个不同表单的选项卡，我想用一个提交按钮提交所有表单。

提交按钮在第一个表单中。

我正在使用 Asp.net MVC 4

<!-- tabs -->
<div class="sky-tabs ">

    <input type="radio" name="sky-tabs" checked id="sky-tab1" class="sky-tab-content-1">
    <label id="form1" for="sky-tab1"><span><span><i class="fa fa-arrow-down"></i>form1</span></span></label>

    <input type="radio" name="sky-tabs" id="sky-tab2" class="sky-tab-content-2">
        <label for="sky-tab2"><span><span><i class="fa fa-picture-o"></i>form2</span></span></label>

        <input type="radio" name="sky-tabs" id="sky-tab3" class="sky-tab-content-3">
        <label for="sky-tab3"><span><span><i class="fa fa-cogs"></i>form3</span></span></label>

        <input type="radio" name="sky-tabs" id="sky-tab4" class="sky-tab-content-4">
        <label for="sky-tab4"><span><span><i class="fa fa-globe"></i>Newton</span></span></label>

    <ul>

        <li class="sky-tab-content-1">
            @using (html.BeginForm("AddNewClient", "Admin", FormMethod.Post, new  @class = "sky-form", role = "form" ))
            
                @Html.Partial("form1")
            
        </li>

        <li class="sky-tab-content-2">
            @using (Html.BeginForm("AddNewClient", "Admin", FormMethod.Post, new  @class = "sky-form", role = "form" ))
            
                @Html.Partial("Form2")
            
        </li>

        <li class="sky-tab-content-3">
            @using (Html.BeginForm("AddNewClient", "Admin", FormMethod.Post, new  @class = "sky-form", role = "form" ))
            
                @Html.Partial("form3")
            
        </li>

        <li class="sky-tab-content-4">

        </li>

    </ul>

</div>
<!--/ tabs -->

【问题讨论】：

您可以使用 javascript 或 jquery 添加 onclick 函数来提交按钮并在该函数内提交所有表单。这将帮助你***.com/questions/7843355/…

好的，但我如何处理文件。在所有表单中，我都有 2 或 3 个文件要上传到服务器上。

我们提交表单时，所有表单数据都会以同样的方式正常提交。使用 javascript 或 jquery 你只会触发表单提交。

@Tyson this *** 链接可能有用

谢谢我有一个解决方案。所以我所有的 3 个表单都在同一个视图中而不是 3 个表单我制作一个大表单将所有数据发送到相同的操作并将数据保存到数据库。

【参考方案1】：

使用 Jquery 提交表单，下面是示例

HTML

<form id="form1">
    <input>
    <input type="submit" id="submit">
</form>
<form id="form2">
    <input>
</form>

<form id="form3">
    <input>
</form>

Js

<script type="text/javascript">
    $(document).ready(function () 
        $('#form1 #submit').click(function () 
            $('#form1, #form2, #form3').submit();
        );
    );
</script>

记得包含jquery库

【参考方案2】：

这只有在表单设置为通过 ajax 更新时才有可能，否则提交一个会阻止另一个提交。