Llamar a una Ventana Modal desde una vista parcial

publicado por: Anonymous

Tengo una vista parcial en donde listo ciertos datos en forma de una tabla, quisiera tener por fila un botón de editar, pero no quiero que me lance a una nueva venta, sino que estos campos se puedan editar en un modal, pero honestamente no sé cómo hacer esto.

Parte de mi vista parcial, en donde tengo el boton de editar es esto.

<tbody>
@foreach (var item in Model)
{
    <td>
      <button class="btn btn-primary edit-radicado" data-id="@item.NumeroRecepcion">
              <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
      </button>

        <a href="@Url.Action("Details", "Estadistica", new {recepcion = item.NumeroRecepcion})" class="btn btn-default">
            <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
        </a>
    </td>


    <td>
        @Html.DisplayFor(modelItem => item.FechaAudiria)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.UsuarioRevision)
    </td>

    <td>
        @Html.DisplayFor(modelItem => item.UnidadesSoportadas)
    </td>
    <td>
        @Html.DisplayFor(modmodelItemel => item.Devoluciones)
    </td>

}

Luego tengo un div donde deberia inserta el contenido de la vista parcial “Editar”

<div class="modal hide fade in" id="edit-person">
    <div id="edit-person-container"></div>
</div>

El js que tengo en el momento para llamar a la vista parcial “Editar” es este.

 $(".edit-radicado").click(function () {
            var id = $(this).attr("data-id");
            $.ajax({
                url: '/Estadistica/Edit',
                type: 'GET',
                data: { recepcion: id },
                success: function (data) {
                    alert(data);
                    //$(".edit-person-container").html(data);
                    $(".edit-person-container").load(data);
                    $(".edit-person").modal('show');
                }
            });
        });

Y la vista parcial Editar es esta.

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>

</div>

Ahora, lo que no entiendo es por qué no me dibuja (muestra) el contenido que trae en el ajax en la div. De ante mano muchas gracias por la ayuda

solución

Para cargar un modal de forma dinámica hay dos formas:

  1. Cargar el modal de manera remota

    <a data-toggle="modal" data-target="#myModal" href="@Url.Action("Edit","Estadistica")" class="btn btn-primary edit-radicado" data-id="@item.NumeroRecepcion">
      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
    </a>
    

    esto implica, que tu vista debe tener el formato del modal

    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      Todo el contenido aquí del modal
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
    
  2. La siguiente forma es usando ajax:

    • Tener un contenedor en el cual se va a cargar el modal

      <div class="modal" tabindex="-1" role="dialog" id="myModal"></div>
      
    • Detectar el click del boton(tal cual lo tienes en tu pregunta)

      //cargando la vista por una peticion post usando .load()
      $('#ElemPadre').on('click', '#ElemBoton', function(){
        var id = $(this).data('data-id');
        $('#myModal').load('@Url.Action("Edit","Estadistica") ?recepcion=' + id + '', function (){
          //Aquí podemos cargar o llamar las librerias que se puedan usar en el modal.
      
          //haciendo visible el modal después de cargar
          $('#myModal').modal('show');
        });
      })
      
      //cargando la vista por una peticion post usando .ajax()
      $('#ElemPadre').on('click', '#ElemBoton', function(){
        let valorId = $(this).data('id');
        $.ajax({
          url: '@Url.Action("Edit","Estadistica")',
          type: 'POST',
          data: { recepcion: id },
          success: function(data){
            $('#myModal').html(data);
            $('#myModal').modal('show');
          },
          error: function(xmlResponse){
            alert("Error en la solicitud del modal")
          }
        });
      })
      
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *