how MVC 4 Bootstrap Modal Edit Detail

 

Questions


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 href=@Url.Action("Edit", "EquipmentClass", new { id = item.ClassId })>
                <i class="icon-edit"></i>
            </a>
            <a href=@Url.Action("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

asp.net-mvc-4,modal-dialog,razor,twitter-bootstrap

Facebook Comments

Post a comment