Как использовать bootstrap modal для редактирования данных таблицы в MVC?

У меня есть таблица в представлении MVC, в которой отображаются данные о сотрудниках. Я хотел бы добавить функциональность редактирования, но вместо того, чтобы открывать ее на новой странице, я бы хотел показать ее с помощью мода загрузки. (http://twitter.github.com/bootstrap/javascript.html#modals)

Я не думаю, что мне нужно использовать ajax, поскольку данные уже доступны на странице. Я думаю, что мне нужен код jquery или бритвы, чтобы передать выбранные данные сотрудникам в bootstrap modal и всплыть на том же экране. Ниже мой код. Любая помощь будет принята с благодарностью. Благодаря

@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>

Ответы

Ответ 1

Есть действительно две возможности: с AJAX или без них. Если вы хотите сделать это без AJAX, вы можете подписаться на событие щелчка ссылки "Изменить", а затем скопировать значения из таблицы в модальный и, наконец, показать модальный.

Итак, давайте ссылку на редактирование какого-то класса:

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

на который вы могли подписаться:

$('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;
});

Это предполагает, что вы предоставили правильные классы CSS для элементов <td> и полей ввода в вашем модальном формате.

Если вы хотите использовать AJAX, вы можете создать такую ​​ссылку:

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

а затем вы подписываетесь на событие click этой кнопки и запускаете запрос AJAX:

$('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;
});

у вас будет простой placeholder для модального в вашем основном представлении, который будет содержать детали:

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

Действие контроллера, которое будет удалено, должно забрать запись сотрудника, используя идентификатор dpass it для частичного просмотра:

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

и, наконец, соответствующее частичное:

@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>

Очевидно, вам также потребуется обернуть поля ввода в Html.BeginForm, которые позволят вам отправить обновленные данные сотрудника на сервер. Также может понадобиться AJAXify эту форму, если вы хотите остаться на одной странице.