2

让我们来解释一下上下文:我有一个人形式在一个jQuery对话框中,它有一些标签来分组与这个人相关的信息(个人数据,地址,电子邮件,位置等)奇怪的问题启用了Ajax MVCContrib Grid分页器

其中一个选项卡显示通过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截图中看到对服务器有无限的请求。会发生什么? alt text

更新: 继Vinzenz意见,我已经在Ajax调用后添加的event.stopPropagation()return false说明。然后我有

  • 第一次点击一次在寻呼机的下一个链接(请求48)和提琴手显示1请求。
  • 点击上一个链接。 Fiddler显示两个请求(49和50)
  • 再次点击Next链接。菲德勒报道4请求(51,52,53和54)

一般来说,如果我继续单击来回向服务器发出请求的数量一直不断增加.... :(

alt text

回答

1

我会从这个事件处理程序测试的原因return false;,或致电event.stopPropagation();

这可能是因为有一些事情你的代码别的地方去上你已经注册了相同的处理两次或多次和他们莫名其妙地TR igger对方或任何。没有更多的信息很难说。

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

+0

你好Vinzenz,谢谢你的回答。我已添加您建议的代码。请看看我的问题编辑了解详情。 – Lorenzo 2010-10-13 23:33:22

+0

我认为你使用'live'来注册处理程序。请点击此处尝试以下操作:'$(“。paginationRight> a”)。click(function(event){' – Vinzenz 2010-10-13 23:43:16

+0

在您的第一个建议之前,我已经尝试使用click和live来注册处理程序,并且问题总是存在。现在看来它正在工作。再次感谢您的建议,我很想了解更多关于此的信息....:O – Lorenzo 2010-10-13 23:54:54

1

我的建议是住重视是“活连接”你的代码:

$(".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); 
     } 
    }); 
}); 

在页面上,你定义的选项卡(“父页面”),而不是在局部视图。