Question

我有一个产品列表，您想要显示一个模态窗口来编辑这些产品的参数

为此你在每一行都有一个调用模态的按钮....

我在Index.cshtml中的编辑按钮：

 <td>
    <a href="#" class="btn btn-outline-warning" onclick="EditarProducto(@item.Kn_CodigoProducto)">Editar </a>

 </td>

我在Index.cshtml中的脚本：

<script>
    var EditarProducto = function (codigoProducto) {

        var url = "/Productoes/EditarProducto?Kn_CodigoProducto="+codigoProducto;

        $("#EditModalBody").load(url, function () {
            $("#myModalEditar").modal("show");
        })
    }
    </script>

我在索引视图中的模态Bootstrap：

 <div class="modal fade" id="myModalEditar">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Editar Producto</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="EditModalBody">

                </div>

            </div>
        </div>
    </div>

我在控制器中的ActionResult：

 public ActionResult EditarProducto (int Kn_CodigoProducto)
        {
            Producto model = new Producto();

            if(Kn_CodigoProducto >= 0)
            {
                var producto = db.Productoes.Where(c => c.Kn_CodigoProducto == Kn_CodigoProducto).FirstOrDefault();

                model.v_Nombre = producto.v_Nombre;              
            }

            return PartialView("_PartialEditar", model);
        }

和我的局部视图，它接收从控制器发送的模型：

@model Dominio.Producto

<div class="jumbotron">
    <label>Esto es una prueba @Model.v_Nombre</label>
</div>

我在文件夹中有部分视图以及Index.cshtml视图

另外我引用了相应的脚本，发生了什么？缺什么？这是我第一次使用部分和模态视图......我正确地做到了吗？

预期行为：当您单击编辑按钮时，模态将打开

获得的行为：虽然点击编辑按钮时它进入我的控制器的动作，但它没有显示模态

对我有任何帮助吗？

Answer 1

而不是：

<script>
    var EditarProducto = function (codigoProducto) {

        var url = "/Productoes/EditarProducto?Kn_CodigoProducto="+codigoProducto;

        $("#EditModalBody").load(url, function () {
            $("#myModalEditar").modal("show");
        })
    }
    </script>

你可以试试这个：

    <script>
      var EditarProducto = function (codigoProducto) {

      var url = "/Productoes/EditarProducto?Kn_CodigoProducto="+codigoProducto;

    $.ajax({
            url: url,
            type: 'GET',            
            success: function (result) {                
                $('#EditModalBody').html(result);  
                $("#myModalEditar").modal("show");                                                 
            },
            error: function (xhr, status) {
                alert(status);
            }
        });
        }
        </script>

Answer 2

您不需要编写jquery来调用模态弹出窗口，而是可以使用数据切换和数据目标属性。

 <a href="#" class="btn btn-outline-warning" data-toggle="modal" data-target="#myModalEditar">Editar </a>

如何使用Jquery在模态中调用局部视图

2 个答案: