Question:
I need to pass an object from the database to a modal when I open it to show the object's information.
Is it possible to do that? follows the cshtml of the view in which the modal button is called, it opens correctly but I can't pass the object's information to show in it.
@foreach (var item in Model)
{
<div class="feature-box col-sm-2">
<ul class="list-group" >
<li class="list-group-item list-group-item-success">
<h5><strong> Sala: @Html.DisplayFor(modelItem => item.Nome)</strong></h5>
<button id="btnReservar" type="button" class="btn btn-default navbar-btn" data-toggle="modal" data-target="#mySala">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Reservar
</button>
</li>
</ul>
</div>
}
My Modal defined, still without the information.
<div id ="mySala" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Sala</h4>
</div>
<div class="modal-body"><p>Insereir as informações …</p></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
How can I pass the item object as I use it on the button, in :
<h5><strong> Sala: @Html.DisplayFor(modelItem => item.Nome)</strong></h5>
Answer:
I can see 2 paths you can follow:
1 – Use the HTML5 data attribute to pass the data to the modal, via JSON, as ex. data-meu-atributo="{valor:1, valor2:2}
.
2 – Use an Ajax call in the modal's open
event callback, as in eg:
$('#myModal').on('show.bs.modal', function (e) {
/*chamada ajax aqui ..*/
});