C# MVC4 JQuery Ajax Post Partial View Update

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> 

Когда кнопка Item Name Change щелчке Ajax пост вызывается с 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, необходимые для этого сообщения, есть другие сценарии, необходимые для выполнения других действий в представлении, таких как скрытие divs, показанных ниже средней кнопки отправки, до тех пор, пока не будут нажаты другие кнопки. После первого раза, когда была упомянута предыдущая запись ajax, если одна и та же кнопка нажата, сообщение вызывается дважды, а не один раз, в третий раз его щелчок запускается 4 раза и т. Д.

Ive попытался переместить ссылку на сценарий

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

вне частичного вида и в представлении, которое содержит частичный, а также файл макета. Когда я пытаюсь использовать эти два метода, все загружается правильно до тех пор, пока частичный вид не будет обновлен, и в это время все сценарии не будут вызваны/указаны.

Answer 1

Несмотря на то, что код не отправлен, чтобы убедиться. Похоже, причина, по которой сценарии терпят неудачу после первого раза, заключается в том, что вы используете .html(), который добавляет элементы в DOM, и событие click() не привязано к этим новым элементам.

В этом случае вы должны использовать 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); } 
     }); 
    }); 
}  

Затем вы вызываете эту функцию из события готовности вашего основного вида (тот, который содержит частичный).

Чтобы исправить кнопку не работает больше, когда вы сделали в Ajax запроса вы должны обновить успех-функцию для вызова ajaxCallback (это было бы в partialitemscripts.js вместе с функцией ajaxCallback):

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

Я не уверен, что это идеальное решение, но мне удалось добиться чего-то подобного.