奇妙な問題AjaxがMVCCONTRIBグリッドページャーを有効にしました

StackOverflow https://stackoverflow.com/questions/3928628

質問

コンテキストを説明しましょう。私は、この人に関連するグループ情報にいくつかのタブを持っているjQueryダイアログ内に人のフォームを持っています（個人データ、住所、電子メール、ポジションなど）

タブの1つは、このコントローラーアクションへの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);
        }
    });
});

1つを除いて、すべてが非常にうまく機能します。ページングリンクをクリックすると、次のフィドラースクリーンショットからわかるように、サーバーへの無限の要求があります。何が起こるのですか????alt text

アップデート：Vinzenzのアドバイスに続いて、私は追加しました event.stopPropagation() と return false Ajax呼び出し後の指示。で、〜がある

  • 最初にページャーの次のリンク（リクエスト48）で1回クリックし、フィドラーは1つのリクエストを示しました。
  • 前のリンクをクリックしました。フィドラーは2つのリクエストを示しています（49と50）
  • 次のリンクでもう一度クリックしました。 Fiddlerは4つのリクエストを報告します（51、52、53、54）

一般的に、サーバーに行われたリクエストの数が常に増加していることを前後にクリックし続けると... :(

alt text

役に立ちましたか？

解決

私はテスト上の理由からです return false; このイベントハンドラーから、または電話してください event.stopPropagation();

同じハンドラーを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);
        }
    });
});

部分的なビューではなく、タブ（「親ページ」）を定義したページで。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top