FC2ブログ

記事一覧

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


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


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



1.JSファイルの設置

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

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

(2)参照のリンクボタンをクリックして、「slick」で検索します。

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

aspnet_updatepanel_slick_01.png


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

aspnet_updatepanel_slick_02.png



2.aspx の構成

(1)マスターページにて基本的なスタイルと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" />
<script src="<%=Me.ResolveClientUrl("~/Scripts/jquery-1.7.min.js")%>"></script>
<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>
<asp:ContentPlaceHolder ID="cph_footer" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>


(2)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>



3.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'
});

});



4.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;
}



5.VB の記述

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



6.動作の確認

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

aspnet_updatepanel_slick_03.png





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



関連記事

コメント

コメントの投稿

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。