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

【问题标题】：ASP.NET MVC 3 - Ajax update table - modelASP.NET MVC 3 - Ajax 更新表 - 模型
【发布时间】：2011-12-16 22:56:59
【问题描述】：

我正在尝试使用 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="row-@item.mortageRecordId">
            <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 });
}

【问题讨论】：

标签： javascript ajax asp.net-mvc asp.net-mvc-3 asp.net-mvc-partialview

【解决方案1】：

如果我理解正确的话。

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

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

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

【讨论】：

这里有一个小更新。从 1.7 开始，您应该改用它： $(".RemoveLink").on("click", function() { ... }); .live 从 1.7 开始贬值并在 1.9 中删除。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

有不同的方法，例如：

在Ajax.ActionLink（或任何使 PartialView re-render ) 将 OnSuccess 设置为一个 jquery 函数重新绑定 PartialView 的事件。
从单独的 .js 中移动所有 jquery 事件绑定代码脚本文件到您的 PartialView 文件 (cstml) 的内部。在这种情况下，每次渲染 PartialView 时，那些事件将再次被绑定。

【讨论】：