カスタムオブジェクトをモーダルポップアップに渡す

Question

ブートストラップモーダルポップアップのコンテンツを別のビューファイルに作成し、ビューをレンダリングする前にビューファイルに対応するアクションメソッドGET Actionを呼び出して、アクションメソッドを介してカスタムオブジェクトをビューに追加します。

モーダル：私はボタンをクリックしたときに

<div class="modal fade" id="assign_device" tabindex="-1"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title">Assign Device</h4> 
      </div> 
      <div class="modal-body"> 
       Device list here 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-primary">Save</button> 
       <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
     </div> 
    </div> 

上記modalポップアップ必見（index.cshtmlのような）現在のページに表示されます。

Answer 1

アクションメソッドを作成できます。

public PartialViewResult GetDevice() 
{ 
    var devices= FetchDevices(); 

    return PartialView("viewName", devices); 
} 

あなたのビューは、この

@model DeviceModelNamespace 
<div class="modal fade" id="assign_device" tabindex="-1"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <h4 class="modal-title">Assign Device</h4> 
        </div> 
        <div class="modal-body"> 
         foreach over devicemodel 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-primary">Save</button> 
         <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
        </div> 
       </div> 
      </div> 
     </div> 

ようになると、この

@Html.Partial("viewName") 

ようオザービューでそれを呼び出すと、ブートストラップモデル

<script> 
    $("#load-partial").on('click', function() { 
     console.log('click'); 
     //setup modal 
     $('#dynamic-modal').modal({ 
      keyboard: false, 
      remote: '/controllername/partialviewname' 
     }).show(); 
    }); 
    $('#dynamic-modal').on('showen.bs.modal', function(e) { 
     console.log('shown'); 
    }); 
</script>