在MVC5中提交时,窗体的模态窗口不会关闭

时间:2018-05-21 20:16:18

标签: javascript jquery asp.net-mvc forms modal-dialog

主视图中有一个模态形式,我用以下按钮调用:

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

modal

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

<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中你有:

Bundle

此表单在我的控制器上调用POST方法..

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

当我点击表单的提交时出现问题,即使在我的post方法中放置一个断点,它也不会隐藏这个模态窗口

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

2 个答案:

答案 0 :(得分: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);
}

您的模态应该关闭(如果您按照评论中的建议修改成功功能)。

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

答案 1 :(得分:0)

假设您正在使用Bootstrap,我认为您的语法已关闭......应该是这样的:

library(tidyverse)
map(unique(a) %>% setNames(.,.), ~which(.x == a))