Pass an object to Modal

Question

I have a Foreach in a table, I need as soon as the user clicks on a row, open a modal with the object data contained in that row.

The Foreach:

     @foreach (PedidoModel pedido in @Model.Entidades)
                {
                    <tr title="Clique para exibir detalhes" style="cursor:pointer" data-toggle="modal" data-target="#myModal">
                        <td style="text-align:center"><input type="checkbox"></td>
                        <td>@pedido.Pessoa.Nome</td>
                        <td>@pedido.DataEntrega</td>
                        <td></td>
                        <td>R$ @pedido.ValorTotal</td>
                        <td>@pedido.Endereco</td>
                        <td>
                            <span class="label label-success">@pedido.Status</span>
                        </td>
                    </tr>
                }

When I will click on tr I intend to open a modal that is in a partialView

I tried to put the partialView within the foreach and pass the model on the call, like this :

 @Html.RenderPartial("~/Areas/Unidade/Views/Pedidos/_DetalhePedido.cshtml",pedido)

But the Modal appears on the page itself, other than in modal.

Before I had to pass the information to modal I opened it like this:

 $("#myModal").on("show", function () {
    $("body").addClass("modal-open");
}).on("hidden", function () {
    $("body").removeClass("modal-open");
});

If anyone knows a way to do that I’d be grateful.

Answer 1

On the page where you want to call the modal, just leave the initial modal tag

<div class="modal" id="abrir"></div>

Ja na Partialview _Detailsput all the rest of the modal code

<div class="modal-dialog">
  <div class="modal-content">
     ...
  </div>
</div>

In the html of the tr put an attribute to load the data

<tr class="trClick" data-pedido="@pedido">
</tr> 

On the page call, you can do by script

$(document).ready(function(){
   $(".trClick").click(function(){
        var DadosPedido = $(this).attr("data-pedido");
        $("#abrir").load("/Pedidos/_DetalhePedido/" + DadosPedido);
        $("#abrir").modal();
   })
})

In the modal controller, you can process the data or simply load it

public ActionResult __DetalhePedido(Pedido dados)
{
  return PartialView(Dados);
}