2

私は比較的 Ja​​vaScript / jQuery を使い始めたばかりで、ASP.NET の経験は 6 か月未満です。ASP.NET w/SQL Server アプリケーション用のカラーボックスプラグインを使用して問題が発生しました。

現在、カラーボックスを使用して、開発中の PhotoGallery でサムネイル画像の大きな表示を開いています。すべて正常に動作しているようです。カラーボックス表示で写真をグループ化できます。

私のページングを除いてすべてが機能ListViewするため、1 ページあたり 40 枚の画像しか表示されません。Colorbox は、現在ページにある写真のみをグループ化しListViewます。

.ASPX ページListView(きれいではありませんが、機能します)

<ItemTemplate>
    <td id="Td2" runat="server" style="padding:10px">
        <a class='colorbox' href="/Photos/AllPhotos/<%#Eval("FileName") %>" 
            title="<strong><%# Eval("Title") %></strong> photo by: <%#Eval("Name") %>">
        <img src="/Photos/AllPhotos/Thumbnail/<%#Eval("FileName") %>"
            title="<%# Eval("Title") %>" /></a>
    </td>
</ItemTemplate>

カラーボックスをバインドするための JavaScript:

function pageLoad() {
    $("a.colorbox").colorbox({
        rel: "gal",
        maxWidth: "100%",
        maxHeight: "100%"
    })
};

ListView私が望むのは、現在のページだけでなく、にバインドされているすべての写真にカラーボックスをバインドすることです。したがって、理想的には、ユーザーがギャラリー内のすべての写真を (サムネイルの 1 つをクリックして) ページをめくることができ、カラーボックスを閉じる必要がなく、次のページに移動し、カラーボックスを再度開くことができます。

のすべての写真にカラーボックスをバインドする簡単な方法はありListViewますか? いくつかの「ハック」方法 (写真を hiddenListViewにバインドし、表示された写真とグループ化するなど) を考えることができますが、使いやすいアプリケーションを開発しようとしています!

有望そうなものを見つけましたが、これまで JSON / SQL を使用したことがないので、そのように行かなければならない場合、学習曲線が必要になります。

私は仕事でこれらのフォーラムをよく利用しているので、ここが最初にアドバイスを求めた場所でした。

(初投稿なので見落としていたらすみません)

編集

まあ、私は仕事を成し遂げる何かを考え出しましたが、私が望んでいたほどうまくいかないかもしれません. 私がやったのは、表示されていないすべての写真を入力した2番目の配列を作成し、それを非表示のListViewにバインドしてから、表示されている写真で非表示の写真をカラーボックスにグループ化することでした。私が望んでいたほどきれいではなく、うまく機能しているように見えるので、私はまだより良い方法（もしあれば）を受け入れていますが、今のところ満足しています.

4

1 に答える 1

0

これは、データテーブルを使用してすべてのデータをサーバー上の ListView にバインドし (ListView でページングを使用しないでください)、クライアント側でよりスムーズなページングを取得する方法です。これは引き続きカラーボックスで機能します。

ListView の LayoutTemplate を設定します。「datatable」のクラスを持つテーブルが必要です。また、データテーブルを機能させるには、thead と tbody が必要です。また、jQuery を使用してテーブルを選択する方法も必要です (ここでは、ID「tblStuff」を作成し、そこにあることを確認しています)。 runat="server" ではありません)。また、デザイン ビューで LayoutTemplate を作成した場合は注意してください。Visual Studio には、あるテーブルを別のテーブル内にネストする習慣があるためです。

<LayoutTemplate>
    <table id="tblStuff" class="datatable">
        <thead><tr><th>...(Your <th> elements go here)...</tr></thead>
        <tbody><tr ID="itemPlaceholder" runat="server"></tr></tbody>
    </table>
</LayoutTemplate>

スクリプトでは、これを行うことができます：

$(document).ready(function() {
    $('a.colorbox').colorbox({
        // just how you had it before.
    });

    $('#tblStuff').dataTable({
        // here is where you'll want to set some of the many many options for datatables.
        // See their documentation.
    });
});

それだけです。ItemTemplate を変更しないでおくことができるはずです。

于 2012-06-29T22:38:16.800 に答える