2016-09-22 12 views
1

私はこれは私が使用しているjQueryのコードで、ブートストラップモーダル内部の部分図を入れたいパーシャルビューをブートストラップモードに入れる方法は?

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"); 
    }) 
} 

そして、これは_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> 

Indexページからこのボタンを使用してモーダルを実行していますが、データマイン属性を作成して、そのメソッドを返すアクションメソッドにURLを保存しました。

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

これは私が部分図返す必要がコントローラのアクションメソッドです:

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

操作がAJAXでの成功を持っているが、モーダルは表示されませんが...

答えて

0

を何も変更する必要があり、私は小文字の代わりに、モーダルのIDの大文字を使用する必要があります...正しい方法は次のとおりです。$("#myModal").modal('show')

0

私はGETエンドポイント(あなたのメソッド)が生のHTMLを返すと仮定します。これを行う より良い方法は、JSON形式でデータを返すためにあなたの方法のためのもので、その後のデータはあなたのモーダルウィンドウを移入することを使用します。

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"); 
}) 
} 

この方法で、あなたもHTMLあなたドンを変更する必要がある場合「トンが...私はエラーが発生しました、サーバー側のコードで

+0

私は私の質問を編集しました、ajax関数は実行されていませんでした、前に置いたイメージは、部分的なビューからのhtmlコードの警告のようでした... – AlexGH

関連する問題