Boostrap模式窗体不在服务器上执行POST方法

时间:2018-05-31 01:46:01

标签: javascript ajax asp.net-mvc forms bootstrap-modal

我有一个调用模态表格的按钮

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

模态以这种方式呈现

Modal

在那里可以,我不得不说上面的工作在你本地工作时(localhost),模态形式是这样的:

<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" />
                       <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="" />
                    <br />  

                </form>
            </div>            
             <div class="modal-footer">
                <input type="button" value="Agregar Material" class="btn btn-primary" id="btnSubmit" />
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>                
             </div>
         </div>
    </div>

提交给我的模态时执行的javascript代码是:

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

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

                $.ajax({
                    type: "POST",
                    url: "/Despachos/AgregarProducto",
                    data: myformdata,
                    success: function () {                     
                        $("#agregarProducto").modal("hide");
                        window.location.href = '@Url.Action("Create", "Despachos")';
                    },
                    error: function (xhr, text, error) {
                    console.log(xhr.status + " => " + error);
                    }
                })
            })
        })
    </script>

此代码在我的控制器中调用名为AddProduct的方法:

   public JsonResult AgregarProducto(int codigoproducto, int? cantidad)
        {
            //CONSULTO LOS PRODUCTOS QUE EXISTEN EN EL DETALLE
            var despachotmp = db.DespachoDetalleTmps.Where(o => o.Email == User.Identity.Name && o.Kn_CodigoProducto == codigoproducto).FirstOrDefault();

            if (despachotmp == null)
            {
                //BUSCO EL PRODUCTO
                var producto = db.Productoes.Find(codigoproducto);

                if (producto == null)
                {
                    ViewBag.Error = "Debe Seleccionar un Material Válido";
                    return Json(false);
                }

                if (cantidad == null)
                {
                    despachotmp = new DespachoDetalleTmp
                    {
                        v_Nombre = producto.v_Nombre,
                        Kn_CodigoProducto = producto.Kn_CodigoProducto,
                        Email = User.Identity.Name,
                        d_Cantidad = 1,
                    };

                    db.DespachoDetalleTmps.Add(despachotmp);
                }

                if (cantidad != null)
                {
                    despachotmp = new DespachoDetalleTmp
                    {
                        v_Nombre = producto.v_Nombre,
                        Kn_CodigoProducto = producto.Kn_CodigoProducto,
                        Email = User.Identity.Name,
                        d_Cantidad = Convert.ToInt16(cantidad),
                    };
                    db.DespachoDetalleTmps.Add(despachotmp);                   
                }
            }

            else
            {
                if (cantidad == null)
                {
                    despachotmp.d_Cantidad += 1;
                    db.Entry(despachotmp).State = EntityState.Modified;                   
                }

                if (cantidad != null)
                {
                    despachotmp.d_Cantidad += Convert.ToInt16(cantidad);
                    db.Entry(despachotmp).State = EntityState.Modified;                   
                }
            }

            db.SaveChanges();

            var jsonResult = "Json Result";
            return Json(jsonResult);
        }

以上所有都在本地工作,但当我在我的网络服务器上发布解决方案时,会显示此表单,但是当我点击提交时它不会执行(它没有做任何事情!),这是我第一次使用boostrap方式,我做得对吗?发生什么事情,当我的服务器上发布我的解决方案时,这个表单停止工作?

对我有任何帮助吗?

1 个答案:

答案 0 :(得分:1)

网址中的路径可能存在问题,服务器中的"/Despachos/AgregarProducto"可能与"/Despachos/AgregarProducto"的目录不同。尝试在'@Url.Action("AgregarProducto", "Despachos")'网址

中使用ajax
 <script>
        $(document).ready(function () {
            $("#btnSubmit").click(function () {

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

                $.ajax({
                    type: "POST",
                    url: '@Url.Action("AgregarProducto", "Despachos")',
                    data: myformdata,
                    success: function () {                     
                        $("#agregarProducto").modal("hide");
                        window.location.href = '@Url.Action("Create", "Despachos")';
                    },
                    error: function (xhr, text, error) {
                    console.log(xhr.status + " => " + error);
                    }
                })
            })
        })
    </script>