ASP.NET MVC 3 - Ajax 更新表 - 模型

Question

我正在尝试使用ajax更新记录列表，在表格中表示，其中每条记录作为一个javascript删除链接。如果我预加载表，RemoveLink 工作正常，但是一旦通过 ajax 更新 div“RecordListPartialView”，它就不再工作。

我用 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 });
}

Answer 1

如果我理解正确的话。

如果我预加载表格，RemoveLink 工作正常，但是一旦 div
“RecordListPartialView”通过ajax更新，它不再起作用。

将您的 .click 事件更改为 .live

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

Answer 2

我认为您可能需要再次调用单击处理程序才能将其重新附加到新的 DOM 元素，因为当您实际调用 $( 时，jQuery 会迭代具有正确类的所有元素".RemoveLink").click() 和 $(".AddLink").click() 函数，在单击某些内容时不会延迟。

Answer 3

好的，您是否在单独的 .js 脚本文件中有一个 jquery 事件，并将一个事件附加到 PartialView 内的元素？

出色地！如果是，每当 PartialView 再次呈现自身时（无论原因是什么），它的所有绑定事件都将消失！那么你应该在渲染 PartialView 后再次重新绑定它们。

有不同的方法，例如：

1. 在Ajax.ActionLink（或任何使
   PartialView 重新渲染）将 OnSuccess 设置为 jquery 函数
   重新绑定 PartialView 的事件。

2. 从单独的 .js 中移动所有 jquery 事件绑定代码
   脚本文件添加到 PartialView 文件 (cstml) 的内部。在
   在这种情况下，每次渲染 PartialView 时，这些事件
   将再次绑定。