MVC 4 Bootstrap Modal編輯\詳細

Question

希望有人能夠幫助我用我在MVC 4中使用bootstrap進行試驗的東西。

我有一個強類型的索引視圖，它在每一行中顯示錶中的項目以及編輯和刪除操作圖標。

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

EquipmentClass控制器根據id返回所選項目的編輯視圖。所有偉大和預期在這一點

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

我想知道的是如何打開引導模式對話框中的編輯窗體。

我可以試着用下面的代碼替換表中的編輯動作，然後在視圖的底部有一個模態div，但是如何傳入所選項目的ID和我應該使用哪個html助手模態部分？

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

我會非常感激的任何建議，非常感謝

Answer 1

我認爲，我有一個問題的解決方案。爲了使你的MVC應用程序的工作，只要你想它，你應該做一些改變，你提供的代碼：

添加DIV代表在佈局頁面的底部編輯一個項目一個模式：

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

注意，此模式是嚴格連接到負責編輯EquipmentClass項目中的控制器動作。

2.添加jQuery的功能，以您的自定義JavaScript：

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

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

正如你可以看到這個功能需要ID作爲它的一個參數。一般而言，它的目的是將空模態體替換爲我們將放在單獨的局部視圖中並將整個容器作爲模態頁面顯示。

放在一個單獨的局部視圖您模式格，並將其命名爲編輯（必須與您的控制器動作名）。您將不得不將您的部分名稱更改爲其他名稱，例如EditBody。

的編輯局部視圖現在應該是某事像這樣：

@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.改變控制器的操作，因此在返回上一步中創建的局部視圖：

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

5。更改編輯「一個」錨​​，使其調用創建jQuery的功能：

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

這樣每一個「A」錨與編輯圖標點擊的ShowModal功能時（以及相關的ID傳遞）被激發並顯示具有相關數據的引導模式。

我敢肯定有更好的方式來做到這一點，但卻這種方式爲我工作就好:)

希望這有助於你一點:)

Answer 2

Przemo答案爲我工作，千萬注意，我只設法得到它的工作時，我改變了一個代碼塊從

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

請注意，我從editModalContainerID中刪除了「淡入淡出」類。否則，局部視圖不會加載。希望這可以幫助有同樣問題的其他人。