C# MVC4 Jquery Ajax Post 부분 뷰 업데이트

Question

다음 부분 뷰가 있습니다. 변경 항목 이름 버튼을 클릭하면 여기에서 볼 수 있듯이

@using System.Data; 
@using System.Dynamic; 
@using System.Collections.Generic; 
@using System.Linq; 
@model TheMProject.Models.MyViewModel 

<div id="Item_Buttons"> 
     <h2 class="alignleft">Table 1</h2> 
     <p class="alignright">Item Name<input type="text" name="item_name" value="@Html.ValueFor(x => x.itemname)" class="search-query" placeholder="Search" style ="width:100px"/> 
      <button class="btn btn-success" id="Change_Item_Name" value="Change_Item_Name" name="action:Change_Item_Name" type="button"> Change Item Name</button> 
          Grade<input type="text" name="item_grade" value="@Html.ValueFor(x => x.grade)" class="search-query" placeholder="Search" style="width:100px"/> 
      <button class="btn btn-success" id="ChangeItemGrade" value="ChangeItemGrade" name="action:Change_Grade" type="button">Change Grade</button> 
          Delete Record<input type="text" name="delete_item" value="@Html.ValueFor(x => x.itemname)" class="search-query" placeholder="Search" style ="width:100px"/> 
      <button class="btn btn-success" id="DeleteItem" value="DeleteItem" name="action:Delete_Item" type="button">Delete Record</button> 
    </p> 
    <div style="clear: both;"></div> 
    </div> 
<section> 
    <div id ="firstgrid"> 
     <table id="TTable" class="gridTable"> 
      <thead class="gridHead"> 
       <tr> 
        @Html.DisplayFor(x => x.TColumns) 
       </tr> 
      </thead> 
      <tbody> 
       @Html.DisplayFor(x => x.TRows) 
      </tbody> 
     </table> 
     </div> 
</section> 
    <section> 
      <form id="form1"> 
     <div id="grid"> 
      <table id="CTable" class="gridTable"> 
       <thead class="gridHead"> 
        <tr> 
         @Html.DisplayFor(x => x.Columns) 
        </tr> 
       </thead> 
       <tbody> 
        @Html.DisplayFor(x => x.Rows) 
       </tbody> 
      </table> 
       </div> 
      </form> 
     </section> 
<section> 
    <div id ="Display_Average"> 
     <table id="AvgDisplayTable" class="gridTable"> 
      <thead class="gridHead"> 
       <tr> 
        @Html.DisplayFor(x => x.AvgColumns) 
       </tr> 
      </thead> 
      <tbody> 
       @Html.DisplayFor(x => x.AvgRows) 
      </tbody> 
     </table> 
     </div> 
</section> 
<button class="btn" id="SubmitAverage" value ="SubmitAverage" name="action:SubmitAverage" type="button">Submit Averages</button> 

<div id="ItemNameDiv" title="Change Item Name"> 
    @using (Html.BeginForm("ChangeItemName", "Home", "POST")) 
    { 
     <section> 
      Heat Name:<input type="text" name="itemName" value="@Html.ValueFor(x => x.heatname)" style ="width:100px"/> 
      Change to:<input type="text" name="updatedName" value="" style="width: 100px" /> 
      <input type="button" id="ChangeItemName" name="ChangeItemName" value="Change" /> 
     </section> 
    } 
</div> 

<div id="ItemGradeDiv" title="Change Item Grade"> 
    @using (Html.BeginForm("ChangeGrade", "Home", "POST")) 
    { 
     <section> 
      Item Grade:<input type="text" name="grade" value="@Html.ValueFor(x => x.grade)" style ="width:100px"/> 
      Change to:<input type="text" name="updatedName" value="" style="width: 100px" /> 
      <input type ="hidden" name="hiddenItem" value ="@Html.ValueFor(x => x.itemname)" /> 
      <input type="submit" name="ChangeGrade" value="Change" /> 
     </section> 
    } 
</div> 

<div id="DeleteItemDiv" title="Delete Item"> 
@using (Html.BeginForm("DeleteItem", "Home", "POST")) 
{ 
    <section> 
     Heat Name:<input type="text" name="itemName" value="@Html.ValueFor(x => x.itemname)" style ="width:100px"/> 
     <input type="submit" name="DeleteItem" value="Delete" /> 
    </section> 
} 
    </div> 

은 아약스의 게시물이 jQuery로 호출됩니다

$(document).ready(function() { 
     $('#ChangeItemName').click(function (e) { 
      var tdata = $('#form1').serialize(); 
      var origname = $('#ItemNameDiv').find('input[name="itemName"]').first().val(); 
      var newname = $('#ItemNameDiv').find('input[name="updatedName"]').first().val(); 
      $.ajax({ 
       type: "POST", 
       data: { 
        mCollection: tdata, 
        itemName: origname, 
        updatedName: newname 
       }, 

       url: "Home/ChangeItemName", 
       success: function (result) { success(result); } 
      }); 
     }); 


     function success(result) { 

      $('#ItemNameDiv').dialog('close'); 
      $("#My_Partial_V").html(result); 
     } 
    }); 

. 완료되면 부분 뷰는 게시물의 업데이트 된 데이터로 새로 고쳐집니다. 이 게시물에 필요한 jquery를 포함하여 다른 버튼을 클릭 할 때까지 아래에 표시된 div 표시를 숨기는 등의보기에서 다른 작업을 수행하는 데 필요한 다른 스크립트가 있습니다. 이전에 언급 한 아약스 게시물을 처음 수행 한 후 같은 버튼을 클릭하면 게시물이 한 번에 두 번, 세 번 클릭 된 번에 네 번 실행됩니다.

Ive가 스크립트 참조를 이동하려고 시도했습니다.

<script src="@Url.Content("~/Scripts/partialitemscripts.js")" 
type="text/javascript"></script> 

부분 뷰 외에도 부분 파일과 레이아웃 파일을 포함하는 뷰에 포함되지 않습니다. 이 두 가지 방법을 시도하면 부분 뷰가 새로 고쳐질 때까지 모든 스크립트가 제대로로드되어 모든 스크립트가 호출/참조되지 않습니다.

Answer 1

게시 된 코드는 확인하기가 어렵지만. 처음으로 스크립트가 실패하는 이유는 DOM에 요소를 추가하고 click() 이벤트가 새 요소에 바인딩되지 않은 .html()을 사용했기 때문입니다.

이 경우 on() 또는 delegate()을 사용해야합니다. 이들을 사용하는 방법은 jquery 문서를 참조하십시오. 간단하다.

Answer 2

Partialview 외부와 mainview에 스크립트를 옮기려고 할 수도 있지만 (조금씩 바꿔야합니다.) 문서가로드 될 때 함수를 트리거하는 대신 함수에 넣으십시오 :

function ajaxCallback(result){ 
    $('#ChangeItemName').click(function (e) { 
     var tdata = $('#form1').serialize(); 
     var origname = $('#ItemNameDiv').find('input[name="itemName"]').first().val(); 
     var newname = $('#ItemNameDiv').find('input[name="updatedName"]').first().val(); 
     $.ajax({ 
      type: "POST", 
      data: { 
       mCollection: tdata, 
       itemName: origname, 
       updatedName: newname 
      }, 

      url: "Home/ChangeItemName", 
      success: function (result) { success(result); } 
     }); 
    }); 
}  

그런 다음이 기능은 기본보기의 준비 이벤트 (부분을 포함하는 이벤트)에서 호출합니다.

당신이 ajaxCallback를 호출하는 당신의 성공 기능을 업데이트 할 수있어 아약스 요청을 수행 한 경우 더 이상 작동하지 않는 당신의 단추를 해결하기 위해 (이것은 ajaxCallback 기능과 함께 partialitemscripts.js에있을 것입니다) :

function success(result) { 
     $('#ItemNameDiv').dialog('close'); 
     $("#My_Partial_V").html(result); 
     ajaxCallback(); 
    } 

이것이 이상적인 해결책인지 잘 모르겠지만 이와 비슷한 방식으로 뭔가를 얻을 수있었습니다.