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.