Share
In diesem Lernprogramm erfahren Sie, wie Sie ein ASP.NET-Serversteuerelement erstellen, indem Sie ein HTML5-Video-Playersteuerelement erstellen. Dabei werden wir den grundlegenden Prozess der Serversteuerungsentwicklung von Grund auf überprüfen.
ASP.NET verfügt über einen eigenen Satz serverseitiger Steuerelemente. Warum also eigene Steuerelemente erstellen??
Durch das Erstellen eigener Steuerelemente können wir leistungsstarke, wiederverwendbare visuelle Komponenten für die Benutzeroberfläche unserer Webanwendung erstellen.
In diesem Lernprogramm werden Sie in den Prozess der ASP.NET-Serversteuerungsentwicklung eingeführt. Außerdem erfahren Sie, wie Sie durch das Erstellen eigener Steuerelemente gleichzeitig die Qualität Ihrer Webanwendungen verbessern, Ihre Produktivität steigern und Ihre Benutzeroberflächen verbessern.
Benutzerdefinierte ASP.NET-Steuerelemente sind flexibler als Benutzersteuerelemente. Wir können ein benutzerdefiniertes Steuerelement erstellen, das von einem anderen serverseitigen Steuerelement erbt, und dieses Steuerelement dann erweitern. Wir können auch eine benutzerdefinierte Steuerung für Projekte freigeben. Normalerweise erstellen wir unser benutzerdefiniertes Steuerelement in einer benutzerdefinierten Websteuerungsbibliothek, die separat von unserer Webanwendung erstellt wird. Daher können wir diese Bibliothek zu jedem Projekt hinzufügen, um unser benutzerdefiniertes Steuerelement in diesem Projekt zu verwenden.
Bisher gab es noch nie eine native Methode, um Videos auf einer Webseite anzuzeigen. Heute werden die meisten Videos mithilfe eines Plugins (wie Flash oder Silverlight) angezeigt. Allerdings haben nicht alle Browser die gleichen Plugins. HTML5 gibt eine standardmäßige native Methode für das Einschließen von Video mit der Video Element.
Derzeit gibt es zwei allgemein unterstützte Videoformate für das Videoelement: Ogg Dateien [mit Theora und Vorbis für Video und Audio codiert] und MPEG 4 Dateien [mit H.264 und AAC codiert].
Um ein Video in HTML5 anzuzeigen, brauchen wir nur Folgendes:
Das Kontrollen Attribut ist zum Hinzufügen abspielen, Pause und Volumen Kontrollen. Ohne dieses Attribut scheint Ihr Video nur ein Bild zu sein. Es ist auch immer eine gute Idee, sowohl die Breite und Höhe Attribute. Die folgende Tabelle zeigt alle Attribute des Element:
Für den Einstieg ist lediglich eine Kopie von Visual Studio von Visual Web Developer Express erforderlich. Wenn Sie nicht über die Vollversion von Visual Studio verfügen, können Sie die kostenlose Express Edition erwerben.
Der HTML5-Videoplayer, den wir hier erstellen werden, ist nur ein einfacher Videoplayer, der die native Schnittstelle des Browsers wiedergibt. Browser, die HTML5-Video unterstützen, verfügen über integrierte Video-Player, einschließlich einer Reihe von Steuerelementen (Wiedergabe / Pause usw.). Bei der Ausführung dieses Steuerelements wird für jeden Browser eine andere Benutzeroberfläche angezeigt.
Der HTML5-Videoplayer in Firefox 3.6.8. Zunächst müssen wir ein neues Klassenbibliothekprojekt erstellen, um unsere benutzerdefinierten Steuerelemente aufzunehmen. Durch das Erstellen des benutzerdefinierten Steuerelements in einer separaten Klassenbibliothek können wir das Projekt in einer separaten DLL kompilieren und das benutzerdefinierte Steuerelement in jeder Anwendung verwenden, die es benötigt.
Öffnen Sie Ihr ASP.NET-Projekt mit Visual Studio oder Visual Web Developer. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Lösungsnamen und wählen Sie aus Neues Projekt hinzufügen aus dem Kontextmenü. Wählen Sie im Dialogfeld Neues Projekt hinzufügen den Projekttyp als a aus Netz Projekt und wählen Sie ASP.NET Server Control als Vorlage wie folgt:
Nennen Sie das Projekt CustomControls. Klicken OK. Das neue ASP.NET Server Control-Projekt wird erstellt, und Visual Studio bietet Ihnen auch ein einfaches Websteuerelement, mit dem Sie beginnen können. Löschen Sie dieses benutzerdefinierte Steuerelement, da wir es nicht benötigen.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf CustomControls Projekt und wählen Sie Neues Element hinzufügen aus dem Kontextmenü. In dem Neues Element hinzufügen Wählen Sie im Dialogfeld den Kategorietyp als a aus Netz Kategorie und wählen Sie ASP.NET Server Control in den Vorlagen.
Benennen Sie das neue benutzerdefinierte Steuerelement Videoplayer. Klicken Hinzufügen. Das neue benutzerdefinierte Steuerelement (VideoPlayer.cs) wird erstellt und dem CustomControls-Projekt hinzugefügt.
Accentsconagua
mit System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; Namespace CustomControls [DefaultProperty ("Text")] [ToolboxData (")<0:VideoPlayer runat=server>")] public class VideoPlayer: WebControl [Bindbar (true)] [Category (" Darstellung ")] [DefaultValue (" ")] [Localizable (true)]. Öffentlicher String Text get String s = (String) ViewState [ "Text"]; return ((s == null)? "[" + This.ID + "]": s); set ViewState ["Text"] = value; protected überschreibt void RenderContents (HtmlTextWriter-Ausgabe) ) output.Write (Text); Der obige Code ist der Standardcode, der von Visual Studio für eine Websteuerungsbibliothek generiert wird. Um mit zu arbeiten VideoPlayer.cs, Wir müssen den Code oben ändern. Als erstes sollten wir alles zwischen der Deklarationszeile und dem Ende der Klasse löschen. Das lässt uns mit diesem Code:
mit System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; Namespace CustomControls [DefaultProperty ("Text")] [ToolboxData (")<0:VideoPlayer runat=server>")] öffentliche Klasse VideoPlayer: WebControl Wie Sie oben sehen, die Videoplayer Klasse stammt von der System.Web.UI.WebControl Klasse. Tatsächlich leiten sich alle serverseitigen ASP.NET-Steuerelemente vom Steuerelement ab WebControl Klasse.
Die Klassendeklarationszeile im Standardcode gibt auch die Standardeigenschaft für die an Videoplayer Kontrolle als die Text Eigentum. Das Videoplayer Steuerelement, das wir hier erstellen, hat keine Eigenschaft aufgerufen Text. Löschen Sie also den Verweis auf Text als Standardeigenschaft. Nach all den Änderungen, die VideoPlayer.cs Codedatei sollte so aussehen:
mit System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; Namespace CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] öffentliche Klasse VideoPlayer: WebControl In diesem Schritt fügen wir dem VideoPlayer-Steuerelement einige Eigenschaften hinzu, um das Verhalten des Steuerelements zu steuern. Das Folgende ist die Liste der Eigenschaften, die wir dem hinzufügen VideoPlayer.cs Codedatei:
Video-URL: Eine String-Eigenschaft, die die URL des abzuspielenden Videos angibt.PosterUrl: Eine String-Eigenschaft, die die Adresse einer Bilddatei angibt, die angezeigt werden soll, wenn keine Videodaten verfügbar sind.Automatisches Abspielen: Eine boolesche Eigenschaft, die angibt, ob das Video beim Öffnen der Webseite automatisch abgespielt werden soll oder nicht.DisplayControlButtons: Eine boolesche Eigenschaft, die angibt, ob die Navigationsschaltflächen des Players angezeigt werden oder nicht.Schleife: Eine boolesche Eigenschaft, die angibt, ob das Video bei jedem Abschluss erneut beginnt oder nicht.Fügen Sie der VideoPlayer-Klasse den folgenden Code hinzu:
private Zeichenfolge _Mp4Url; öffentliche Zeichenfolge Mp4Url get return _Mp4Url; set _Mp4Url = Wert; private Zeichenfolge _OggUrl = null; öffentliche Zeichenfolge OggUrl get return _OggUrl; set _OggUrl = Wert; private Zeichenfolge _Poster = null; öffentliche Zeichenfolge PosterUrl get return _Poster; set _Poster = Wert; private bool _AutoPlay = false; public bool AutoPlay get return _AutoPlay; set _AutoPlay = Wert; private bool _Controls = true; public bool DisplayControlButtons get return _Controls; set _Controls = Wert; private bool _Loop = false; public bool Loop get return _Loop; set _Loop = Wert;
Nachdem wir die obigen Eigenschaften hinzugefügt haben, sollte die VideoPlayer-Klasse aussehen
mit System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; Namespace CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] public class VideoPlayer: WebControl private Zeichenfolge _Mp4Url; öffentliche Zeichenfolge Mp4Url get return _Mp4Url; set _Mp4Url = value; private Zeichenfolge _OggUrl = null; öffentliche Zeichenfolge OggUrl get return _OggUrl; set = value; private Zeichenfolge _Poster = null; öffentliche Zeichenfolge PosterUrl get return _Poster; set _Poster = value; private bool _AutoPlay = false; public bool AutoPlay get return _AutoPlay; set _AutoPlay = value ; private bool _Controls = true; public bool DisplayControlButtons get return _Controls; set _Controls = value; private bool _Loop = false; öffentliche bool-Schleife get return _Loop; set _Loop = value; Die Hauptaufgabe eines Serversteuerelements besteht darin, einen Typ von Markup-Sprache für den HTTP-Ausgabestrom wiederzugeben, der an den Client zurückgegeben und vom Client angezeigt wird. Es liegt in unserer Verantwortung als Steuerungsentwickler, dem Server mitzuteilen, welche Markierungen gerendert werden sollen. Das überschrieben Renderinhalte method ist der primäre Ort, an dem wir der Kontrolle mitteilen, was wir dem Client zur Verfügung stellen möchten.
Fügen Sie die folgende Überschreibung hinzu Renderinhalte Methode zum Videoplayer Klasse:
protected überschreiben void RenderContents (Ausgabe von HtmlTextWriter)
Beachten Sie, dass die Renderinhalte Methode hat einen Methodenparameter, der aufgerufen wird Ausgabe. Dieser Parameter ist ein HtmlTextWriter object, das das Steuerelement verwendet, um HTML für den Client zu rendern. Das HtmlTextwriter class hat eine Reihe von Methoden, mit denen Sie Ihren HTML-Code rendern können, einschließlich Attribute hinzufügen und RenderBeginTag.
Bevor wir den Code zum Rendern schreiben Element, das erste, was zu tun ist, fügen Sie einige Attribute dafür. Wir können die verwenden Attribute hinzufügen Methode der HtmlTextWriter Objekt, um Attribute für HTML-Tags hinzuzufügen.
Hängen Sie den folgenden Code an die Renderinhalte Methode:
output.AddAttribute (HtmlTextWriterAttribute.Id, this.ID); output.AddAttribute (HtmlTextWriterAttribute.Width, this.Width.ToString ()); output.AddAttribute (HtmlTextWriterAttribute.Height, this.Height.ToString ()); if (DisplayControlButtons == true) output.AddAttribute ("Steuerelemente", "Steuerelemente"); if (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); if (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); if (Loop == true) output.AddAttribute ("loop", "loop"); Sie können das sehen, indem Sie die Attribute hinzufügen Methode haben wir dem Tag sieben Attribute hinzugefügt. Beachten Sie auch, dass wir eine Aufzählung verwenden, HtmlTextWriterAttribute, um das Attribut auszuwählen, das wir dem Tag hinzufügen möchten.
Nachdem wir den Code oben hinzugefügt haben, wird der Renderinhalte Methode sollte so aussehen:
protected überschreibt void RenderContents (Ausgabe von HtmlTextWriter) output.AddAttribute (HtmlTextWriterAttribute.Id, this.ID); output.AddAttribute (HtmlTextWriterAttribute.Width, this.Width.ToString ()); output.AddAttribute (HtmlTextWriterAttribute.Height, this.Height.ToString ()); if (DisplayControlButtons == true) output.AddAttribute ("Steuerelemente", "Steuerelemente"); if (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); if (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); if (Loop == true) output.AddAttribute ("loop", "loop"); Nachdem Sie einige Tagattribute für das Videoelement hinzugefügt haben, ist es Zeit, das zu rendern Tag mit seinen Attributen im HTML-Dokument. Fügen Sie dem folgenden Code hinzu Renderinhalte Methode:
output.RenderBeginTag ("video"); if (OggUrl! = null) output.AddAttribute ("src", OggUrl); output.AddAttribute ("type", "video / ogg"); output.RenderBeginTag ("source"); output.RenderEndTag (); if (Mp4Url! = null) output.AddAttribute ("src", Mp4Url); output.AddAttribute ("type", "video / mp4"); output.RenderBeginTag ("source"); output.RenderEndTag (); output.RenderEndTag (); Wir nehmen das RenderBeginTag Methode von Ausgabe Objekt, um das öffnende Tag des Videoelements zu rendern, und RenderEndTag um das schließende Tag darzustellen. Wir haben auch das hinzugefügt Element. Das Videoelement erlaubt mehrere Quellelemente. Quelle Elemente können mit verschiedenen Videodateien verknüpft werden. Der Browser verwendet das erste erkannte Format.
Das Renderinhalte Die Methode sollte folgendermaßen aussehen, nachdem wir den Code oben hinzugefügt haben:
protected überschreibt void RenderContents (Ausgabe von HtmlTextWriter) output.AddAttribute (HtmlTextWriterAttribute.Id, this.ID); output.AddAttribute (HtmlTextWriterAttribute.Width, this.Width.ToString ()); output.AddAttribute (HtmlTextWriterAttribute.Height, this.Height.ToString ()); if (DisplayControlButtons == true) output.AddAttribute ("Steuerelemente", "Steuerelemente"); if (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); if (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); if (Loop == true) output.AddAttribute ("loop", "loop"); output.RenderBeginTag ("video"); if (OggUrl! = null) output.AddAttribute ("src", OggUrl); output.AddAttribute ("type", "video / ogg"); output.RenderBeginTag ("source"); output.RenderEndTag (); if (Mp4Url! = null) output.AddAttribute ("src", Mp4Url); output.AddAttribute ("type", "video / mp4"); output.RenderBeginTag ("source"); output.RenderEndTag (); output.RenderEndTag (); Beachten Sie, dass die Reihenfolge, in der wir die AddAttributes Methoden sind wichtig. Wir platzieren die AddAttributes Methoden direkt vor dem RenderBeginTag Methode im Code. Das AddAttributes Diese Methode ordnet die Attribute dem nächsten HTML-Tag zu, der von der Datei dargestellt wird RenderBeginTag Methode, in diesem Fall die Video Etikett.
Standardmäßig umgibt ASP.NET das Steuerelement mit einem Element beim Rendern des HTML-Markups des Steuerelements. Wenn wir einen bereitgestellt haben ICH WÜRDE Wert für unsere Kontrolle, dann die Spanne tag wird standardmäßig auch eine ICH WÜRDE Attribut. Das Verwenden der Tags kann manchmal problematisch sein. Wenn Sie dies in ASP.NET verhindern möchten, können Sie die Tags einfach überschreiben Machen Methode und rufen Sie die Renderinhalte Methode direkt. So geht's:
protected überschreibt void Render (HtmlTextWriter-Writer) this.RenderContents (Writer);
Nachdem wir den Code oben hinzugefügt haben, sollte die VideoPlayer-Klasse folgendermaßen aussehen:
mit System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; Namespace CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] public class VideoPlayer: WebControl private Zeichenfolge _Mp4Url; öffentliche Zeichenfolge Mp4Url get return _Mp4Url; set _Mp4Url = value; private Zeichenfolge _OggUrl = null; öffentliche Zeichenfolge OggUrl get return _OggUrl; set = value; private Zeichenfolge _Poster = null; öffentliche Zeichenfolge PosterUrl get return _Poster; set _Poster = value; private bool _AutoPlay = false; public bool AutoPlay get return _AutoPlay; set _AutoPlay = value ; private bool _Controls = true; public bool DisplayControlButtons get return _Controls; set _Controls = value; private bool _Loop = false; öffentliche bool-Schleife get return _Loop; set _Loop = value; geschütztes überschriebenes viereckiges Rendering-Objekt (HtmlTextWriter-Ausgabe) output.AddAttribute (HtmlTextWriterAttribute.Id, this.ID); output.AddAttribute (HtmlTextWriterAttribute.Width, this.Width.ToString ()). Height.ToString ()); if (DisplayControlButtons == true) Ausgabe.A ddAttribute ("Steuerelemente", "Steuerelemente"); if (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); if (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); if (Loop == true) output.AddAttribute ("loop", "loop"); output.RenderBeginTag ("video"); if (OggUrl! = null) output.AddAttribute ("src", OggUrl); output.AddAttribute ("type", "video / ogg"); output.RenderBeginTag ("source"); output.RenderEndTag (); if (Mp4Url! = null) output.AddAttribute ("src", Mp4Url); output.AddAttribute ("type", "video / mp4"); output.RenderBeginTag ("source"); output.RenderEndTag (); output.RenderEndTag (); protected überschreiben void Render (HtmlTextWriter-Writer) this.RenderContents (Writer); Unsere Kontrolle ist jetzt beendet! Wir müssen nur noch das Projekt erstellen, bevor wir es auf einer ASP.NET-Webseite verwenden.
Es ist Zeit, das Projekt aufzubauen. Wählen Bauen, und klicken Sie dann auf Lösung erstellen aus dem Hauptmenü.
Nachdem Sie das Projekt erstellt haben, müssen Sie als Nächstes das VideoPlayer-Steuerelement in die Toolbox Explorer.
Toolbox Explorer Wählen Sie Artikel aus aus dem KontextmenüDurchsuche Schaltfläche im Dialogfeld "Toolbox-Elemente auswählen" CustomControls VerzeichnisBin \ Debug Verzeichnis (Visual Studio erstellt standardmäßig Debug-Versionen.) CustomControls.DLL Montage und klicken Sie auf die Öffnen Taste
Videoplayer erscheint im Dialogfeld "Toolbox-Elemente auswählen" (siehe Abbildung oben). Das Kontrollkästchen zeigt es als ausgewählt an. Sobald Sie auf die Schaltfläche klicken OK Wenn Sie im Dialogfeld "Toolbox-Elemente auswählen" die Schaltfläche aktivieren, wird das neue VideoPlayer-Steuerelement in der Toolbox angezeigt.
Um zu sehen, wie die Steuerung funktioniert, müssen wir ihr ein Zuhause geben. Fügen Sie der Website eine neue Seite hinzu. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das ASP.NET-Projekt. Wählen Neues Element hinzufügen, und fügen Sie ein Web-Formular. Benennen Sie das Webformular VideoPlayerTest.aspx.
Um das Steuerelement auf der Seite zu platzieren, wechseln Sie zu Design Modus. Zieh den Videoplayer Steuerung aus der Toolbox und legen Sie es auf der VideoPlayerTest.aspx Designansicht.
Das folgende Listing zeigt, wie das Steuerelement auf der Seite deklariert wird:
In der folgenden Codezeile wird Visual Studio hinzugefügt ASPX Datei für die Steuerung. Sie können es durch Auswahl von sehen Quelle Registerkarte am unteren Rand des Codefensters in Visual Studio. Das Registrieren Die Direktive teilt der ASP.NET-Laufzeitumgebung mit, wo sich das benutzerdefinierte Steuerelement (welche Assembly) befindet, und ordnet es einem Tag-Präfix zu.
<%@ Register assembly="CustomControls" namespace="CustomControls" tagprefix="cc1" %>
Wir können jetzt die Steuerung testen.
VideoPlayer-Steuerung unter Google Chrome. In diesem Lernprogramm haben Sie gelernt, wie Sie ein eigenes benutzerdefiniertes ASP.NET-Serversteuerelement erstellen. Sie kennen jetzt jeden Schritt des Prozesses - von der Erstellung eines webbasierten Steuerelementbibliotheksprojekts, vom Hinzufügen von Eigenschaften zu einem benutzerdefinierten Steuerelement, vom Rendern des HTML-Markups des Steuerelements für den Client und schließlich vom Verwenden des Benutzerdefiniertes ASP.NET-Steuerelement in einem Webformular.
Hoffentlich verfügen Sie jetzt über die Fähigkeiten, benutzerdefinierte Steuerelemente zu erstellen, die alle Funktionen der serverseitigen ASP.NET-Standardsteuerelemente enthalten. Vielen Dank fürs Lesen!
