チュートリアル : アセンブリ内のリソースとしての JavaScript ファイルの埋め込み

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

このチュートリアルでは、埋め込みリソースとして JavaScript ファイルをアセンブリに含めます。作成したアセンブリと共に配布する必要のあるクライアントスクリプトコンポーネントがある場合、JavaScript ファイルを埋め込みます。たとえば、ASP.NET の AJAX 機能の実装に JavaScript ファイルを使用する ASP.NET カスタムサーバーコントロールを作成できます。JavaScript ファイルは、アセンブリに埋め込んで、アセンブリを登録する Web アプリケーションから参照できます。

前提条件

このチュートリアルの手順を実行するための要件は次のとおりです。

Microsoft Visual Studio 2005.

メモ :
Visual Web Developer Express Edition ではチュートリアルで必要なクラスライブラリプロジェクトを作成できないため、Visual Web Developer 2005 Express Edition を使用することはできません。

埋め込まれた JavaScript ファイルを含むアセンブリの作成

まず、アセンブリに埋め込む JavaScript コードを含むファイルを作成します。

クライアントスクリプトファイルをアセンブリに埋め込むには

Visual Studio で、SampleControl という名前の新しいクラスライブラリプロジェクトを作成します。
System.Web、System.Drawing、および System.Web.Extensions の各アセンブリへの参照をプロジェクトに追加します。
UpdatePanelAnimation.js という名前の新しい JScript ファイルをプロジェクトに追加します。

UpdatePanelAnimation.js ファイルに次のコードを追加します。

BorderAnimation = function(color) {
    this._color = color;
}

BorderAnimation.prototype = {
    animate: function(panelElement) {
        var s = panelElement.style;
        s.borderWidth = '2px';
        s.borderColor = this._color;
        s.borderStyle = 'solid';

        window.setTimeout(
            function() {{
                s.borderWidth = 0;
            }},
            500);
    }
}

BorderAnimation = function(color) {
    this._color = color;
}

BorderAnimation.prototype = {
    animate: function(panelElement) {
        var s = panelElement.style;
        s.borderWidth = '2px';
        s.borderColor = this._color;
        s.borderStyle = 'solid';

        window.setTimeout(
            function() {{
                s.borderWidth = 0;
            }},
            500);
    }
}

コードには、UpdatePanel コントロールの周りに色つきの境界線を一時的に表示する JavaScript 関数が含まれます。

UpdatePanelAnimation.js ファイルの [プロパティ] ウィンドウで、[ビルドアクション] を [埋め込まれたリソース] に設定します。
CustomControl という名前のクラスファイルをプロジェクトに追加します。

CustomControl ファイルのコードを次のコードに置き換えます。

Imports System.Web.UI
Imports System.Drawing
Imports System.Globalization

Public Class UpdatePanelAnimationWithClientResource
    Inherits Control

    Private _updatePanelID As String
    Private _borderColor As Color
    Private _animate As Boolean

    Public Property BorderColor() As Color
        Get
            Return _borderColor
        End Get
        Set(ByVal value As Color)
            _borderColor = value
        End Set
    End Property

    Public Property UpdatePanelID() As String
        Get
            Return _updatePanelID
        End Get
        Set(ByVal value As String)
            _updatePanelID = value
        End Set
    End Property

    Public Property Animate() As Boolean
        Get
            Return _animate
        End Get
        Set(ByVal value As Boolean)
            _animate = value
        End Set
    End Property

    Protected Overrides Sub OnPreRender(ByVal e As EventArgs)
        MyBase.OnPreRender(e)
        If (Animate) Then

            Dim updatePanel As UpdatePanel = CType(Me.FindControl(UpdatePanelID), UpdatePanel)

            Dim script As String = String.Format( _
                   CultureInfo.InvariantCulture, _
                   "Sys.Application.add_load(function(sender, args) {{var {0}_borderAnimation = new BorderAnimation('{1}');var panelElement = document.getElementById('{0}');if (args.get_isPartialLoad()) {{{0}_borderAnimation.animate(panelElement);}}}});", _
                   updatePanel.ClientID, _
                   ColorTranslator.ToHtml(BorderColor))


            ScriptManager.RegisterStartupScript( _
                Me, _
                GetType(UpdatePanelAnimationWithClientResource), _
                ClientID, _
                script, _
                True)
        End If
    End Sub
End Class

using System;
using System.Drawing;
using System.Web.UI;
using System.Web;
using System.Globalization;

namespace SampleControl
{
    public class UpdatePanelAnimationWithClientResource : Control
    {
        private string _updatePanelID;
        private Color _borderColor;
        private Boolean _animate;
        public Color BorderColor
        {
            get
            {
                return _borderColor;
            }
            set
            {
                _borderColor = value;
            }
        }

        public string UpdatePanelID
        {
            get
            {
                return _updatePanelID;
            }
            set
            {
                _updatePanelID = value;
            }
        }

        public Boolean Animate
        {
            get
            {
                return _animate;
            }
            set
            {
                _animate = value;
            }
        }
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            if (Animate)
            {

                UpdatePanel updatePanel = (UpdatePanel)FindControl(UpdatePanelID);

                string script = String.Format(
                   CultureInfo.InvariantCulture,
                   @"
Sys.Application.add_load(function(sender, args) {{
var {0}_borderAnimation = new BorderAnimation('{1}');    
var panelElement = document.getElementById('{0}');
     if (args.get_isPartialLoad()) {{
        {0}_borderAnimation.animate(panelElement);
    }}
}})
",
                   updatePanel.ClientID,
                   ColorTranslator.ToHtml(BorderColor));


                ScriptManager.RegisterStartupScript(
                    this,
                    typeof(UpdatePanelAnimationWithClientResource),
                    ClientID,
                    script,
                    true);
            }
        }
    }
}

このクラスには、UpdatePanel コントロールの周りに表示される境界線をカスタマイズするためのプロパティが含まれています。このコードにより、Web ページで使用する JavaScript コードが登録されます。また、Sys.Application オブジェクトの load イベントのイベントハンドラが作成されます。部分ページ更新の処理時に UpdatePanelAnimation.js ファイルの animate 機能が呼び出されます。

次の行を AssemblyInfo ファイルに追加します。

<Assembly: System.Web.UI.WebResource("SampleControl.UpdatePanelAnimation.js", "application/x-javascript")>

[assembly: System.Web.UI.WebResource("SampleControl.UpdatePanelAnimation.js", "application/x-javascript")]

メモ :
AssemblyInfo.vb ファイルは、ソリューションエクスプローラの [My Project] ノードにあります。[My Project] ノードにファイルが表示されない場合は、[プロジェクト] メニューの [すべてのファイルを表示] をクリックします。AssemblyInfo.cs ファイルは、ソリューションエクスプローラの [プロパティ] ノードにあります。

AssemblyInfo.vb ファイルは、ソリューションエクスプローラの [My Project] ノードにあります。[My Project] ノードにファイルが表示されない場合は、[プロジェクト] メニューの [すべてのファイルを表示] をクリックします。AssemblyInfo.cs ファイルは、ソリューションエクスプローラの [プロパティ] ノードにあります。

WebResource 定義には、アセンブリの既定の名前空間と .js ファイルの名前を含める必要があります。

プロジェクトをビルドします。

コンパイルが完了すると、SampleControl.dll という名前のアセンブリが生成されます。UpdatePanelAnimation.js ファイルの JavaScript コードは、このアセンブリにリソースとして埋め込まれます。

埋め込まれたスクリプトファイルの参照

これで、埋め込まれたスクリプトファイルを Web アプリケーションから参照できます。

メモ :
同じ Visual Studio ソリューション内でクラスライブラリプロジェクトと Web サイトを作成できますが、このチュートリアルでは、これらの作成は想定していません。個別のソリューション内にプロジェクトを含めることで、コントロール開発者とページ開発者が個別に作業する状況をエミュレートできます。ただし、便宜上このチュートリアルでは、同じソリューション内で両方のプロジェクトを作成して、手順を微調整します。

同じ Visual Studio ソリューション内でクラスライブラリプロジェクトと Web サイトを作成できますが、このチュートリアルでは、これらの作成は想定していません。個別のソリューション内にプロジェクトを含めることで、コントロール開発者とページ開発者が個別に作業する状況をエミュレートできます。ただし、便宜上このチュートリアルでは、同じソリューション内で両方のプロジェクトを作成して、手順を微調整します。

埋め込まれたスクリプトファイルを参照するには

Visual Studio で、AJAX 対応の新しい Web サイトを作成します。
Web サイトのルートディレクトリに Bin フォルダを作成します。

クラスライブラリプロジェクトの Bin\Debug ディレクトリまたは Bin\Release ディレクトリから Web サイトの Bin フォルダに SampleControl.dll をコピーします。

メモ :
同じ Visual Studio ソリューション内にクラスライブラリプロジェクトと Web サイトを作成した場合は、クラスライブラリプロジェクトから Web サイトに参照を追加できます。詳細については、「方法 : Web サイトに Visual Studio プロジェクトへの参照を追加する」を参照してください。

Default.aspx ファイルのコードを次のコードに置き換えます。

<%@ Page Language="VB" AutoEventWireup="true" %>

<%@ Register TagPrefix="Samples" Namespace="SampleControl" Assembly="SampleControl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>ScriptReference</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" 
                                 EnablePartialRendering="True"
                                 runat="server">
             <Scripts>
                <asp:ScriptReference Assembly="SampleControl" Name="SampleControl.UpdatePanelAnimation.js" />
             </Scripts>
            </asp:ScriptManager>


            <Samples:UpdatePanelAnimationWithClientResource 
                     ID="UpdatePanelAnimator1"
                     BorderColor="Green"
                     Animate="true"
                     UpdatePanelID="UpdatePanel1"
                     runat="server" >
            </Samples:UpdatePanelAnimationWithClientResource>
            <asp:UpdatePanel ID="UpdatePanel1" 
                               UpdateMode="Conditional"
                               runat="server">
                <ContentTemplate>
                    <asp:Calendar ID="Calendar2" 
                                  runat="server">
                    </asp:Calendar>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>
<%@ Register TagPrefix="Samples" Namespace="SampleControl" Assembly="SampleControl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ScriptReference</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" 
                                 EnablePartialRendering="True"
                                 runat="server">
             <Scripts>
                <asp:ScriptReference Assembly="SampleControl" Name="SampleControl.UpdatePanelAnimation.js" />
             </Scripts>
            </asp:ScriptManager>


            <Samples:UpdatePanelAnimationWithClientResource 
                     ID="UpdatePanelAnimator1"
                     BorderColor="Green"
                     Animate="true"
                     UpdatePanelID="UpdatePanel1"
                     runat="server" >
            </Samples:UpdatePanelAnimationWithClientResource>
            <asp:UpdatePanel ID="UpdatePanel1" 
                               UpdateMode="Conditional"
                               runat="server">
                <ContentTemplate>
                    <asp:Calendar ID="Calendar2" 
                                  runat="server">
                    </asp:Calendar>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

このコードには、前の手順で作成した .js ファイルのアセンブリおよび名前を参照する ScriptReference コントロールが含まれます。.js ファイルの名前には、アセンブリの既定の名前空間を参照するプリフィックスが含まれます。

プロジェクトを実行し、ページでカレンダーの日付をクリックします。

カレンダーの日付がクリックされるたびに、UpdatePanel コントロールの周りに緑色の境界線が表示されます。

レビュー

このチュートリアルでは、アセンブリ内のリソースとして JavaScript ファイルを埋め込む方法を説明しました。埋め込まれたスクリプトファイルは、アセンブリを含む Web アプリケーションからアクセスできます。

次の手順では、クライアントスクリプトで使用するために、アセンブリにローカライズされたリソースを埋め込む方法について説明します。詳細については、「チュートリアル : JavaScript ファイルのローカライズされたリソースの埋め込み」を参照してください。

参照

処理手順

チュートリアル : JavaScript ファイルへのローカライズされたリソースの追加

概念

Microsoft AJAX Library を使用したカスタムクライアントスクリプトの作成

次の方法で共有

チュートリアル : アセンブリ内のリソースとしての JavaScript ファイルの埋め込み

前提条件

埋め込まれた JavaScript ファイルを含むアセンブリの作成

クライアントスクリプトファイルをアセンブリに埋め込むには

埋め込まれたスクリプトファイルの参照

埋め込まれたスクリプトファイルを参照するには

レビュー

参照

処理手順

概念

その他のリソース

次の方法で共有

チュートリアル : アセンブリ内のリソースとしての JavaScript ファイルの埋め込み

前提条件

埋め込まれた JavaScript ファイルを含むアセンブリの作成

クライアント スクリプト ファイルをアセンブリに埋め込むには

埋め込まれたスクリプト ファイルの参照

埋め込まれたスクリプト ファイルを参照するには

レビュー

参照

処理手順

概念

その他のリソース

クライアントスクリプトファイルをアセンブリに埋め込むには

埋め込まれたスクリプトファイルの参照

埋め込まれたスクリプトファイルを参照するには