c# – Pass an object to a Bootstrap modal

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