How to use bootstrap modal to edit the table data in MVC?

Question

I have a table in MVC view that displays employee details. I'd like to add an edit functionality, but instead of opening it in a new page, I'd like to show it using a bootstrap modal. (http://twitter.github.com/bootstrap/javascript.html#modals)

I don't think I have to use ajax since the data is already available on the page. I think I need to some jquery or razor code to pass the selected employee's data to the bootstrap modal, and pop it up on the same screen. Below is my code. Any help would be greatly appreciated. Thanks

@Foreach(var item in Model.Employees)
{
<tr>
   <td>@User.Identity.Name
            </td>
            <td>@item.FirstName
            </td>....other columns
<td><a href="#myModal" role="button" class="btn" data-toggle="modal">Edit</a>
    <td>
    </tr>........other rows
}
**Bootstrap Modal**


<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Edit Employee</h3>
  </div>

  <div class="modal-body">
    <p>Selected Employee details go here with textbox, dropdown, etc...</p>
  </div>

  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Darin Dimitrov Darin Dimitrov · Accepted Answer · 2013-03-31T10:37:43

There are indeed 2 possibilities: with or without AJAX. If you want to do that without AJAX you could subscribe to the click event of the Edit link and then copy the values from the table to the modal and finally show the modal.

So start by giving your edit link some class:

<a href="#" class="btn edit">Edit</a>

that you could subscribe to:

$('a.edit').on('click', function() {
    var myModal = $('#myModal');

    // now get the values from the table
    var firstName = $(this).closest('tr').find('td.firstName').html();
    var lastName = $(this).closest('tr').find('td.lastName').html();
    ....

    // and set them in the modal:
    $('.firstName', myModal).val(firstName);
    $('.lastNameName', myModal).val(lastName);
    ....

    // and finally show the modal
    myModal.modal({ show: true });

    return false;
});

This assumes that you have given proper CSS classes to the <td> elements and the input fields in your modal.

If you wanted to use AJAX you could generate the link like that:

@Html.ActionLink("Edit", "Edit", "Employees", new { id = employee.Id }, new { @class = "btn edit" })

and then you subscribe to the click event of this button and trigger the AJAX request:

$('a.edit').on('click', function() {
    $.ajax({
        url: this.href,
        type: 'GET',
        cache: false,
        success: function(result) {
            $('#myModal').html(result).find('.modal').modal({
                show: true
            });
        }
    });

    return false;
});

you will have a simple placeholder for the modal in your main view that will harbor the details:

<div id="myModal"></div>

The controller action that will be hit should fetch the employee record using the id an dpass it to a partial view:

public ActionResult Edit(int id)
{
    Employee employee = repository.Get(id);
    EmployeeViewModel model = Mapper.Map<Employee, EmployeeViewModel>(employee);
    return PartialView(model);
}

and finally the corresponding partial:

@model EmployeeViewModel

<div class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Edit Employee</h3>
    </div>
    <div class="modal-body">
        <div>
            @Html.LabelFor(x => x.FirstName)
            @Html.EditorFor(x => x.FirstName)
        </div>
        <div>
            @Html.LabelFor(x => x.LastName)
            @Html.EditorFor(x => x.LastName)
        </div>
        ...
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

Obviously you will also need to wrap the input fields into an Html.BeginForm that will allow you to send the updated details of the employee to the server. It might also be necessary to AJAXify this form if you want to stay on the same page.

How to use bootstrap modal to edit the table data in MVC?

2 Answers