Bootstrap-modal：在模態體中顯示的局部視圖

Question

我試圖在引導模型中加載局部視圖。因爲我在父頁面中有一個現有的表單，而在部分視圖中有另一個表單。我不能決定把這些表格放在一個頁面上，因爲那樣會有一個表格。

下面是我在父頁面複選框，選中時會顯示模式對話框：

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

下面是父頁面模態對話框：

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

在JavaScript，我把下面的代碼加載模態對話框：

 $('#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的控制器，顯示局部視圖：

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

在_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並通過控制器返回部分視圖數據。 這是從使用情況下，我寫了拍攝的代碼：

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

這是我注入容器：

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

如果你想注入模態體，你可以將'#deleteConfirma和'你的模式身體div的id並注入HTML數據。

我希望這是有幫助的，如果沒有，我很抱歉。只是想幫助

感謝， Narendran P