在 MVC5 中提交时，带有表单的模态窗口不会关闭

Posted 2023-05-09

【中文标题】在 MVC5 中提交时，带有表单的模态窗口不会关闭

【英文标题】：Modal window with form does not close when submit in MVC5

【发布时间】：2018-10-31 12:50:22

【问题描述】：

主视图中有一个模态表单，我用以下按钮调用它：

 <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#agregarProducto">Agregar Material </a>

我的主视图中模态窗口的代码如下：

<div class="modal fade" id="agregarProducto">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">               
                <h5 class="modal-title">Agregar Material</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-dismissible alert-info">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>Tener en cuenta!</strong> <a> para agregar más de una unidad habilite</a><strong> agregar cantidad.</strong>
                </div>
                <form id="myForm">
                    <label>Agregar Cantidad</label> &nbsp;&nbsp;
                    <input type="checkbox" id="idcheckcantidad" />
                    <br />
                    <input type="text" class="form-control" name="cantidad" id="idcantidad" disabled="disabled" />
                    <br />
                    <label>Codigo Producto</label> &nbsp;&nbsp;
                    <input type="text" class="form-control" name="codigoproducto" id="idcodigoproducto" autofocus="true" />
                </form>
            </div>            
             <div class="modal-footer">
                <input type="submit" value="Agregar Material" class="btn btn-primary" id="btnSubmit" />
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>                
             </div>
         </div>
    </div>
</div>

在我的 html 的头部结构中，我引用了以下内容：

<script type="text/javascript" src="~/Scripts/jquery-1.12.4.min.js"></script>
    <link href="~/Content/bootstrap-superhero.min.css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap.min.js"></script>

我的javascript如下：

 <script>
        $(document).ready(function () 
            $("#btnSubmit").click(function () 

                var myformdata = $("#myForm").serialize();

                $.ajax(
                    type: "POST",
                    url: "/Despachos/AgregarProducto",
                    data: myformdata,
                    success: function ()                      
                        $("#agregarProducto").hide();                       
                    
                )
            )
        )
    </script>

在我的 BundleConfig 中你有：

这个表单在我的控制器上调用一个 POST 方法..

       [HttpPost]
        public ActionResult AgregarProducto(int codigoproducto, int? cantidad)
          
           return View();
        

当我单击表单的提交时出现问题，即使在我的 post 方法中设置断点时，此模式窗口也不会隐藏

为什么我会出现这种行为？这是我第一次使用模态表单，对我有帮助吗？

【参考方案1】：

$.ajax HttpPost 请求期待响应，但您返回的是视图。

如果您将 $.ajax 函数修改为：

$.ajax(
    type: "POST",
    url: "/Despachos/AgregarProducto",
    data: myformdata,
    success: function () 
        $("#agregarProducto").hide();
    ,
    error: function (xhr, text, error) 
        console.log(xhr.status + " => " + error);
    
);

您应该在控制台中看到错误。

如果将AgregarProducto修改为：

[HttpPost]
public ActionResult AgregarProducto(int codigoproducto, int? cantidad)
  
    var jsonResult = "Json Result";
    return Json(jsonResult);

您的模态应该关闭（如果您按照 cmets 中的建议修改成功函数）。

如果你确实想返回一个视图，你需要找到另一种方式；例如，将视图作为来自HttpPost 操作的字符串作为Json 响应的一部分返回，或者在$.ajax success 中设置window.location.href = "Path/To/Controller/For/View";

【讨论】：

您对隐藏模式的回答，但它使屏幕被阻塞和黑暗！真令人头疼！！，在我的控制台中调试时出现以下错误：“XML Parsing Error: no root element found .... Line Number 1, Column 1:” ... 为什么我仍然会出现这种不当行为？ @RickL

我认为这是一个不同的问题 - 可能是由于 html 格式错误（但也可能是其他原因）。你是否包括了 $("#agregarProducto").modal('hide');在 $.ajax 成功函数中关闭模式，因为如果你只使用 .hide() 它可能已经抛出了 html（也许）

【参考方案2】：

假设您使用的是 Bootstrap，我认为您的语法已关闭...应该是这样的：

$("#agregarProducto").modal('hide');

【讨论】：

他的回答无助于解决问题@BYates

你能验证表单实际上是通过 AJAX 成功提交的吗？

如果它被发送，行为很奇怪......在我的网络控制台中我也没有任何错误@BYates

@BYates 显示了正确的语法。 $("#agregarProducto").hide();是隐藏元素的标准 jQuery 方法，它不是用于隐藏引导模式。还要确保您已使用 $("#agregarProducto").modal('show') 显示引导模式。最后，您是否确认您从 ajax 调用中收到了 200 代码？

确保使用 F12 工具查看从服务器返回的状态代码。您可能看不到任何错误，但仍然可能有一些错误，它们已被吞下。