UpdatePanel 内での Slick.js の使用方法 -非同期通信後のスライダー表示方法-

UpdatePanel 内での Slick.js の使用方法 -非同期通信後のスライダー表示方法- | asp.net

2018/06/30
14:05

今回は asp.net において簡単に複数の画像を横並びのスライダーとして表示ができる Slick.js を非同期通信の UpdatePanel コントロール内で使用する方法についてご紹介いたします。
尚、スライダーとして表示するのは基本的に画像系が多いと思いますので、極力 UpdatePanel の外に配置して頂き、通常の使用方法で表示した方が良いと思います。今回はタグや配置方法の構成上どうしても UpdatePanel 内にてスライダー表示をしなければならない場合の使用方法について説明させていただきます。

前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2010 Professional 以降
・VB.NET
・.Net Framework 4.0 以降

１．JSファイルの設置

Slick.js をダウンロードします。
NuGetパッケージからもインストールが可能ですので、そちらをお勧めします。

（１）Webプロジェクトを右クリックして「NuGetパッケージの管理」を選択します。

（２）参照のリンクボタンをクリックして、「slick」で検索します。

（３）あとは画面右のインストールボタンからインストールするとWebプロジェクトに配置されます。

（４）デフォルトでは Scriptフォルダ内に /Slick/Slick.min.js が配置されます。

２．aspx の構成

（１）マスターページにて基本的なスタイルとjQueryを読み込むように設定します。

2019/03/16追記
Javascriptのレンダリングブロックを考慮してフッターの手前でjQueryを読み込むように変更しました。

Base.Master

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Base.master.vb" Inherits="UpdatePanelTest.Base" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link runat="server" href="~/css/Style.css" rel="stylesheet" />
    <asp:ContentPlaceHolder ID="cph_header" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="cph_body" runat="server">        
        </asp:ContentPlaceHolder>
    </div>
    <div>
        <script src="<%=Me.ResolveClientUrl("~/Scripts/jquery-1.7.min.js")%>"></script>
        <asp:ContentPlaceHolder ID="cph_footer" runat="server">        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

（２）UpdatePanel を設置した内部に Imageコントロールに画像を表示するようにして、ポストバックの為のボタンを配置します。
その他、必要なスタイルとJavascriptファイルを読み込むように設定します。
PageRequestManager を実装することにより非同期通信後もスライダー表示を可能にしています。

UpdatePanelTest.aspx

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master/Base.Master" CodeBehind="UpdatePanelTest.aspx.vb" Inherits="UpdatePanelTest.UpdatePanelTest" %>

<asp:Content ID="header" ContentPlaceHolderID="cph_header" runat="server">
    
</asp:Content>

<asp:Content ID="body" ContentPlaceHolderID="cph_body" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div class="border-black margin10">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <p>UpdatePanelの内部</p>
            <div class="slider-wrapper border-gray margin10">
                <asp:Image runat="server" ID="img01" CssClass="border-gray" ImageUrl="~/Images/img100.jpg" />
                <asp:Image runat="server" ID="img02" CssClass="border-gray" ImageUrl="~/Images/img101.jpg"/>
                <asp:Image runat="server" ID="img03" CssClass="border-gray" ImageUrl="~/Images/img102.jpg"/>
            </div>
            <asp:Button ID="btnReturn" runat="server" Text="OK" />
        </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Content>

<asp:Content ID="footer" ContentPlaceHolderID="cph_footer" runat="server">
    <script src="<%=Me.ResolveClientUrl("~/Scripts/Slick/slick.min.js")%>"></script>
    <script src="<%=Me.ResolveClientUrl("~/Scripts/Common.js")%>"></script>
    <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(
        function(evt, args) {
            //Javascriptを再読み込みする
            $.getScript("<%=Me.ResolveClientUrl("~/Scripts/Common.js")%>")
    });
</script>
</asp:Content>

３．Javascript の実装

Slickのイベントを設定します。

一度初期済みのDOMが再度初期化されない様に .not('.slick-initialized') を付与します。

【例】
$('.slider-wrapper').not('.slick-initialized').slick({

Common.js

$(document).ready(function () {
    
    $('.slider-wrapper').not('.slick-initialized').slick({        
        // アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか
        accessibility: true,
        // 自動再生。trueで自動再生される。
        autoplay: true,
        // 自動再生で切り替えをする時間
        autoplaySpeed: 3000,
        // 自動再生や左右の矢印でスライドするスピード
        speed: 400,
        // 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか
        pauseOnHover: true,
        // 自動再生時にドットにマウスオンで一時停止するかどうか
        pauseOnDotsHover: true,
        // 切り替えのアニメーション。ease,linear,ease-in,ease-out,ease-in-out
        cssEase: 'linear',
        // 画像下のドット（ページ送り）を表示
        dots: false,
        // ドットのclass名をつける
        dotsClass: 'slider-wrapper',
        // ドラッグができるかどうか
        draggable: true,
        // 切り替え時のフェードイン設定。trueでon
        fade: true,
        // 左右の次へ、前へボタンを表示するかどうか
        arrows: true,
        // 無限スクロールにするかどうか。最後の画像の次は最初の画像が表示される。
        infinite: true,
        // 最初のスライダーの位置
        initialSlide: 0,
        // 画像の遅延表示。‘ondemand’or'progressive'
        lazyLoad: 'ondemand',
        // スライドのエリアにマウスオーバーしている間、自動再生を止めるかどうか。
        pauseOnHover: true,
        // スライドのエリアに画像がいくつ表示されるかを指定
        slidesToShow: 1,
        // 一度にスライドする数
        slidesToScroll: 1,
        // タッチスワイプに対応するかどうか
        swipe: true,
        // 縦方向へのスライド
        vertical: false,
        // 表示中の画像を中央へ
        centerMode: true,
        // 中央のpadding
        centerPadding: '25px'
    });

});

４．CSS の設定

特に動作には関係しませんが、横幅や線等のデザイン設定をしています。

style.css

img {
    width:300px;
}

.slider-wrapper{
    width : 350px;
}

.border-black {
    border: 1px solid black;
}

.border-gray {
    border: 1px solid gray;
}

.margin10 {
    margin: 10px;
}

５．VB の記述

Slickの動作に必要な記述は特にありません

６．動作の確認

上記の実装ができましたら、動作を確認します。
非同期のポストバックが発生するようにボタンを押下します。
すると .not('.slick-initialized') や PageRequestManager を実装しないと下の図の左部のようにSlick.jsの効果が失われてしまいます。実装した場合は下の図の右部のように非同期ポストバック後も同様にスライダー表示できています。

最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。

関連記事

フォーム認証チケットを複数のサイトで共有する方法 | asp.net
基本認証とフォーム認証の併用について | asp.net
UpdatePanel 内での Slick.js の使用方法 -非同期通信後のスライダー表示方法- | asp.net
アプリケーションルートの変更方法 -デバッグ編- | asp.net
リンクを新しいタブや新しいウィンドウで開いたことを検知する方法 | asp.net

古いパソコンから新しいパソコンへの HDD の換装について | Windows10 ホームロック画面を設定してもログイン時の画像が変更できない不具合への対処方法 | Windows10

ITブログ時々なんでもブログ