asp.net-mvcasp.net-mvc-2jquerymvccontribmvccontrib-grid

Strange problem Ajax enabled MVCContrib Grid pager


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.)

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

[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:

$(".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???? alt text

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

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

alt text


Solution

  • I would for test reasons return false; from this event handler, or call 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.