奇怪的问题Ajax使mvc悔过的网格寻呼机成为可能

时间:2022-11-24 13:59:31

Let's explain the context: I have a person form inside a jquery dialog that has some tabs to group informations related to this person (Personal data, addresses, emails, position, etc.)

让我们解释一下上下文:我在jquery对话框中有一个person表单,它有一些选项卡来分组与这个person相关的信息(个人数据、地址、电子邮件、位置等)。

One of the tab show the Person addresses through an ajax call to this controller action

其中一个选项卡通过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 );
}

then I have on the partial the following code that create the grid and the pager

然后在部分代码中创建网格和寻呼机

<%= 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}") %>

To enable ajax on the pager I have used the following code:

为了在寻呼机上启用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);
        }
    });
});

Everything works very good except one thing. When I click on a paging link there are infinite request to the server as you can see from the following Fiddler screenshot. What is going to happen???? 奇怪的问题Ajax使mvc悔过的网格寻呼机成为可能

除了一件事,一切都很好。当我点击一个分页链接时,会有对服务器的无限请求,您可以从下面的Fiddler屏幕截图中看到。会发生什么???

Update: Following Vinzenz advice I have added the event.stopPropagation() and return false instructions after the ajax call. Then I have

更新:根据Vinzenz的建议,我添加了event.stopPropagation(),并在ajax调用之后返回错误的指令。然后我有

  • first clicked once on the Next link of the pager (request 48) and Fiddler showed 1 request.
  • 第一次单击寻呼机的下一个链接(请求48),Fiddler显示1个请求。
  • Clicked on the Previous link. Fiddler shows two request (49 and 50)
  • 单击前面的链接。Fiddler显示两个请求(49和50)
  • Clicked again on the Next link. Fiddler reports 4 request (51, 52, 53 and 54)
  • 再次点击下一个链接。Fiddler报告4个请求(51、52、53和54)

Generally if I continue clicking back and forth the number of requests made to the server is always increasing.... :(

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

奇怪的问题Ajax使mvc悔过的网格寻呼机成为可能

2 个解决方案

#1


1  

I would for test reasons return false; from this event handler, or call event.stopPropagation();

我将出于测试原因返回false;从这个事件处理程序,或调用event. stoppropagation ();

It could be that there's some thing going on with your code somewhere else that you have registered the same handler twice or more times and they somehow trigger each other or whatever. It's hard to tell without having more information.

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

However try to use my suggestions and you will see if it helps.

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

#2


1  

my suggestion is to live attach is to "live attach" your code:

我的建议是live attach是“live attach”您的代码:

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

on the page where you defined the tab (the "parent page"), not on the partial view.

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

#1


1  

I would for test reasons return false; from this event handler, or call event.stopPropagation();

我将出于测试原因返回false;从这个事件处理程序,或调用event. stoppropagation ();

It could be that there's some thing going on with your code somewhere else that you have registered the same handler twice or more times and they somehow trigger each other or whatever. It's hard to tell without having more information.

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

However try to use my suggestions and you will see if it helps.

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

#2


1  

my suggestion is to live attach is to "live attach" your code:

我的建议是live attach是“live attach”您的代码:

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

on the page where you defined the tab (the "parent page"), not on the partial view.

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