MVC 4 Bootstrap Modal Edit \ Detail

Question

Hy vọng ai đó có thể giúp tôi với một thứ tôi đang thử nghiệm trong MVC 4 bằng cách sử dụng bootstrap.

Tôi có chế độ xem chỉ mục được nhập mạnh mẽ hiển thị các mục trong bảng cùng với chỉnh sửa và xóa các biểu tượng hành động trong mỗi dòng.

@model IEnumerable<Models.EquipmentClass> 

.... 

@foreach (var item in Model) 
{ 
<tbody> 
    <tr> 
     <td> 
      @item.ClassId 
     </td> 
     <td> 
      @item.ClassName 
     </td> 
     <td> 
      <a href=@Url.Action("Edit", "EquipmentClass", new { id = item.ClassId })> 
       <i class="icon-edit"></i> 
      </a> 
      <a href=@Url.Action("Delete", "EquipmentClass", new { id = item.ClassId })> 
       <i class="icon-trash"></i> 
      </a> 
     </td> 
    </tr> 
</tbody> 
} <!-- foreach --> 

Bộ điều khiển EquipmentClass trả về chế độ xem Chỉnh sửa cho mục đã chọn dựa trên id. Tất cả tuyệt vời và được mong đợi tại thời điểm này

public ViewResult Edit(int id) 
{ 
    return View(equipmentclassRepository.Find(id)); 
} 

Điều tôi muốn biết là cách mở biểu mẫu chỉnh sửa trong hộp thoại kiểu khởi động.

Tôi có thể thử và thay thế hành động chỉnh sửa trong bảng bằng cách sau và sau đó có div phương thức ở cuối chế độ xem nhưng làm cách nào để chuyển ID của mục đã chọn và trình trợ giúp html nào tôi nên sử dụng phần phương thức?

<!-- 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> 
    <div class="modal-body"> 
     @Html.Partial("Edit") 
    </div> 
    <div class="modal-footer"> 
     <a href="#" class="btn" data-dismiss="modal">Close</a> 
     <a href="#" class="btn btn-primary">Save changes</a> 
    </div> 
</div> 

Tôi rất muốn đánh giá cao bất kỳ lời khuyên, cảm ơn nhiều

Answer 1

Tôi nghĩ rằng tôi có một giải pháp cho vấn đề của bạn. Để thực hiện việc ứng dụng MVC của bạn như bạn muốn nó, bạn nên thực hiện một số thay đổi mã mà bạn cung cấp:

1. Thêm một div đại diện cho một phương thức để chỉnh sửa một mục ở dưới cùng của trang bố trí của bạn:

<div id="editModalContainerID" class="modal hide fade" data-url='@Url.Action("Edit", "EquipmentClass")'> 
<div id="editModalBodyID"></div> 
</div> 

Chú ý rằng phương thức này đều bị nghiêm kết nối với bộ điều khiển hành động có trách nhiệm chỉnh sửa một EquipmentClass mục.

2. Thêm một jQuery chức năng để tùy chỉnh của bạn JavaScript:

function showModal(modalContainerId, modalBodyId, id) { 
    var url = $(modalContainerId).data('url'); 

    $.get(url, { id: id }, function (data) { 
     $(modalBodyId).html(data); 
     $(modalContainerId).modal('show'); 
    }); 
} 

Như bạn có thể thấy chức năng này mất id là một trong những thông số của nó. Nói chung, mục đích của nó là thay thế thân phương thức rỗng bằng những gì chúng ta sẽ đặt trong một khung nhìn riêng biệt và hiển thị toàn bộ vùng chứa như một trang phương thức.

3. Đặt div modal của bạn trong một lần xem một phần riêng biệt, và gọi nó là Sửa (có để được giống như tên hành động điều khiển của bạn). Bạn sẽ phải thay đổi Chỉnh sửa tên từng phần của mình thành ví dụ khác, ví dụ: EditBody.

Các Sửa xem phần bây giờ sẽ trông sth như thế này:

@model EquipmentClass 

<!-- modal div --> 
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">×</button> 
    <h3>Modal header</h3> 
</div> 
<div class="modal-body"> 
    @Html.Partial("EditBody", Model) 
</div> 
<div class="modal-footer"> 
    <a href="#" class="btn" data-dismiss="modal">Close</a> 
    <a href="#" class="btn btn-primary">Save changes</a> 
</div> 

4. Thay đổi hành động điều khiển để nó trả về xem một phần được tạo ra trong bước trước:

public PartialViewResult Edit(int id) 
{ 
    return PartialView(equipmentclassRepository.Find(id)); 
} 

5. Thay đổi chỉnh sửa 'a' neo để nó cuộc gọi tạo jQuery chức năng:

@model IEnumerable<Models.EquipmentClass> 

.... 

@foreach (var item in Model) 
{ 
<tbody> 
    <tr> 
     <td> 
      @item.ClassId 
     </td> 
     <td> 
      @item.ClassName 
     </td> 
     <td> 
      <a data-toggle="modal" onclick="showModal('#editModalContainerID', '#editModalBodyID', @item.ClassId)"> 
       <i class="icon-edit"></i> 
      </a> 
      <a href=@Url.Action("Delete", "EquipmentClass", new { id = item.ClassId })> 
       <i class="icon-trash"></i> 
      </a> 
     </td> 
    </tr> 
</tbody> 
} <!-- foreach --> 

Bằng cách này mỗi lần một 'a' neo với chỉnh sửa biểu tượng được nhấp chức năng ShowModal (với id liên quan được thông qua) được kích hoạt và một phương thức bootstrap với dữ liệu liên quan được hiển thị.

tôi chắc chắn rằng có một cách tốt hơn để làm điều đó, nhưng cách này làm việc cho tôi tốt :)

Hy vọng điều này sẽ giúp bạn một chút :)

Answer 2

Przemo câu trả lời làm việc cho tôi, tuy nhiên làm lưu ý rằng tôi chỉ quản lý để làm cho nó hoạt động khi tôi thay đổi khối đầu tiên của mã từ

<div id="editModalContainerID" class="modal hide fade" data-url='@Url.Action("Edit", "EquipmentClass")'> 
<div id="editModalBodyID"></div> 
</div> 

để

<div id="editModalContainerID" class="modal fade" data-url='@Url.Action("Edit", "EquipmentClass")'> 
<div id="editModalBodyID"></div> 
</div> 

Lưu ý rằng tôi đã xóa lớp "mờ dần" khỏi editModalContainerID. Nếu không, chế độ xem một phần không tải. Hy vọng điều này sẽ giúp bất cứ ai khác với cùng một vấn đề.