Passing an object to a Bootstrap modal

Question

I need to pass a database object to a modal when I open it to display the object 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 cannot pass the information of the object 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 set, 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">&times;</span></button>
                   <h4 class="modal-title">Sala</h4>
                   </div>
                   <div class="modal-body"><p>Insereir as informações &hellip;</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 on the button, on :

     <h5><strong> Sala: @Html.DisplayFor(modelItem => item.Nome)</strong></h5>

Answer 1

I can see two ways you can go:

1 - Use the HTML5 date attribute to pass data to the modal, via JSON, for example. data-meu-atributo="{valor:1, valor2:2}.

2 - Use an Ajax call in the event callback open modal, as in the former:

  $('#myModal').on('show.bs.modal', function (e) {
        /*chamada ajax aqui ..*/
    });