ブートストラップ・モーダル：部分的な表示がモーダル・ボディに表示されます

Question

ブートストラップ・モデル内で部分ビューをロードしようとしています。親ページには既存のフォームがあり、部分ビューには別のフォームがあるためです。フォーム内にフォームがあるため、フォームを1ページに配置することはできません。

以下は親ページでは、私のチェックボックスで、それはモデルのダイアログが表示されます確認するとき：

<input type="checkbox" name="inputNewBornKMC" value="inputNewBornKMC" id="inputNewBornKMCCheckbox"> New Born 

以下は親ページでモーダルダイアログです：JavaScriptで

     <div Class="modal fade" id="inputNewBornKMC" role="dialog"> 
         <div class="modal-dialog"> 
          <!-- Modal content--> 
          <div class="modal-content"> 
           <div class="modal-header"> 
            <button type="button" class="close modal-close-btn" data-dismiss="modal">&times;</button> 
            <h4 class="modal-title">Search Newborn's Mother</h4> 
           </div> 
           <div class="modal-body"> 
           </div> 
           <div class="modal-footer"> 
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
            @*<button type="button" class="btn btn-default" id="AddGP">Save changes</button>*@ 
           </div> 
          </div> <!-- Modal content--> 
         </div> 
        </div> <!-- Modal --> 

を、

 $('#inputNewBornKMCCheckbox').on('change', function (e) { 
     var _this = $(this); 

     // if checked 
     if (_this.is(':checked')) { 
      $('#inputNewBornKMC').modal({ 
       keyboard: false, 
       remote: '/controller/AddPartialRegistration' 
      }).show(); 

     $('#inputNewBornKMCCheckbox').on('click', '.modal-link', function (e) { 
       e.preventDefault(); 
       $(this).attr('data-target', '#inputNewBornKMC'); 
       $(this).attr('data-toggle', 'modal'); 

      }); 

     } 

actioを呼び出します：私は、モーダルダイアログをロードするために、次のコードを入れてn個の部分ビューに表示するコントローラで：_PartialRegistrationページで

public ActionResult AddPartialRegistration() 
    { 
     return PartialView("_PartialRegistration"); 
    } 

：

  <div class="modal-body"> 
       <form class="form-horizontal" id="frmSearchMother" role="form" > 

        Mother's MRN 
        <input type="text" class="form-control input-sm" id="popupMotherMRN" name="popupMotherMRN" /> 
        IC/ID No 
        <input type="text" class="form-control input-sm" id="popupICNo" name="popupICNo" /> 
        Mother's Name 
        <input type="text" class="form-control input-sm" id="popupMotherName" name="popupMotherName" /> 
        <button type="button" class="btn btn-default" id="SearchMother" >Search</button> 
       </form> 
       <br /> 
       <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="LoadMotherDetailsTable"> 
        <thead> 
         <tr> 
          <th>No.</th> 
          <th>Mother's MRN</th> 
          <th>Mother's IC No</th> 
          <th>Mother's Name</th> 
          <th></th> 
         </tr> 
        </thead> 

        <tbody> 

        </tbody> 

       </table> 
      </div> 

を私は人々が部分図を適用するさまざまな方法を試してみたが、どれも働いていません。モーダルダイアログのモーダルボディに部分ビューを挿入する方法は不明です。このダイアログは、チェックボックスをチェックすると表示されますが、モーダルボディに部分ビューをロードする方法は不明です。

ご協力いただければ幸いです。

Answer 1

これは私の最初の回答ですので、あまり期待しません。

私はパーシャルビューを挿入する最良の方法は、あなたも同様に試みている方法だと言います。

私はあなたがAJAXを呼び出し、コントローラーを介してパーシャルビューデータを返すと言います。 これは私が書いたユースケースから取り出したコードです：

：これは私がに注入していた容器である

<div class="modal-dialog modal-lg"> 
<div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria- 
      hidden="true">&times;</button> 
     <h2 class="modal-title text-center">@Model.gameName</h2> 
     <h4 class="text-center">By @Model.publisher</h4> 
     <h5 class="text-center">Content Rating: @Model.Contentrating</h5> 
    </div> 
    <div class="modal-body"> 
     <h4 class="text-center">Trailer</h4> 
     <iframe width="560" height="315" src="@Model.trailerLink" 
     frameborder="0" allowfullscreen></iframe> 
     <h4 class="text-center">Description</h4> 
     <p>@Model.description</p> 
    </div> 
</div> 

：

function showVideo(e) { 
     alert('#' + $(e).attr("id")); 
     $.ajax({ 
      url: '/Games/_GameModal/' + $(e).attr("id"), 
      dataType: 'html', 
      success: function (data) { 
       alert('#' + $(e).attr("id")); 
       $('#deleteConfirmation').html(data); 
       $('#deleteConfirmation').modal(); 
      } 
     }); 

    } 

これは私の部分図のCSHTMLです

<div class="modal fade" id="deleteConfirmation" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel" aria-hidden="true"> 
</div> 

モーダルボディに注入する場合は、 '#deleteConfirmaあなたのidをmodal-bodyのdivで置き換えてHTMLデータを挿入します。

私はこれが役に立ったと思います。ただ、

おかげで、 Narendran P