Exemplarische Vorgehensweise: Einbetten einer JavaScript-Datei als Ressource in eine Assembly
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. |
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