Wie man Teilansicht in Bootstrap Modal setzen?

Question

ich eine Teilansicht in einem Bootstrap Modal setzen wollen,

Dies ist der JQuery-Code Ich verwende:

function CreateEmployeeModal() 
{ 
    var url = $("#btnCreateEmployeeModal").data("mine");  
    $.ajax({ 
     type: 'get', 
     url: url 
    }).success(function (result) {    
     $(".modal-body").html(result) 
     $("#MyModal").modal('show') 
    }).error(function() { 
     alert("didn't work"); 
    }) 
} 

Und dies ist der Modal-Code in der Datei _Layout:

<div class="modal fade" id="myModal" role="dialog"> 
       <div class="modal-dialog"> 

        <!-- Modal content--> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4 class="modal-title">Modal Header</h4> 
         </div> 
         <div class="modal-body" id="divModalBody"> 
          <p>Some text in the modal.</p> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

Ich feuere das modale mit dieser Schaltfläche von der Index Seite, Ich habe das Data-Minen-Attribut erstellt, um die URL zu der Aktionsmethode zu speichern, die die PartialView zurückgibt:

<input type="button" class="aslink modal-link" data-toggle="modal" 
        data-target="#myModal" id="btnCreateEmployeeModal" value="Open Modal" data-mine="@Url.Action("CreateUsingModal")"> 

Dies ist die Controller-Aktion Methode, die ich die Teilansicht zurückkehren:

public PartialViewResult CreateUsingModal() 
     { 
      return PartialView(); 
     } 

Die Operation Erfolg in Ajax zu haben, aber die modalen nicht zeigen ...

Answer 1

ich hatte einen Fehler ..., ich sollte anstelle eines Groß für die ID des modalen einen Klein verwenden ... der richtige Weg ist: $("#myModal").modal('show')

Answer 2

I gehe davon aus, dass dein GET-Endpunkt (deine Methode) Roh-HTML zurückgibt. Eine bessere Möglichkeit, dies zu tun, wäre für Ihre Methode, um Ihre Daten im JSON-Format zurückzukehren und verwenden Sie dann, dass die Daten Ihrer modalen Fenster füllen:

function CreateEmployeeModal() 
{ 
    var url = $("#btnCreateEmployeeModal").data("mine");  
    $.ajax({ 
     type: 'get', 
     url: url 
    }).success(function (result) { 
     console.log(result); //better than alert 

     $("#textboxCorrespondingToValue").val(result.valueCorrespondingToTextbox); 

     $("#MyModal").modal('show'); 
}).error(function() { 
    alert("didn't work"); 
}) 
} 

Auf diese Weise, auch wenn Sie die HTML Sie don ändern müssen ‚t etwas in Ihrem Server-seitigen Code ändern