ComponentOne Studio MVC4 Classic ヘルプ
Wijwizard を備えるページャの使用
MVC Classic ウィジェット > Wijwizard > Wijwizard を備えるページャの使用

wijpager ウィジェットと wijwizard ウィジェットを一緒に使用して、ページ化されたナビゲーションシステムを作成します。 ページャウィジェットの "nextpreviousFirstLast" モードまたは "numeric" モードのいずれかを使用できます。 このトピックでは、ページャモードを "numeric" に設定した状態で、２つのウィジェットを一緒に使用する方法を示します。

  1. ASP.NET MVC 4 Wijmo アプリケーションを作成します。
  2. ソリューションエクスプローラで、Views → Shared フォルダを展開し、_Layout.cshtml をダブルクリックしてファイルを開きます。
  3. 以下のマークアップをページの <body> タグ内に追加します。
    ソースビュー
    コードのコピー 
    <div id="pages">
      <div>
             <p>
                    Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec
                    arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
                    Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
                    leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales
                    tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel
                    pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
                    Nunc tristique tempus lectus.</p>
      </div>
      <div>
             <p>
                    Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra
                    massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget
                    luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
                    aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent
                    in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat
                   nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque
                    convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod
                    felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
      </div>
      <div>
             <p>
                    Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate,
                    pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
                    Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
                    nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
                    pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem
                    enim, pretium nec, feugiat nec, luctus a, lacus.</p>
             <p>
                    Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam
                    ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing
                    velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula
                    faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero
                    sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor
                   ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas
                    commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit
                    hendrerit.</p>
      </div>
      <div>
             <h4>
                    Studio Enterprise</h4>
             <p>
                    ７つのプラットフォーム、数百のコントロール、１つの Studio。 WinForms、WPF、ASP.NET、Silverlight、iPhone、Mobile、
                    および ActiveX 対応ツールを使用して、
                    すばらしいデスクトップ、Web、およびモバイルアプリを構築します。</p>
      </div>
      <div>
             <h4>
                    Studio for WinForms</h4>
             <p>
                    65 を超える .NET コントロール。他のどこからも取得できないコントロールを含みます。 Studio for
                    WinForms は、何百万もの行を含むグリッドから無制限のポイントを含むグラフまで、あらゆるタスクを
                    処理することができます。</p>
      </div>
      <div>
             <h4>
                    Studio for WPF</h4>
             <p>
                    Studio for WPF は、グリッド、スケジューラ、グラフ、レポートなどに含まれる、
                    豊富なデータ視覚化にバインドされた高度なデータから得られるすべてを提供します。</p>
      </div>
      <div>
             <h4>
                    Studio for ASP.NET AJAX</h4>
             <p>
                    より少ないコードでより多くを実行します。 45 を超えるスタイルが設定され、多くの機能が搭載された、使いやすいコントロールが
                    AJAX、CSS、および XHTML を含む Web 標準に構築されます。</p>
      </div>
      <div>
             <h4>
                    Studio for Silverlight</h4>
             <p>
                    他のどこにも見つけることができない、きわめて強力な機能を持つ Silverlight コントロール。 ComponentOne Studio を
                    ダウンロードしますか? Silverlight で、Web の輝きを再生し、確認してください。
      </div>
      <div>
             <h4>
                    Studio for iPhone</h4>
             <p>
                  既存の ASP.NET スキルセットを使用して、Web アプリを iPhone に適用します。 ComponentOne
                    Studio を使用しますか? iPhone では、iPhone UX が提供されます。</p>
      </div>
</div>
  4. 以下の </div> DOM 要素を追加し、ページャを作成します。
    ソースビュー
    コードのコピー 
    <div id="pager">
</div>
  5. 以下のスクリプトを使用して、両方のウィジェットを初期化します。
    ソースビュー
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#pages").wijwizard({
            navButtons: 'none'
        });
        $("#pager").wijpager({
            pageCount: $("#pages").wijwizard('count'),
            pageIndex: $("#pages").wijwizard('option', 'activeIndex'),
            mode: "numeric",
            pageindexchanged: function () {
                var pageIndex = $("#pager").wijpager("option", "pageIndex");
                $("#pages").wijwizard({ activeIndex: pageIndex });
            }
        });
    });
      </script>
  6. プロジェクトを実行します。 その結果、２つのウィジェットは次の図のようになります。

     

関連トピック
Wijwizard の単純なビューの設定

 

 

Copyright © GrapeCity inc. All rights reserved.