مشكلة غريبة Ajax تمكين MVCContrib Pager

Question

دعنا نوضح السياق: لدي نموذج شخص داخل مربع حوار 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 لقد أضفت event.stopPropagation() و return false تعليمات بعد مكالمة AJAX. ثم لدي

• تم النقر عليها أولاً مرة واحدة على الرابط التالي من Pager (الطلب 48) وأظهر Fiddler طلب واحد.
• النقر على الرابط السابق. يعرض Fiddler طلبين (49 و 50)
• النقر مرة أخرى على الرابط التالي. تقارير Fiddler 4 طلب (51 ، 52 ، 53 و 54)

بشكل عام ، إذا واصلت النقر ذهابًا وإيابًا ، فإن عدد الطلبات المقدمة إلى الخادم تتزايد دائمًا .... :(

Answer 1

أود لأسباب الاختبار return false; من معالج الحدث هذا ، أو اتصل event.stopPropagation();

قد يكون هناك شيء ما يحدث مع الكود الخاص بك في مكان آخر قمت بتسجيله نفس المعالج مرتين أو أكثر وتؤدي بطريقة ما إلى بعضها البعض أو أي شيء آخر. من الصعب معرفة دون الحصول على مزيد من المعلومات.

ومع ذلك ، حاول استخدام اقتراحاتي وسترى ما إذا كان يساعد.

Answer 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);
        }
    });
});

في الصفحة التي حددت فيها علامة التبويب ("صفحة الأصل") ، وليس على العرض الجزئي.