ASP.NET(MVC4)でbxSliderを実装する

最近ちょこちょことASP.NET(MVC4)を弄ってたりするが、ページ内で画像がスライドされる機能が欲しくなった。調べてみるとjQueryのbxSliderで簡単に実装できるようなので実装してみた。

ちなみに現在の環境
・Windows7Ultimate
・InternetExplorer10
・Microsoft Visual Studio Express 2012 for WEB


■１．基本ページの作成

最初にASP.NET(MVC4)プロジェクトの生成。

(1) Microsoft Visual Studio Express 2012 for WEBを起動する
(2) メニューバーから「ファイル」→「新しいプロジェクト」を選び、「テンプレート」→「Web」を開いて「ASP.NET MVC4 Web アプリケーション」を選ぶ。
(3) プロジェクト名を適当にMvcSliderという名称にして「OK」を押す。
(4) 「テンプレートの選択」では「基本」を選び(「空」だとちょっと便利なファイルが足りなくて扱いづらいし、「インターネットアプリケーション」だといらないページが付いてくるので)、「OK」を押す(ビューエンジンはデフォルトの「Razor」)。

MvcSliderのプロジェクトが構成されたら、次に表示用のページを作成。

(5) ソリューションエクスプローラーから「Controller」を選び、右クリックする。
(6) 「追加」→「コントローラー」を選び「コントローラーの追加」ダイアログを開く。
(7) 「コントローラー名」はHomeControllerにして(RouteConfig.vbが"Home"コントローラをデフォルトで指定してるから)、「テンプレート」は空MVCコントローラーのままにして、「追加」を押す。

これでHomeというコントローラーが出来てるので(デフォルトでIndexページを開くためのコードも添えられてる)、そのコントローラー名に対応するViewを作成。

(8) ソリューションエクスプローラーから「Views」を選び、右クリックする。
(9) 「追加」→「新しいフォルダ」を選び、フォルダ名を「Home」にして(コントローラー名と一致させる)、フォルダを作成する。
(10) 「Home」フォルダを右クリックする。
(11) 「追加」→「ビュー」を選び「ビューの追加」ダイアログを開く。
(12) 「ビュー名」をIndexにして(HomeController.vbのIndexメソッド名と一致させる。ビューエンジンはデフォルトのまま)、追加を押す。

ここまで終わったらデバッグしてみる(今回のサンプルではModelは必要ないので作成しない)。Index.vbhtmlページ(タグH2でIndexという文字)が表示されてればOK。



■２．bxSliderの実装

次にbxSliderプラグインの実装。公式ページ(http://bxslider.com/)からダウンロードしてjs,cssファイルを追加しても良いけど、NuGetからでも出来るのでそちらでやってみる。
１．からの続き…

(1) VisualStudioのメニューバーから「ツール」→「ライブラリパッケージマネージャ」→「ソリューションNuGetパッケージの管理」を選ぶ。
(2) オンライン検索で「bxSlider」と打ち込んでオンライン検索し、「Scalejs-slider-bxslider」を追加する。

これでbxsliderのダウンロードは完了だが、ページで使用できるようにBundleにbxsliderのcssとjsをインクルードする。

(3) ソリューションエクスプローラーから「App_Start」を開き、BundleConfig.vbソースを表示する。
(4) RegisterBundlesメソッド内で、以下のオレンジの部分を追加。

Imports System.Web
Imports System.Web.Optimization

Public Class BundleConfig
    ' Bundling の詳細については、http://go.microsoft.com/fwlink/?LinkId=254725 を参照してください
    Public Shared Sub RegisterBundles(ByVal bundles As BundleCollection)
        bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
                   "~/Scripts/jquery-{version}.js", "~/Scripts/jquery.bxslider*"))

        bundles.Add(New ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"))

        bundles.Add(New ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"))


        ' 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備が
        ' できたら、http://modernizr.com にあるビルド ツールを使用して、必要なテストのみを選択します。
        bundles.Add(New ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"))

        bundles.Add(New StyleBundle("~/Content/css").Include("~/Content/site.css", "~/css/jquery.bxslider.css"))
       
        (以下略)
       

備考：
・バンドル"~/bundles/jquery"と"~/Content/css"に追加する。何故なら「Views」→「Shared」内の_Layout.vbhtmlでこの2つのバンドルを使用してるから。
・自分で新たにバンドルを追加したければ_Layout.vbhtml、もしくはIndex.vbhtmlページでRenderすることを忘れずに。

これでbxSliderプラグインの実装は完了。


■３．スライダー用イメージの追加

スライドしたい画像と配置するフォルダを用意する。画像はWindows7が持ってる画像を借りる。

(1) ソリューションエクスプローラーからMvcSlider(プロジェクト名)を右クリックして、「追加」→「新しいフォルダ」を選ぶ。
(2) フォルダ名をImageにしてフォルダを作成。
(3) (3)の「Image」フォルダを右クリックして、「追加」→「既存の項目」を選ぶ。
(4) ファイルダイアログが開くので「ピクチャ」内の「サンプルピクチャ」(C:\Users\Public\Pictures\Sample Pictures)から適当にイメージファイルを選ぶ。

自分はChrysanthemum.jpg、Desert.jpg、Hydrangeas.jpg、Jellyfish.jpg、Koala.jpgを選んだ。


■４．ビューに実装

最後にHomeのビュー(Index.vbhtml)を表示してコーディング。
以下をコピペ。

@Code
    ViewData("Title") = "Index"
End Code

<h2>Index</h2>
<br />
<ul id="bxslider">
    <li><img src="~/Image/Chrysanthemum.jpg" /></li>
    <li><img src="~/Image/Desert.jpg" /></li>
    <li><img src="~/Image/Hydrangeas.jpg" /></li>
    <li><img src="~/Image/Jellyfish.jpg" /></li>
    <li><img src="~/Image/Koala.jpg" /></li>
</ul>
@Section Scripts
    <script type="text/javascript">
        $(document).ready(function () {
            $('#bxslider').bxSlider({
                auto: true,
                pause: 2000,
                speed: 1000,
                mode: 'horizontal',
                autoControls: true
            });
        });

    </script>
End Section

スライドさせたい画像をidでくくって、そのidはjQueryでbxsliderを指定しておくだけ。scriptタグは@Section Scripts内に配置しておく。(一応Razor的に…)
ちなみにオレンジの部分でスライダーのプロパティを追加・変更できる。詳しくはここ(http://bxslider.com/options)を参考に。

これで完了。実行してみると



こんな感じで画像がスライドされる。見栄えは大事だね～。ということでjQueryもちょこちょこ勉強したいかも。