奇怪的问题 Ajax enabled MVCContrib Grid pager答案

【问题标题】：Strange problem Ajax enabled MVCContrib Grid pager奇怪的问题 Ajax enabled MVCContrib Grid pager
【发布时间】：2011-04-25 03:00:11
【问题描述】：

让我们解释一下上下文：我在一个 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）

通常，如果我继续来回单击，向服务器发出的请求数总是在增加.... :(

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-2 jquery mvccontrib mvccontrib-grid

【解决方案1】：

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

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

但是尝试使用我的建议，你会看到它是否有帮助。

【讨论】：

您好 Vinzenz，感谢您的回答。我已经添加了您建议的代码。请查看我的问题编辑以了解详细信息。
我认为是你使用'live'来注册处理程序。请用点击试试这个：$(".paginationRight > a").click(function(event) {
在您提出第一个建议之前，我曾尝试使用 click 和 live 来注册处理程序，但问题始终存在。现在看来它正在工作。再次感谢您的建议，我很想了解更多关于此的信息......：O
api.jquery.com/live 说：Description: Attach a handler to the event for all elements which match the current selector, now and in the future. 这里有趣的部分是“......并且在未来”似乎在每次点击时都会创建另一个具有 .paginationRight 类的元素并且它获取分配的处理程序，该处理程序执行所有请求。但是我有点困惑，为什么他们似乎都被解雇了。我唯一能想到的是，有多个处理程序以某种方式注册到同一个元素左右。
是的。我开始只使用 live 来表示“将来”的文本，因为我在每个分页方法中都完全替换了表格标记。正如您所说，问题是“为什么这些请求被解雇了......

【解决方案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);
        }
    });
});

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

【讨论】：