Update modal content dynamically

Question

I have a table with up to 10 services listed, and each row has a refresh button. By clicking the refresh button, a modal window opens with the data of this line, as well as a form for change.

However, I can’t get the controller to return a partial view by clicking the button and open the modal window with the updated data. I’m using bootstrap for frontend.

Excerpt from the Frontend Code:

<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td><input type="checkbox" class="checkthis" /></td>
            <td>@item.Chave</td>
            <td id="Nome @item.Chave">@item.Nome</td>
            <td>
                <p>
                    <a href="@Url.Action("Atualizar","Servico", new {chave = item.Chave})" class="btn btn-primary btn-xs atualizar" data-title="Edit" data-toggle="modal" data-target="#edit" data-placement="top" rel="tooltip"><span class="glyphicon glyphicon-pencil"></span></a>
                </p>
            </td>
        </tr>
    }
</tbody>

As code above, I need to open a modal at the click with the line service data.

The above code only accesses the controller and returns the partial view, but how can I open a modal from this? It is possible with Ajax?

Answer 1

It is possible. By the way, there is an implementation in Codeplex where this is done as an extension:

https://mvcmodaldialog.codeplex.com

With it, you can put a link to your Modal like this:

@Ajax.ModalDialogActionLink("Clique aqui para abrir seu modal", "Dialog1", "Dialog1")

The full explanation is here.

If you need me to pack this as a Nuget, just let me know that I update the response here with the package.