Cách sử dụng phương thức bootstrap để chỉnh sửa dữ liệu bảng trong MVC?

Question

Tôi có một bảng trong chế độ xem MVC hiển thị chi tiết nhân viên. Tôi muốn thêm một chức năng chỉnh sửa, nhưng thay vì mở nó trong một trang mới, tôi muốn hiển thị nó bằng cách sử dụng một phương thức bootstrap. (http://twitter.github.com/bootstrap/javascript.html#modals)

Tôi không nghĩ mình phải sử dụng ajax vì dữ liệu đã có sẵn trên trang. Tôi nghĩ rằng tôi cần một số mã jquery hoặc dao cạo để chuyển dữ liệu của nhân viên đã chọn sang phương thức bootstrap và bật lên trên cùng một màn hình. Dưới đây là mã của tôi. Mọi sự trợ giúp sẽ rất được trân trọng. Cảm ơn

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

Answer 1

Thực sự có 2 khả năng: có hoặc không có AJAX. Nếu bạn muốn làm điều đó mà không có AJAX, bạn có thể đăng ký với sự kiện nhấp chuột của liên kết Chỉnh sửa và sau đó sao chép các giá trị từ bảng sang phương thức và cuối cùng hiển thị phương thức.

Vì vậy, bắt đầu bằng cách cho chỉnh sửa liên kết của bạn một số lớp:

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

mà bạn có thể đăng ký vào:

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

này giả định rằng bạn đã cho lớp CSS thích hợp để các <td> yếu tố và các đầu vào các trường trong phương thức của bạn.

---

Nếu bạn muốn sử dụng AJAX bạn có thể tạo ra các liên kết như thế:

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

và sau đó bạn đăng ký sự kiện click của nút này và kích hoạt các yêu cầu 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; 
}); 

bạn sẽ có một trình giữ chỗ đơn giản cho phương thức trong chế độ xem chính của bạn sẽ chứa chi tiết:

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

Các hành động điều khiển sẽ bị ảnh hưởng nên lấy bản ghi nhân viên sử dụng id một dpass nó đến một cái nhìn cục bộ:

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

và cuối cùng là tương ứng với từng phần:

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

Rõ ràng bạn sẽ cũng cần phải quấn các trường nhập vào một Html.BeginForm để cho phép bạn gửi các chi tiết cập nhật của nhân viên đến máy chủ. Bạn cũng có thể cần AJAXify biểu mẫu này nếu bạn muốn ở trên cùng một trang.