Call a Modal Window from a partial view

Question

Call a Modal Window from a partial view

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have a partial view where I have certain data in the form of a table, I would like to have an edit button per row, but I do not want to launch a new sale, but these fields can be edited in a modal, but I honestly do not know how to do this.

Part of my partial view, where I have the edit button is this.

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

}

Then I have a div where I should insert the contents of the partial view "Edit"

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

The js that I have at the moment to call the partial view "Edit" is this.

 $(".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');
                }
            });
        });

And the partial view Edit is this.

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

Now, what I do not understand is why I do not draw (show) the content that brings in the ajax in the div. Thank you very much in advance for the help

asp.net-mvc asp.net-mvc-5

asked by jeissoni22 07.06.2017 в 16:10

source

3 answers

1

What you have to do is call a fieldset that contains the edited form and that at the moment of saving, call a javascript that collects the data by means of a json, sends it to the controller and performs the update, and that at the moment to return a response (true), refresh the page, showing the updated data.

This is an example that I am using and it works 100%:

button that calls the modal

<a data-tooltip aria-haspopup="true" href="#Rechazar" class="button has-tip" id="btnRechazar" title="Rechazar">Rechazar</a>

div "modal" that displays the content of the fieldset

<div id="divModalLead" class='reveal-modal' data-reveal aria-hidden="true" role="dialog">
        <a class="close-reveal-modal" aria-label="Close">&#215;</a>
    </div>

Fieldset to be displayed in the modal

<fieldset id="Rechazar" class="panel callout large-12">
    <h4>Modal</h4>
    <hr />
    <div class="row">
        <div class="large-6 columns">
            <div id="otherType" >
                Comentario :

                @Html.TextArea("comentarioR", null, new { cols = "55", rows = "7" })
            </div>
            <ul class="stack-for-small secondary button-group round">
                <li><a href="#" class="button" onclick='(funcion de JS)' >Rechazar Oportunidad</a></li>
            </ul>
        </div>
    </div>
</fieldset>

Scripts

<script>
 $(document).ready(function () {

  $("#Rechazar").fadeOut();    //Oculta el fieldset
}

$("#btnRechazar").click(function (e) {
                e.preventDefault();
                var content = $("#Rechazar").html();
                $('#divModalLead').html('<a class="close-reveal-modal" aria-label="Close">&#215;</a>');
                $('#divModalLead').append(content);
                $('#divModalLead').foundation('reveal', 'open');
            });                  //Funcion que se ejecuta al presionar el boton "Rechazar"
)
</script>

example images:

If you are lost with the Json method to save the data, you tell me and I help you: D

answered by 07.06.2017 в 16:36

0

To start you must put the code where you call the modal inside the same view where you call the Partial as well as the Script where you call it.

<div class="modal fade" id="ModelEditar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog mod" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title text-center" id="myModalLabel"> Editar Persona</h4>
        </div>
        <div id="edit-person-container"></div>
    </div>
</div>

$(document).on("click", ".editar ", function () {
            var id = $(this).attr("id").split("_")[1];
            var url = "@Url.Action("Edit", "Estadistica")/" + id;
            $("#modalEditar").load(url, function () {
                $("#PersonaId").val(id);
            });
        });

The button within the list in the Partial in this way works for you

<a id="[email protected]" data-toggle="modal" data-target="#ModelEditar" class="btn btn-default btn-sm editar" href="javascript:;"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>

In the controller to call the Modal your GET method in this way

  public ActionResult Editar (int id)
    {
        var persona = db.Personas.Find(id);
        return PartialView("_EditarPartial", persona);
    }

Already the Post if you adjust it to your need.

answered by 07.06.2017 в 17:21

Colors in a Scatter Plot with Matplotlib Allow to open a link once

score 1 · Accepted Answer

To load a modal dynamically there are two ways:

Load the modal remotely

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

this implies, that your view should have the format of the 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>

The following way is using ajax:

Have a container in which the modal will be loaded

<div class="modal" tabindex="-1" role="dialog" id="myModal"></div>

Detect the click of the button (as you have it in your question)

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