how MVC 4 Bootstrap Modal Edit Detail



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)
            <a href=@Url.Action("Edit", "EquipmentClass", new { id = item.ClassId })>
                <i class="icon-edit"></i>
            <a href=@Url.Action("Delete", "EquipmentClass", new { id = item.ClassId })>
                <i class="icon-trash"></i>
} <!-- 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 class="modal-body">
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>

I’d greatly appreciate any advice, many thanks





Facebook Comments

Post a comment