MVC 4ブートストラップモーダル編集\詳細

Question

誰かが、私がMVC 4でブートストラップを使って実験しているもので私を助けてくれるかもしれないと願っています。

私は強く型付けされたインデックスビューを持っており、テーブル内のアイテムを各行の編集と削除のアクションアイコンとともに表示します。

@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アプリケーションを動作させるために：

1.は、レイアウトのページの一番下にある項目を編集するためのモーダルを表すDIVを追加します。

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

このモーダルがEquipmentClassアイテムの編集を担当するコントローラのアクションに厳密に接続されていることに注意してください。あなたは、この関数はそのパラメータの1つとしてIDを取る見ることができるように

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

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

：

2.

カスタムJavaScriptに jQueryの機能を追加します。一般的に、その目的は、空のモーダルボディを部分的な別のビューに置き換え、コンテナ全体をモーダルページとして表示することです。

3.別の部分図であなたのモーダルのdivを入れて、（自分のコントローラのアクション名と同じである必要があります）編集それを呼び出します。 部分名をsth elseに変更する必要があります。例えば、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 --> 

この道にある編集アイコンを持つ「」アンカーは、関連するidが渡されると（showModal機能をクリックするたびに、 ）が起動され、関連するデータを含むブートストラップモーダルが表示されます。

私はこれがあなたに少しを助け、それを行うには良い方法があると確信しているが、この方法は私のために働いただけで罰金:)

希望:)

Answer 2

Przemoの答えはしかし、私のために働きました私は

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

に

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

からのコードの最初のブロックを変更したときに私はそれが仕事を得ることに成功していることに注意します

editModalContainerIDから「フェード」クラスを削除したことに注目してください。それ以外の場合、部分ビューは読み込まれません。これは誰もが同じ問題を抱えていることを願っています。