Displaying Modal with model passed inside a C# Asp.net MVC foreach

Question

I have a main page containing a list of users. In this list of users I have a button on the side where I will click and display a modal, passing the model of that line I clicked. I managed to do it right, follow the summary code:

@foreach (var item in Model.Usuario)
{
@Html.Partial("_comentario", item)
}

and the button to call the partial

<li><a href="#" data-toggle="modal" data-target="#comentario">Comentário</a></li>

And there I have my modal page (_comentario.cshtml) where inside it I want to have a data of the model passed via partial.

I can pass just right, but Modal is always coming with the last of the list of users. For example, I have a list of users 1, 2 and 3. If I click to display the comment of User 1, it brings me the 3.

What would be wrong? This way of doing is wrong?

The modal code:

<!-- Modal -->
<div class="modal fade" id="comentario" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Adicionar Comentário</h4>
            </div>
            @using (Html.BeginForm("AdicionarComentario", "Usuario", FormMethod.Post, new { @class = "form-horizontal" }))
            {
            <div class="modal-body">        
                <div class="row">
                    <div class="form-group">
                        <div class="col-lg-4">
                           @Model.UsuarioId
                        </div>
                        <div class="col-lg-8">
                            <label>Comentário</label>
                            <input type="text" class="form-control input-sm" id="comentario" name="comentario" placeholder="">
                        </div>
                    </div>
                </div>
            </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            <button type="submit" class="btn btn-primary">Adicionar</button>
        </div>
            }
        </div>
    </div>
</div>

Answer 1

From what I understand, all modals have the following construction:

<!-- Modal -->
<div class="modal fade" id="comentario" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

That is, all modals have the same id.

id in a div is an attribute that needs to be unique, different from class, in which several divcan be of the same class. The ideal would be to derive the divs for idunique s, for example:

<!-- Modal -->
<div class="modal fade" id="comentario1" ...
<div class="modal fade" id="comentario2" ...
<div class="modal fade" id="comentario3" ...
<div class="modal fade" id="comentario4" ...