ASP.NET MVC 3 - 阿贾克斯更新表 - 型号

我想更新一个记录列表与ajax，代表一个表，其中每个记录作为一个JavaScript删除链接。如果我预加载表，RemoveLink工作正常，但一旦div“RecordListPartialView”通过ajax更新，它不再有效。ASP.NET MVC 3 - 阿贾克斯更新表 - 型号

我用firebug检查过，生成的html代码对于每一行都是正确的。它看起来像浏览器不知道新的代码，所以它不会触发JavaScript链接。

有人能解释我发生了什么事吗？

（1）在此是在视图的代码：

$(".RemoveLink").click(function() { 
    var _id = $(this).attr("data-id"); 
    var recordToDelete = { id: _id }; 
    var json = $.toJSON(recordToDelete); 
    $.ajax({ 
     url: '/MortagePayment/RemoveMortageRecord', 
     type: 'POST', 
     dataType: 'json', 
     data: json, 
     contentType: 'application/json; charset=utf-8', 
     success: function (data) { 
      $("#RecordListPartialView").empty(); 
      $("#RecordListPartialView").html(data.Message); 
     } 
    }); 
}); 
$(".AddLink").click(function() { 
    var _year = $("#NewRecord_year").val(); 
    var _month = $("#NewRecord_month").val(); 
    var _mortageValue = $("#NewRecord_mortageValue").val(); 
    var newRecord = { year: _year, month: _month, mortageValue: _mortageValue }; 
    var json = $.toJSON(newRecord); 
    $.ajax({ 
     url: '/MortagePayment/AddMortageRecord', 
     type: 'POST', 
     dataType: 'json', 
     data: json, 
     contentType: 'application/json; charset=utf-8', 
     success: function (data) { 
      $("#RecordListPartialView").empty(); 
      $("#RecordListPartialView").html(data.Message); 

      $("#NewRecord_year").val(0); 
      $("#NewRecord_month").val(0); 
      $("#NewRecord_mortageValue").val(0); 
     } 
    }); 
});

<div id="RecordListPartialView"> 
    @Html.Partial("MortageRecordList", Model.MortageRecordList) 
</div>

（2）的局部视图

<table id="mortageRecordListTable"> 
    <tr> 
     <th colspan=4>Current reductions</th> 
    </tr> 
    <tr> 
     <th>Year</th> 
     <th>Month</th> 
     <th>Value</th> 
     <th></th> 
    </tr> 

    @foreach (var item in Model) { 
     <tr id="[email protected]"> 
      <td> 
       @item.year 
      </td> 
      <td> 
       @item.month 
      </td> 
      <td> 
       @item.mortageValue 
      </td> 
      <td>     
       <p class="RemoveLink" data-id="@item.mortageRecordId">Remove</p> 
      </td> 
     </tr> 
    }    
</table>

（3）和所述控制器：

[HttpPost] 
public ActionResult AddMortageRecord(MortageRecord newRecord) { 
    var mortageRecordSet = MortageRecordSet.GetMortageSet(this.HttpContext); 
    if (ModelState.IsValid) 
     mortageRecordSet.AddMortageRecord(newRecord); 
    string partialViewHtml = RenderPartialViewToString("MortageRecordList", mortageRecordSet.GetMortageItems()); 

    return Json(new { Success = true, Message = partialViewHtml }); 
} 

[HttpPost] 
public JsonResult RemoveMortageRecord(int id) { 
    var mortageRecordSet = MortageRecordSet.GetMortageSet(this.HttpContext); 
    mortageRecordSet.RemoveMortageRecord(id);    
    string partialViewHtml = RenderPartialViewToString("MortageRecordList", mortageRecordSet.GetMortageItems()); 

    return Json(new { Sucess = true, Message = partialViewHtml }); 
}

来源

2011-12-16 mugen

如果我理解正确。

如果我预装表中，RemoveLink工作正常，但一旦DIV “RecordListPartialView”通过AJAX更新，它不再起作用。

改变你对.click事件与.live

$(".RemoveLink").live("click",function(){ 
    //any click event code comes here 
});

来源

2011-12-16 23:25:13 tkt986

就是这样！那是什么魔法？ – mugen 2011-12-16 23:32:51

我认为您可能需要再次调用click处理程序，以便将其重新附加到新的DOM元素，因为当您实际调用$(".RemoveLink").click()和$(".AddLink").click()函数时，jQuery会遍历所有元素，而不是每次都会延迟点击了一些东西。

来源

2011-12-16 23:14:30 jzila

OK，你有没有在一个单独的.js脚本文件，一个jQuery事件，并附加一个事件到PartialView中的元素？

好！如果是的话，每当PartialView再次呈现自己（不管是什么原因），它的所有绑定事件都将消失！那么在渲染PartialView之后应该再次重新绑定它们。

有不同的方法，例如：

在Ajax.ActionLink（或任何Ajax调用，使 PartialView重新渲染）设置的onSuccess到一个jQuery功能重新绑定PartialView的事件。
将所有jquery事件绑定代码从单独的.js 脚本文件移至PartialView文件（cstml）的内部。在这种情况下，每次PartialView被渲染时，这些事件将被再次绑定。

来源

2013-04-10 04:29:38

ASP.NET MVC 3 - 阿贾克斯更新表 - 型号

回答

相关问题