Как вызвать частичное представление в Модале, используя Jquery

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

Вам не нужно писать jquery для вызова модального всплывающего окна, вместо этого вы можете использовать атрибуты data-toggle и data-target.

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

Answer 2

Вместо этого:

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