Exemplarische Vorgehensweise: Einbetten einer JavaScript-Datei als Ressource in eine Assembly

Artikel
10/22/2014

Aktualisiert: November 2007

In dieser exemplarischen Vorgehensweise schließen Sie eine JavaScript-Datei als eingebettete Ressource in eine Assembly ein. Sie betten eine JavaScript-Datei ein, wenn Sie über eine Clientskriptkomponente verfügen, die mit einer von Ihnen erstellten Assembly verteilt werden muss. Sie können beispielsweise ein benutzerdefiniertes ASP.NET-Serversteuerelement erstellen, das AJAX-Funktionen für ASP.NET mit JavaScript-Dateien implementiert. Sie können die JavaScript-Dateien in die Assembly einbetten, und anschließend kann auf diese von einer die Assembly registrierenden Webanwendung aus verwiesen werden.

Vorbereitungsmaßnahmen

Zum Implementieren der Prozeduren in dieser exemplarischen Vorgehensweise ist Folgendes erforderlich:

Microsoft Visual Studio 2005.

Hinweis:
Visual Web Developer 2005 Express Edition kann nicht verwendet werden, da Sie mit Visual Web Developer Express Edition das in der exemplarischen Vorgehensweise benötigte Klassenbibliotheksprojekt nicht erstellen können.

Erstellen einer Assembly, die eine eingebettete JavaScript-Datei enthält

Zunächst erstellen Sie eine Datei, die den JavaScript-Code enthält, den Sie in der Assembly einbetten möchten.

So betten Sie eine Clientskriptdatei in eine Assembly ein

Erstellen Sie in Visual Studio ein neues Klassenbibliotheksprojekt mit dem Namen SampleControl.
Fügen Sie dem Projekt Verweise auf die Assemblys System.Web, System.Drawing und System.Web.Extensions hinzu.
Fügen Sie dem Projekt eine neue JScript-Datei mit dem Namen UpdatePanelAnimation.js hinzu.

Fügen Sie der Datei UpdatePanelAnimation.js den folgenden Code hinzu:

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);
    }
}

Der Code enthält eine JavaScript-Funktion, die vorübergehend einen farbigen Rahmen um ein UpdatePanel-Steuerelement anzeigt.

Legen Sie im Eigenschaftenfenster für die Datei UpdatePanelAnimation.js Buildvorgang auf Eingebettete Ressource fest.
Fügen Sie dem Projekt eine Klassendatei mit dem Namen CustomControl hinzu.

Ersetzen Sie den Code in der Datei CustomControl durch den folgenden Code:

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);
            }
        }
    }
}

Diese Klasse enthält Eigenschaften zum Anpassen des Rahmens, der um das UpdatePanel-Steuerelement angezeigt wird. Im Code wird auch JavaScript-Code zur Verwendung in einer Webseite registriert. Im Code wird ein Handler für das Load-Ereignis des Sys.Application-Objekts erstellt. Die animate-Funktion in der Datei UpdatePanelAnimation.js wird aufgerufen, wenn eine Teilaktualisierung von Seiten verarbeitet wird.

Fügen Sie der AssemblyInfo-Datei die folgende Zeile hinzu.

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

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

Hinweis:
Die Datei AssemblyInfo.vb befindet sich im Knoten Eigenes Projekt des Projektmappen-Explorers. Wenn im Knoten Eigenes Projekt keine Dateien angezeigt werden, klicken Sie im Menü Projekt auf Alle Dateien anzeigen. Die Datei AssemblyInfo.cs befindet sich im Knoten Eigenschaften des Projektmappen-Explorers.

Die WebResource-Definition muss den Standardnamespace der Assembly und den Namen der JS-Datei enthalten.

Erstellen Sie das Projekt.

Nach Abschluss der Kompilierung verfügen Sie über eine Assembly mit dem Namen SampleControll.dll. Der JavaScript-Code in der Datei UpdatePanelAnimation.js ist als Ressource in diese Assembly eingebettet.

Verweisen auf die eingebettete Skriptdatei

Nun können Sie in einer Webanwendung auf die eingebettete Skriptdatei verweisen.

Hinweis:
Sie können zwar das Klassenbibliotheksprojekt und die Website in der gleichen Visual Studio-Projektmappe erstellen, in dieser exemplarischen Vorgehensweise wird jedoch nicht von einer solchen Vorgehensweise ausgegangen. Durch die Anlage der Projekte in verschiedenen Projektmappen wird die Situation eines Steuerelemententwicklers und eines Seitenentwicklers nachgestellt, die jeweils separat arbeiten. Zur Vereinfachung können Sie jedoch beide Projekte in derselben Projektmappe erstellen und die Prozeduren in der exemplarischen Vorgehensweise entsprechend anpassen.

Sie können zwar das Klassenbibliotheksprojekt und die Website in der gleichen Visual Studio-Projektmappe erstellen, in dieser exemplarischen Vorgehensweise wird jedoch nicht von einer solchen Vorgehensweise ausgegangen. Durch die Anlage der Projekte in verschiedenen Projektmappen wird die Situation eines Steuerelemententwicklers und eines Seitenentwicklers nachgestellt, die jeweils separat arbeiten. Zur Vereinfachung können Sie jedoch beide Projekte in derselben Projektmappe erstellen und die Prozeduren in der exemplarischen Vorgehensweise entsprechend anpassen.

So verweisen Sie auf die eingebettete Skriptdatei

Erstellen Sie in Visual Studio eine neue AJAX-fähige Website.
Erstellen Sie im Stammverzeichnis der Website einen Bin-Ordner.

Kopieren Sie die Datei SampleControl.dll aus dem Verzeichnis Bin\Debug oder Bin\Release des Klassenbibliotheksprojekts in den Ordner Bin der Website.

Hinweis:
Wenn Sie das Klassenbibliotheksprojekt und die Website in der gleichen Visual Studio-Projektmappe erstellt haben, können Sie im Klassenbibliotheksprojekt einen Verweis auf die Website hinzufügen. Ausführliche Informationen finden Sie unter Gewusst wie: Hinzufügen eines Verweises auf ein Visual Studio-Projekt in einer Website.

Ersetzten Sie den Code in der Datei Default.aspx durch den folgenden Code:

<%@ 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" >
    <title>ScriptReference</title>
</head>
<body>
    <form id="form1" >
        <div>
            <asp:ScriptManager ID="ScriptManager1" 
                                 EnablePartialRendering="True"
                                 >
             <Scripts>
                <asp:ScriptReference Assembly="SampleControl" Name="SampleControl.UpdatePanelAnimation.js" />
             </Scripts>
            </asp:ScriptManager>


            <Samples:UpdatePanelAnimationWithClientResource 
                     ID="UpdatePanelAnimator1"
                     BorderColor="Green"
                     Animate="true"
                     UpdatePanelID="UpdatePanel1"
                      >
            </Samples:UpdatePanelAnimationWithClientResource>
            <asp:UpdatePanel ID="UpdatePanel1" 
                               UpdateMode="Conditional"
                               >
                <ContentTemplate>
                    <asp:Calendar ID="Calendar2" 
                                  >
                    </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 >

</script>

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


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

Dieser Code enthält ein ScriptReference-Steuerelement, das auf die Assembly und den Namen der JS-Datei verweist, die Sie in der vorherigen Prozedur erstellt haben. Im Namen der JS-Datei ist ein Präfix enthalten, das auf den Standardnamespace der Assembly verweist.

Führen Sie das Projekt aus, und klicken Sie auf der Seite im Kalender auf Datumsangaben.

Bei jedem Klick im Kalender auf ein Datum wird ein grüner Rahmen um das UpdatePanel-Steuerelement angezeigt.

Zusammenfassung

In dieser exemplarischen Vorgehensweise wurde erläutert, wie Sie eine JavaScript-Datei als Ressource in eine Assembly einbetten. In einer Webanwendung, die die Assembly enthält, kann auf die eingebettete Skriptdatei zugegriffen werden.

Im nächsten Schritt erfahren Sie, wie Sie lokalisierte Ressourcen für die Verwendung in Clientskript in eine Assembly einbetten. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Einbetten von lokalisierten Ressourcen für eine JavaScript-Datei.

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Hinzufügen von lokalisierten Ressourcen zu einer JavaScript-Datei

Konzepte

Erstellen von benutzerdefiniertem Clientskript mithilfe der Microsoft AJAX-Bibliothek

Freigeben über