使用

Question

私は、ブートストラップモーダル

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <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"> 
       <div class="ajax-dynamic-get-data-form"/> 
      </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> 
    </div> 
</div> 

を持っている私は、AJAXダイナミック取得するデータ形式の缶の動的負荷をしたい、私のするPartialViewResult が、これはアクション

です

public PartialViewResult GetData() 
     { 
      Person p = new Person() { Name = "jack", Addr = "Home" }; 
      return PartialView(p); 
     } 

ボタンをクリックしたときに、これは、私PartialView

@model ModalDemo.Controllers.Person 

@Ajax.BeginForm("Create", new AjaxOptions { OnSuccess = "success" }) 
{ 
<div class="form-group"> 
    <label>Person Name</label> 
    @Html.TextBoxFor(x => x.Name, new { @class = "form-control" }) 
</div> 

<div class="form-group"> 
    <label>Person Address</label> 
    @Html.TextBoxFor(x => x.Addr, new { @class = "form-control" }) 
</div> 

<button type="submit" class="btn btn-default">Submit</button> 
} 


<script type="text/javascript"> 
    function success() { 
     alert("1"); 
    } 
</script> 

ですpartialviewはmyModal、 に表示することを願って、これは私のイベントです：コールバックで

<script type="text/javascript"> 

    $('#myModal').on('show.bs.modal', function (event) { 

     var url=@Url.Action("GetData"); 

     $.ajax({ 
      type: "GET", 
      url: url, 
      data: JSON, 
      cache: false, 
      success: function (data) { 
       console.log(data); 
       //here is the question: 
       //i hope load the action partial view with "ajax-dynamic-get-data-form" 
       //i don't know how to write the js code here that i can load the form. 
       //please give some point ,thanks!!! 
      }, 
      error: function (err) { 
       console.log(err); 
      } 
     }); 
    }) 
</script> 

Answer 1

、これらの線に沿って何かを追加します。

$('#myModal').on('show.bs.modal', function (event) { 

    var url='@Url.Action("GetData")'; 

    $.ajax({ 
     type: "GET", 
     url: url, 
     data: JSON, 
     cache: false, 
     success: function (data) { 

      // inject your content into the "placeholder" div 
      $('#myModal').find('.ajax-dynamic-get-data-form').html(data); 
     }, 
     error: function (err) { 
      console.log(err); 
     } 
    }); 
}) 

あなたはPOSTいるので、多少$.postを使用してこれを簡素化することができアクションはキャッシュされません：あなたはまた、doneとfailを使用する必要があります

$('#myModal').on('show.bs.modal', function (event) { 

    var url='@Url.Action("GetData")'; 

    $.post(url) 
     .done(function (data, status, jqxhr) { 
      // inject your content into the "placeholder" div 
      $('#myModal').find('.ajax-dynamic-get-data-form').html(data); 
     }) 
     .fail(function (jqxhr, status, errorThrown) { 
      console.log(errorThrown); 
     }); 
}) 

、 successとerrorは廃止予定です（noted in the API documentation）。