Pass an object to Modal

Question

Pass an object to Modal

Navigation

#1 by (1 votes)

1

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

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 the user clicks on tr I want to open a modal that is in partialView

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

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

However, the Modal appears on the page itself, without being modal .

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

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

If anyone knows how to do this, I'll be grateful.

c# asp.net twitter-bootstrap asp.net-mvc

asked by anonymous 08.09.2017 / 15:43

1 answer

Semantic-ui, checkbox with no action on form Problem with ng-checked AngularJS! [closed]

score 1 · Accepted Answer

In the page where you want to call modal, leave only the initial modal tag

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

Already in the PartialView _DetalHead put all the rest of the modal code

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

In das html put an attribute to load the data

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

In the page call, you can do it 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 treat the data or simply load it

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