Ajax启用MVCContrib网格寻呼机的奇怪问题

Question

让我们解释一下上下文：我在 jquery 对话框中有一个人员表单，其中有一些选项卡用于对与此人相关的信息进行分组（个人数据、地址、电子邮件、职位等）。

其中一个选项卡通过 ajax 调用显示人员地址对于这个控制器操作

[HttpGet]
public ActionResult GetAddresses( int id, int? page ) {
    IEnumerable<AddressModel> list = _manager.GetAddressesByContact( id ).AsPagination( page ?? 1, 2 );
    ViewData["__ContactID"] = id;
    return PartialView( "AddressList", list );
}

，我有部分以下代码来创建网格和寻呼机

<%= Html.Grid(Model).Columns( column => {
    column.For(addr => addr.GetAddressTypeList().First(at => at.AddressTypeID == addr.AddressTypeID).Description).Named("Tipo");
    column.For( addr => ( addr.IsPostalAddress ) ? Html.Image( "/_assets/images/PostalAddress.gif", "Indirizzo per la corrispondenza" ) : "&nbsp;" ).Encode(false).Named("Posta");
    column.For(addr => addr.StreetAddress + "<br />" + addr.ZipCode + ", " + addr.City + "<br />" + 
        addr.GetProvinceList().First( p => p.ProvinceID == addr.ProvinceID).Description + ", " +
        addr.GetCountryList().First( c => c.CountryID == addr.CountryID).Name).Named("Indirizzo").Encode(false);
    column.For( addr => 
        "<a href='/Contact/EditAddress/" + addr.AddressID + "' class='ajaxLink' title='Modifica'><img src='/_assets/images/edit.png' alt='' /></a>"
        ).Attributes( style => "width:16px").Encode(false);
    column.For( addr =>
        "<a href='/Contact/DeleteAddress/" + addr.AddressID + "' class='ajaxLink' title='Elimina'><img src='/_assets/images/delete.png' alt='' /></a>"
        ).Attributes( style => "width:16px" ).Encode( false );
    } ).Attributes( @class => "table-list" )%>

<br />
<%= Html.Pager((IPagination)Model).First("Prima").Next("Successiva").Previous("Precedente").Last("Ultima").Format("Visualizzati {0}-{1} di {2}") %>

为了在寻呼机上启用ajax，我使用了以下代码：

$(".paginationRight > a").live("click", function(event) {
    //stop the browser from going to the relevant URL
    event.preventDefault();
    $.ajax({
        type: "get",
        dataType: "html",
        url: this.href,
        data: {},
        success: function (response) {
            $("#addressListPlaceholder").html('').html(response);
        }
    });
});

除了一件事之外，一切都运行得很好。当我单击分页链接时，会向服务器发出无限请求，如下面的 Fiddler 屏幕截图所示。会发生什么事情？？？

更新： 根据 Vinzenz 的建议，我在 ajax 调用后添加了 event.stopPropagation() 和 return false 指令。然后我

• 首先单击了寻呼机的 Next 链接（请求 48），Fiddler 显示了 1 个请求。
• 单击上一个链接。 Fiddler 显示两个请求（49 和 50），
• 再次单击“下一步”链接。 Fiddler 报告 4 个请求（51、52、53 和 54）

一般来说，如果我继续来回单击，向服务器发出的请求数量总是会增加.... :(

Answer 1

出于测试原因，我会从该事件处理程序中 return false; ，或调用 event.stopPropagation();

可能是您的代码在其他地方发生了一些问题，您已注册同一个处理程序两次或更多次，并且它们以某种方式相互触发或发生其他情况。如果没有更多信息，很难判断。

不过，请尝试使用我的建议，您会看到它是否有帮助。

Answer 2

我的建议是实时附加是“实时附加”您的代码：

$(".paginationRight > a").live("click", function(event) {
    //stop the browser from going to the relevant URL
    event.preventDefault();
    $.ajax({
        type: "get",
        dataType: "html",
        url: this.href,
        data: {},
        success: function (response) {
            $("#addressListPlaceholder").html('').html(response);
        }
    });
});

在您定义选项卡的页面（“父页面”）上，而不是在部分视图上。