奇怪的问题Ajax启用了MVCContrib Grid寻呼机

时间:2010-10-13 22:40:41

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

让我们解释一下上下文:我在jquery对话框中有一个人员表单,其中有一些选项卡可以对与此人相关的信息进行分组(个人数据,地址,电子邮件,职位等)

其中一个选项卡通过对此控制器操作的ajax调用显示Person地址

[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),Fiddler显示1个请求。
  • 点击上一个链接。提琴手显示两个请求(49和50)
  • 再次单击“下一步”链接。 Fiddler报告了4个请求(51,52,53和54)

通常,如果我继续来回点击,对服务器的请求数量总是在增加...... :(

alt text

2 个答案:

答案 0 :(得分:1)

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

可能是你的代码在其他地方发生了一些事情,你已经注册了相同的处理程序两次或更多次,并且它们以某种方式触发彼此或其他任何东西。没有更多信息就很难说清楚。

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

答案 1 :(得分: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);
        }
    });
});

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