MVC 4 Bootstrap Modal Edit \ Detail

Question

Hoping someone might be able to help me with something I am experimenting with in MVC 4 using bootstrap.

I have a strongly-typed index view which displays items in a table along with edit and delete action icons in each line.

@model IEnumerable<Models.EquipmentClass>

....

@foreach (var item in Model)
{
<tbody>
    <tr>
        <td>
            @item.ClassId
        </td>
        <td>
            @item.ClassName
        </td>
        <td>
            <a [email protected]("Edit", "EquipmentClass", new { id = item.ClassId })>
                <i class="icon-edit"></i>
            </a>
            <a [email protected]("Delete", "EquipmentClass", new { id = item.ClassId })>
                <i class="icon-trash"></i>
            </a>
        </td>
    </tr>
</tbody>
} <!-- foreach -->

The EquipmentClass controller returns the Edit view for the selected item based on the id. All great and as expected at this point

public ViewResult Edit(int id)
{
    return View(equipmentclassRepository.Find(id));
}

What I would like to know is how to open the edit form in a bootstrap modal dialog.

I could try and substitute the edit action in the table with the following and then have a modal div at the bottom of the view but how do I pass in the ID of the selected item and which html helper should I use in the modal section?

<!-- replaced table action -->
<a class="btn pull-right" data-toggle="modal" href="#myModal" >Details</a>

....

<!-- modal div -->
<div class="modal hide fade in" id="myModal" )>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        @Html.Partial("Edit")
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

I'd greatly appreciate any advice, many thanks

Answer 1

I think that I have a solution to your problem. To make your MVC application work as you want it to you should make some changes to the code you provided:

1. Add a div representing a modal for editing an item at the bottom of your layout page:

<div id="editModalContainerID" class="modal hide fade" data-url='@Url.Action("Edit", "EquipmentClass")'> 
<div id="editModalBodyID"></div> 
</div>

Notice that this modal is strictly connected to the controller action responsible for editing an EquipmentClass item.

2. Add a jQuery function to your custom javaScript:

function showModal(modalContainerId, modalBodyId, id) {
    var url = $(modalContainerId).data('url');

    $.get(url, { id: id }, function (data) {
        $(modalBodyId).html(data);
        $(modalContainerId).modal('show');
    });
}

As you can see this function takes id as one of its parameters. In general its purpose is to replace the empty modal body with what we will put in a separate partial view and than display whole container as a modal page.

3. Put your modal div in a separate partial view, and call it Edit (has to be the same as your controller action name). You will have to change your Edit partial name to sth else, for example EditBody.

The Edit partial view should now look sth like this:

@model EquipmentClass

<!-- modal div -->
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
    @Html.Partial("EditBody", Model)
</div>
<div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
</div>

4. Change the controller action so that it returns the partial view created in the previous step:

public PartialViewResult Edit(int id)
{
    return PartialView(equipmentclassRepository.Find(id));
}

5. Change the edit 'a' anchor so that it calls created jQuery function:

@model IEnumerable<Models.EquipmentClass>

....

@foreach (var item in Model)
{
<tbody>
    <tr>
        <td>
            @item.ClassId
        </td>
        <td>
            @item.ClassName
        </td>
        <td>
            <a data-toggle="modal" onclick="showModal('#editModalContainerID', '#editModalBodyID', @item.ClassId)">
                <i class="icon-edit"></i>
            </a>
            <a [email protected]("Delete", "EquipmentClass", new { id = item.ClassId })>
                <i class="icon-trash"></i>
            </a>
        </td>
    </tr>
</tbody>
} <!-- foreach -->

This way each time an 'a' anchor with edit icon is clicked the showModal function (with related id being passed) is fired and a bootstrap modal with related data is displayed.

I'm sure there is a better way to do it, but this way worked for me just fine :)

Hope this helps you a bit :)