javascript - Bootstrap 模态表单不在服务器上执行 POST 方法

Question

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

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

此代码在我的 Controller 中调用一个名为 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);
        }

以上所有都在本地工作，但是当我在我的网络服务器上发布解决方案时，会显示此表单，但是当我单击提交时它不会执行(它什么也没做!)，这是我第一次以助推礼仪工作，我做得对吗？在我的服务器上发布我的解决方案时，此表单停止工作是怎么回事？

对我有什么帮助吗？

Answer 1

您的 URL 中的路径可能有问题，服务器中的 "/Despachos/AgregarProducto" 可能与 "/Despachos/AgregarProducto" 的目录不同>。尝试在您的 ajax url

中使用 '@Url.Action("AgregarProducto", "Despachos")'

 <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>