ASP.NET MVCブートストラップダイナミックモーダルコンテンツ

Question

次のように私はMVC 5を使用していると私はviewModelに各レコードの<button>を持っている：

<table class="table table-hover"> 
<tr> 
    <th> 
     @Html.DisplayNameFor(model => model.Questions.Single().QuestionType) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model =>model.Questions.Single().Scheme) 
    </th> 
</tr> 

@foreach (var item in Model.Questions) 
{ 
    <tr> 
     <td> 
      @Html.DisplayFor(modelItem => item.QuestionType) 
     </td> 
     <td> 
      <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" > 
       View 
      </button> 
     </td> 
    </tr> 
} 

Foreach (Var item in Model.Questions)を開き、buttonがあるでしょうmodalをアップしてください。しかし、modalにitem.idに基づいて別のコンテンツを読み込み、Model.Questionsから取得します。これどうやってするの？

Answer 1

ajaxでブートストラップモーダルダイアログを使用して、詳細/ビューの部分ビュー結果をモーダルダイアログに読み込むことができます。

まず、新しいcssクラスをボタンに追加します。これを使用して、後でクリックイベントをワイヤリングしてモーダルダイアログを起動します。また、我々は今すぐに以下のコードを追加し

@foreach (var item in Model.Questions) 
{ 
    <tr> 
    <td> 
     <button type="button" class="btn btn-success btn-sm modal-link" 
       data-targeturl="@Url.Action("Details","Home",new { id = item.Id })"> 
      View 
     </button> 
    </td> 
    </tr> 
} 

（私たちは後で私たちのAJAX呼び出しのためにこれを使用します）Url.Action HTMLヘルパーメソッドを使用して表示し、ボタンでのHTML5のデータ属性のそれを保つ細部にURLを生成します。あなたの現在のビュー（またはレイアウト）。これが私たちのモーダルダイアログ

今

<!-- The below code is for the modal dialog --> 
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog"> 
    <a href="#close" title="Close" class="modal-close-btn">X</a> 
    <div class="modal-content"> 
     <div class="modal-body"></div> 
    </div> 
</div> 

のコンテナとして機能する、のは、「モーダル・リンク」CSSクラスを持つ任意の要素にクリックイベントを配線してみましょう。このクラスを早くボタンに追加しました。

$(function() { 

    $('body').on('click', '.modal-link', function (e) { 
     e.preventDefault(); 

     $("#modal-container").remove(); 
     $.get($(this).data("targeturl"), function (data) { 
      $('<div id="modal-container" class="modal fade">'+ 
       '<div class="modal-content" id= "modalbody" >'+ 
        data + '</div></div>').modal(); 
     }); 
    }); 
}); 

ユーザーがボタンをクリックしたときに、それはtargeturlデータ属性の値を読み取り、そのURLへのAJAX呼び出しを行います。私たちの場合、それはDetailsアクションメソッドを呼び出します。それでは、それは（モーダルダイアログコンテンツから）

public ActionResult Details(int id) 
{ 
    // to do : You can pass some data (view model) to the partial view as needed 
    return PartialView(); 
} 

を部分ビュー結果を返し、部分図は、モーダルダイアログのための必要なHTMLマークアップを持っていることを確認してみましょう。

<div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
     <p>Some content for the modal </p> 

    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

Answer 2

ありがとうございます。Shjiu.Codeは問題ありません。モデルのフルスクリーンを変更するには、このコードを追加してください。 '。

$(function() { 
    $('body').on('click', '.modal-link', function (e) { 
     e.preventDefault(); 
     $("#modal-container").remove(); 
     $.get($(this).data("targeturl"), function (data) { 
      $('<div id="modal-container" class="modal fade"> <div class="modal-dialog modal-lg" style="width:500px;>' + 
       '<div class="modal-content" id= "modalbody" >' + 
       data + 
       '</div></div></div>').modal(); 
     }); 
    }); 
});