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

2

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 that I clicked. I managed to do it right, follow the code summary:

@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 here I have my modal page (_comentario.cshtml) where I want to have a model data passed via partial.

I can get by right, but Modal is always coming with the last one on the users list. For example, I have a list with users 1, 2, and 3. If I click to display the comment for User 1, it brings me back to 3.

What would be wrong? Is this way of doing it 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>
    
asked by anonymous 27.05.2015 / 02:59

1 answer

3

From what I understand, all modes have the following construct:

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

That is, all modes have the same id .

id in div is an attribute that must be unique, other than class , where several div s can be of the same class . The ideal would be to derive divs to id s unique, as 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" ...
    
29.05.2015 / 01:27