4

コメントセクションに単純な無限のページ付けを実装しようとしています。これは、下部にある[もっと見る]をクリックすると、さらにいくつかのコメントが読み込まれますが、前のコメントの状態は維持されるYouTubeコメントに似ています。

私は、Ajaxコントロールツールキットと少しのJqueryを備えたListViewを備えたUpdatePanelでそれを行うことができると思いますが、いくつかのガイダンスが必要です。戻ってきた最初の4つのアイテムを表示して、それらをListViewにデータバインドすることを考えていました。リストビューは、[もっと見る]ボタンが付いたUpdatePanelにラップされ、ボタンをクリックすると、データソースにさらに4つ追加されて再バインドされます。 ListViewですが、これでは4つのコメントが下にスムーズに追加されず、ListViewセクションが更新されて新しいコメントが表示されます。

これを行うためのよりスムーズでより良い方法はありますか？私はWebformsを使用しています。

4

1 に答える 1

1

正直なところ、このためのWebフォームモデル全体（を含むUpdatePanel）は避けたいと思います。この場合、多くのオーバーヘッドと複雑さが追加されます。

AJAXリクエストをハンドラー（それが何であれ、この目的のために構築されたASPXページ、Webメソッド、HttpHandler、MVCコントローラーなど）に送り返し、JSONを返します。コメントは構造的にかなり単純なので、必要に応じて関連するマークアップを挿入/構築するのは難しくありません。

このアプローチを使用して、ASP.Net Webフォームアプリに無限のコメントシステムを構築しましたが、これはうまく機能します。ページは、ユーザーコントロールを備えた通常のASPXとしてレンダリングされます。コメントのユーザーコントロールは、ほんの少しのスクリプトを出力します。

コントローラーへのリクエストを使用して最初のコメントを読み込み、ユーザーがスクロールすると、コントローラーがセットの最後に到達したことを通知するまで、コントローラーに次のデータブロックを要求するだけです（キャップ​​を追加することもできます）。ユーザーがあまりにも多くのレコードをロードしてブラウザをクラッシュさせないこと）。

例

  • jQuery.ajax（）を使用してリクエストを行う
  • 成功コールバックでは、渡されたデータをJavaScriptオブジェクトとして扱うことができます
  • すべてのアイテムをループして、DOMノードを作成/追加します。
var element = $("#comments"); // this is your node with all comments

$.ajax({
    type: "POST",
    url: "ClientApi/Comments/_GetPaged", // this handler builds JSON
    dataType: "json",
    data: { pageIndex: 5 }, // your input values here
    cache: false,
    success: function (data) {
        for (var i = 0; i < data.length; i++) {
            var comment = data[i];
            var itemElement = $("<div/>").appendTo(element);

            // do whatever you want here, just remember that user input 
            // should be sanitized somewhere during the process
            itemElement.html(comment.text);
        }
    }
});
于 2012-12-11T20:25:16.653 に答える