jQuery AJAX Post Success가 div를 업데이트하지 않고 부분 뷰를 표시합니다.

Question

반환 된 부분 뷰가있는 div를 업데이트하기 위해 jQuery AJAX 게시물을 가져올 수 없습니다. 부분 뷰는 올바른 html로 반환되고 브라우저 내에서 전체적으로 표시되지만 원하는 부분에 표시 할 수는 없습니다. 나는 그것이 다소 단순한 것이라고 확신하지만이 문제를 해결하기 위해 수 많은 시간을 보냈다.

궁극적으로 내가 얻으려고하는 것은 양식이 결과가 다른 div에 표시되고 어떻게 든 다른 div를 다른 Ajax 호출을 통해 다른 부분보기로 업데이트 할 때입니다. 어떻게 작동하는지 익숙해 지도록이 테스트를 설정했지만이 권한을 얻으려고 애를 쓰고 있습니다.

컨트롤러 :

[HttpPost] 
    [ValidateAntiForgeryToken] 
    public ActionResult Create([Bind(Include="id,Name")] Test test) 
    { 
     if (ModelState.IsValid) 
     { 
      db.Test.Add(test); 
      db.SaveChanges(); 
      return PartialView("DetailsPartial", test); 
     } 

     return PartialView("CreatePartial"); 
    } 

메인 페이지 :

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

<p> 
    <button id="Create">Create</button> 
</p> 
<div id="CreatePlaceholder"> 

</div> 

<div id="DetailsPlaceholder"> 

</div> 

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryval") 

<script> 
    $(document).ready(function() { 
     $('#Create').click(function (event) { 
      event.preventDefault(); 
      $.ajax({ 
       type: 'get', 
       url: '/Test/Create' 
      }).done(function (data) { 
       $('#CreatePlaceholder').html(data) 
      }) 
     }) 

     $('#CreateForm').submit(function (event) { 
      event.preventDefault(); 

      var $form = $(this); 
      var formData = $form.serialize; 
      alert(formData); 
      formData.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val(); 

      $.ajax({ 
       type: 'POST', 
       url: '/Test/Create', 
       data: formData, 
       success: function (result) { 
        $('#DetailsPlaceholder').html(result); 
       } 
      }) 
     }); 
    }) 
</script> 

이 부분보기 만들기 :

@model PerformanceTools.Models.Test 

<form id="CreateForm" method="post" action="@Url.Action("Create","Test")"> 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <h4>Test</h4> 
     <hr /> 
     @Html.ValidationSummary(true) 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Name) 
       @Html.ValidationMessageFor(model => model.Name) 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Create" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
</form> 

세부 부분보기 :

@model PerformanceTools.Models.Test 

<dl class="dl-horizontal"> 
    <dt> 
     @Html.DisplayNameFor(model => model.id) 
    </dt> 

    <dd> 
     @Html.DisplayFor(model => model.id) 
    </dd> 
    <dt> 
     @Html.DisplayNameFor(model => model.Name) 
    </dt> 

    <dd> 
     @Html.DisplayFor(model => model.Name) 
    </dd> 
</dl> 

Answer 1

문제는 이벤트가 절대로 페이지에 추가되지 않아 양식 제출에 연결되지 않았기 때문입니다. DOM이 준비되었습니다.

빈 자리 표시 자 div에 .on을 사용하여 문제를 해결할 수있었습니다.

$('#CreatePlaceholder').on('submit', '#CreateForm', function (event) { 
     event.preventDefault(); 

     var formData = $(this).serialize(); 
     formData.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val(); 

     $.ajax({ 
      type: 'POST', 
      url: '/Test/Create', 
      data: formData 
     }).done(function (data) { 
      $('#DetailsPlaceholder').html(data); 
     }) 
    }); 

Answer 2

그러나 부분 뷰를 렌더링하면 div 안에 배치됩니다.

<div id="partialSummaryDiv">@{Html.RenderPartial("YourPartial");}</div> 

Ajax 호출이 성공하면 부분 뷰가 아닌 div에 .html()이 호출됩니다.

success: function (data) { 
       $('#partialSummaryDiv).html(data); 
      } 

div에 부분보기를 정의하지 않았기 때문에 Div에 표시되지 않습니다. 아약스 성공이 끝날 때까지 부분보기를 숨기려면 추가 논리를 추가해야합니다.