How to call a partial view within a Modal using Jquery

Question

I have a list of products and you want to display a modal window to edit the parameters of these products

for this you have in each row a button that calls the modal ....

my Edit button in Index.cshtml:

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

 </td>

my script in Index.cshtml:

<script>
    var EditarProducto = function (codigoProducto) {

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

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

my modal Bootstrap in Index view:

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

my ActionResult in controller:

 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);
        }

and my partial view that receives the model sent from the controller:

@model Dominio.Producto

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

I have the partial view inside the folder along with the Index.cshtml view

Also I have referenced the corresponding scripts, what is happening? What is missing? It is the first time that I work with partial and modal views ... am I doing it correctly?

Expected behavior: when you click on the edit button, the modal opens

Behavior obtained: although when clicking on the edit button it enters the action of my controller, it does not show the modal

any help for me?

Answer 1

Instead of this:

<script>
    var EditarProducto = function (codigoProducto) {

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

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

Can you try this:

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