Erstellen Sie ASP.NET-Serversteuerelemente von Grund auf neu

German (Deutsch) translation by Valentina (you can also view the original English article)

In diesem Tutorial erfahren Sie, wie Sie ein ASP.NET-Serversteuerelement erstellen, indem Sie ein HTML5-Videoplayer-Steuerelement erstellen. Auf dem Weg dorthin werden wir den grundlegenden Prozess der Serversteuerungsentwicklung von Grund auf überprüfen.

Einführung

ASP.NET wird mit eigenen serverseitigen Steuerelementen geliefert. Warum also eigene erstellen?

Durch das Erstellen eigener Steuerelemente können wir leistungsstarke, wiederverwendbare visuelle Komponenten für die Benutzeroberfläche unserer Webanwendung erstellen.

Dieses Tutorial führt Sie in den Prozess der Entwicklung der ASP.NET-Serversteuerung ein. Sie werden auch sehen, wie das Erstellen eigener Steuerelemente gleichzeitig die Qualität Ihrer Webanwendungen verbessern, Sie produktiver machen und Ihre Benutzeroberflächen verbessern kann.

Benutzerdefinierte ASP.NET-Steuerelemente sind flexibler als Benutzersteuerelemente. Wir können ein benutzerdefiniertes Steuerelement erstellen, das von einem anderen serverseitigen Steuerelement erbt, und dieses Steuerelement dann erweitern. Wir können auch ein benutzerdefiniertes Steuerelement für Projekte freigeben. In der Regel erstellen wir unser benutzerdefiniertes Steuerelement in einer benutzerdefinierten Websteuerelementbibliothek, die separat von unserer Webanwendung kompiliert wird. Infolgedessen können wir diese Bibliothek zu jedem Projekt hinzufügen, um unser benutzerdefiniertes Steuerelement in diesem Projekt zu verwenden.

HTML5-Videoübersicht

Bisher gab es noch nie eine native Möglichkeit, Videos auf einer Webseite anzuzeigen. Heutzutage werden die meisten Videos mithilfe eines Plugins (wie Flash oder Silverlight) angezeigt. Allerdings haben nicht alle Browser die gleichen Plugins. HTML5 gibt eine native Standardmethode zum Einfügen von Videos in das video-Element an.

Derzeit gibt es zwei weit verbreitete Videoformate für das Videoelement: Ogg-Dateien [codiert mit Theora und Vorbis für Video bzw. Audio] und MPEG 4-Dateien [codiert mit H.264 und AAC].

Um ein Video in HTML5 zu zeigen, ist dies alles, was wir brauchen:

1	<video width="320" height="240" controls="controls">
2	<source src="movie.ogg" type="video/ogg" />
3	<source src="movie.mp4" type="video/mp4" />
4	</video>

Das controls-Attribut dient zum Hinzufügen von Steuerelementen für Wiedergabe, Pause und Lautstärke. Ohne dieses Attribut scheint Ihr Video nur ein Bild zu sein. Es ist auch immer eine gute Idee, sowohl die width- als auch die height-Attribute einzubeziehen. Die folgende Tabelle zeigt alle Attribute des <video>-Elements:

autoplay: Gibt an, dass das Video abgespielt wird, sobald es fertig ist
controls: Gibt an, dass Steuerelemente angezeigt werden, z. B. eine Wiedergabetaste
height: Die Höhe des Videoplayers
loop: Gibt an, dass die Mediendatei jedes Mal neu gestartet wird, wenn sie fertig ist
preload: Gibt an, dass das Video beim Laden der Seite geladen und zur Ausführung bereit ist. Wird ignoriert, wenn "Autoplay" vorhanden ist
src: Die URL des abzuspielenden Videos
width: Die Breite des Videoplayers
poster: Die URL des anzuzeigenden Bildes, solange keine Videodaten verfügbar sind

Schritt 0: Erste Schritte

Für den Einstieg ist lediglich eine Kopie von Visual Studio von Visual Web Developer Express erforderlich. Wenn Sie nicht über die Vollversion von Visual Studio verfügen, können Sie die kostenlose Express Edition herunterladen.

Der HTML5-Videoplayer, den wir hier erstellen, ist nur ein einfacher Videoplayer, der die native Oberfläche des Browsers rendert. In Browsern, die HTML5-Videos unterstützen, sind Videoplayer integriert, einschließlich einer Reihe von Steuerelementen (Wiedergabe/Pause usw.), sodass Sie beim Ausführen dieses Steuerelements für jeden Browser eine andere Benutzeroberfläche sehen.

Der HTML5-Videoplayer in Firefox 3.6.8.

Schritt 1: Erstellen eines benutzerdefinierten Steuerungsprojekts

Zuerst müssen wir ein neues Klassenbibliotheksprojekt erstellen, um unsere benutzerdefinierten Steuerelemente zu speichern. Durch Erstellen des benutzerdefinierten Steuerelements in einer separaten Klassenbibliothek können wir das Projekt in eine separate DLL kompilieren und das benutzerdefinierte Steuerelement in jeder Anwendung verwenden, die dies erfordert.

Öffnen Sie Ihr ASP.NET-Projekt mit Visual Studio oder Visual Web Developer. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Lösungsnamen und wählen Sie im Kontextmenü die Option Add New Project. Wählen Sie im Dialogfeld Neues Projekt hinzufügen den Projekttyp als Web-Projekt aus und wählen Sie als Vorlage ASP.NET Server Control aus:

Nennen Sie das Projekt CustomControls. Klicken Sie OK. Das neue ASP.NET Server Control-Projekt wird erstellt, und Visual Studio bietet Ihnen zunächst ein einfaches Websteuerelement. Löschen Sie dieses benutzerdefinierte Steuerelement, da es nicht benötigt wird.

Schritt 2: Hinzufügen eines benutzerdefinierten Websteuerelements zum Projekt

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das CustomControls-Projekt und wählen Sie im Kontextmenü die Option Add New Item. Wählen Sie im Dialogfeld Add New Item den Kategorietyp als Web-Kategorie aus und wählen Sie in den Vorlagen ASP.NET Server Control aus.

Nennen Sie den neuen benutzerdefinierten Steuerelement-VideoPlayer. Klicken Sie auf Add. Das neue benutzerdefinierte Steuerelement (VideoPlayer.cs) wird erstellt und dem CustomControls-Projekt hinzugefügt.

using 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></{0}:VideoPlayer>")]
    public class VideoPlayer : WebControl
    {
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string Text
        {
            get
            {
                String s = (String)ViewState["Text"];
                return ((s == null) ? "[" + this.ID + "]" : s);
            }

            set
            {
                ViewState["Text"] = value;
            }
        }

        protected override void RenderContents(HtmlTextWriter output)
        {
            output.Write(Text);
        }
    }
}
        

Der obige Code ist der Standardcode, der von Visual Studio für eine Websteuerungsbibliothek generiert wird. Um mit VideoPlayer.cs arbeiten zu können, müssen Sie den obigen Code ändern. Als erstes sollten wir alles zwischen der Klassendeklarationszeile und dem Ende der Klasse löschen. Das lässt uns mit diesem Code:

using 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></{0}:VideoPlayer>")]
    public class VideoPlayer : WebControl
    {
        
    }
}
        

Wie Sie oben sehen, leitet sich die VideoPlayer-Klasse von der System.Web.UI.WebControl-Klasse ab. Tatsächlich stammen alle serverseitigen ASP.NET-Steuerelemente von der WebControl-Klasse.

Schritt 3: Ändern der Klassendeklarationslinie

Die Klassendeklarationszeile im Standardcode gibt auch die Standardeigenschaft für das VideoPlayer-Steuerelement als Text-Eigenschaft an. Das hier erstellte VideoPlayer-Steuerelement verfügt nicht über eine Eigenschaft namens Text. Löschen Sie daher den Verweis auf Text als Standardeigenschaft. Nach allen Änderungen sollte die Codedatei VideoPlayer.cs folgendermaßen aussehen:

using 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></{0}:VideoPlayer>")]
    public class VideoPlayer : WebControl 
    {

    }
}
        

Schritt 4: Hinzufügen von Eigenschaften

In diesem Schritt fügen wir dem VideoPlayer-Steuerelement einige Eigenschaften hinzu, um das Verhalten des Steuerelements zu behandeln. Im Folgenden finden Sie eine Liste der Eigenschaften, die wir der Codedatei VideoPlayer.cs hinzufügen werden:

VideoUrl: Eine Zeichenfolgeeigenschaft, die die URL des abzuspielenden Videos angibt.
PosterUrl: Eine Zeichenfolgeeigenschaft, die die Adresse einer Bilddatei angibt, die angezeigt werden soll, solange keine Videodaten verfügbar sind.
AutoPlay: Eine boolesche Eigenschaft, mit der angegeben wird, ob das Video beim Öffnen der Webseite automatisch abgespielt werden soll oder nicht.
DisplayControlButtons: Eine boolesche Eigenschaft, die angibt, ob die Player-Navigationsschaltflächen angezeigt werden oder nicht.
Loop: Eine boolesche Eigenschaft, die angibt, ob das Video bei jedem Abschluss erneut gestartet wird oder nicht.

Fügen Sie der VideoPlayer-Klasse den folgenden Code hinzu:

private string _Mp4Url;
public string Mp4Url
{
    get { return _Mp4Url; }
    set { _Mp4Url = value; }
}

private string _OggUrl = null;
public string OggUrl
{
    get { return _OggUrl; }
    set { _OggUrl = value; }
}

private string _Poster = null;
public string 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;
public bool Loop
{
    get { return _Loop; }
    set { _Loop = value; }
}
        

Nachdem wir die obigen Eigenschaften hinzugefügt haben, sollte die VideoPlayer-Klasse so aussehen

using 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></{0}:VideoPlayer>")]
    public class VideoPlayer : WebControl 
    {
        private string _Mp4Url;
        public string Mp4Url
        {
            get { return _Mp4Url; }
            set { _Mp4Url = value; }
        }

        private string _OggUrl = null;
        public string OggUrl
        {
            get { return _OggUrl; }
            set { _OggUrl = value; }
        }

        private string _Poster = null;
        public string 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;
        public bool Loop
        {
            get { return _Loop; }
            set { _Loop = value; }
        }
    }
}
        

Schritt 5: Erstellen der RenderContents-Methode

Die Hauptaufgabe eines Serversteuerelements besteht darin, eine Art Markup-Sprache für den HTTP-Ausgabestream zu rendern, der an den Client zurückgegeben und von diesem angezeigt wird. Es liegt in unserer Verantwortung als Steuerungsentwickler, der Serversteuerung mitzuteilen, welches Markup gerendert werden soll. Die überschriebene RenderContents-Methode ist der primäre Speicherort, an dem wir dem Steuerelement mitteilen, was wir für den Client rendern möchten.

Fügen Sie der VideoPlayer-Klasse die folgende RenderContents-Überschreibungsmethode hinzu:

protected override void RenderContents(HtmlTextWriter output)
{
            
}
        

Beachten Sie, dass die RenderContents-Methode einen Methodenparameter namens output hat. Dieser Parameter ist ein HtmlTextWriter-Objekt, mit dem das Steuerelement HTML für den Client rendert. Die HtmlTextwriter-Klasse verfügt über eine Reihe von Methoden, mit denen Sie Ihren HTML-Code rendern können, einschließlich AddAttribute und RenderBeginTag.

Schritt 6: Hinzufügen von Tag-Attributen

Bevor wir den Code zum Rendern des <video>-Elements schreiben, müssen Sie zunächst einige Attribute hinzufügen. Wir können die AddAttribute-Methode des HtmlTextWriter-Objekts verwenden, um Attribute für HTML-Tags hinzuzufügen.

Fügen Sie den folgenden Code in die RenderContents-Methode ein:

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("controls", "controls");
}
            
if (PosterUrl != null)
{
    output.AddAttribute("poster", PosterUrl);
}
            
if (AutoPlay == true)
{
    output.AddAttribute("autoplay", "autoplay");
}
            
if (Loop == true)
{
    output.AddAttribute("loop", "loop");
}
        

Sie können sehen, dass wir mithilfe der AddAttribute-Methode dem Tag sieben Attribute hinzugefügt haben. Beachten Sie auch, dass wir eine Aufzählung, HtmlTextWriterAttribute, verwenden, um das Attribut auszuwählen, das wir dem Tag hinzufügen möchten.

Nachdem wir den obigen Code hinzugefügt haben, sollte die RenderContents-Methode folgendermaßen aussehen:

protected override void RenderContents(HtmlTextWriter output)
{
    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("controls", "controls");
    }
            
    if (PosterUrl != null)
    {
        output.AddAttribute("poster", PosterUrl);
    }
            
    if (AutoPlay == true)
    {
        output.AddAttribute("autoplay", "autoplay");
    }
            
    if (Loop == true)
    {
        output.AddAttribute("loop", "loop");
    }
}
        

Schritt 7: Rendern des <video>-Elements

Nachdem Sie einige Tag-Attribute für das Videoelement hinzugefügt haben, ist es Zeit, das <video>-Tag mit seinen Attributen im HTML-Dokument zu rendern. Fügen Sie der RenderContents-Methode den folgenden Code hinzu:

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 verwenden die RenderBeginTag-Methode des output-Objekts, um das öffnende Tag des Videoelements zu rendern, und RenderEndTag, um das schließende Tag zu rendern. Wir haben auch das <source>-Element zwischen dem <video>-Element hinzugefügt. Das Videoelement ermöglicht mehrere Quellelemente. Source-Elemente können mit verschiedenen Videodateien verknüpft werden. Der Browser verwendet das erste erkannte Format.

Die RenderContents-Methode sollte folgendermaßen aussehen, nachdem wir den obigen Code hinzugefügt haben:

protected override void RenderContents(HtmlTextWriter output)
{
    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("controls", "controls");
    }
            
    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 platzieren, wichtig ist. Wir platzieren die AddAttributes-Methoden direkt vor der RenderBeginTag-Methode im Code. Die AddAttributes-Methode ordnet die Attribute dem nächsten HTML-Tag zu, das von der RenderBeginTag-Methode gerendert wird, in diesem Fall dem video-Tag.

Schritt 8: Entfernen des Span-Tags

Standardmäßig umgibt ASP.NET das Steuerelement-Tag beim Rendern des HTML-Markups des Steuerelements mit einem <span>-Element. Wenn wir einen ID-Wert für unser Steuerelement angegeben haben, rendert das Span-Tag standardmäßig auch ein ID-Attribut. Das Vorhandensein der Tags kann manchmal problematisch sein. Wenn wir dies in ASP.NET verhindern möchten, können wir einfach die Render-Methode überschreiben und die RenderContents-Methode direkt aufrufen. So geht's:

protected override void Render(HtmlTextWriter writer)
{
    this.RenderContents(writer);
}
        

Nachdem wir den obigen Code hinzugefügt haben, sollte die VideoPlayer-Klasse folgendermaßen aussehen:

using 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></{0}:VideoPlayer>")]
    public class VideoPlayer : WebControl 
    {
        private string _Mp4Url;
        public string Mp4Url
        {
            get { return _Mp4Url; }
            set { _Mp4Url = value; }
        }

        private string _OggUrl = null;
        public string OggUrl
        {
            get { return _OggUrl; }
            set { _OggUrl = value; }
        }

        private string _Poster = null;
        public string 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;
        public bool Loop
        {
            get { return _Loop; }
            set { _Loop = value; }
        }

        protected override void RenderContents(HtmlTextWriter output)
        {
            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("controls", "controls");
            }
            
            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 override void Render(HtmlTextWriter writer)
        {
            this.RenderContents(writer);
        }
    }
}
        

Unsere Kontrolle ist jetzt beendet! Wir müssen das Projekt nur noch erstellen, bevor wir es auf einer ASP.NET-Webseite verwenden.

Schritt 9: Erstellen des Projekts

Es ist Zeit, das Projekt aufzubauen. Wählen Sie Build und klicken Sie dann im Hauptmenü auf Build Solution.

Nach dem Erstellen des Projekts müssen Sie im nächsten Schritt das VideoPlayer-Steuerelement in den Toolbox Explorer einfügen.

Schritt 10: Hinzufügen des VideoPlayer-Steuerelements zur Visual Studio Toolbox

Klicken Sie im Toolbox Explorer mit der rechten Maustaste, um das VideoPlayer-Steuerelement zur Toolbox hinzuzufügen
Choose Items aus dem Kontextmenü
Klicken Sie im Dialogfeld Toolbox-Elemente auswählen auf die Schaltfläche Browse
Navigieren Sie zum ASP.NET-Projektverzeichnis
Wechseln Sie in das CustomControls-Verzeichnis
Öffnen Sie das Verzeichnis Bin\Debug (Visual Studio erstellt standardmäßig Debug-Versionen.)
Wählen Sie die CustomControls.DLL-Assembly aus und klicken Sie auf die Open-Schaltfläche

VideoPlayer wird im Dialogfeld Toolbox-Elemente auswählen angezeigt (sehen Sie Abbildung oben). Das Kontrollkästchen zeigt es als ausgewählt an. Sobald Sie im Dialogfeld Toolbox-Elemente auswählen auf die Schaltfläche OK klicken, wird das neue VideoPlayer-Steuerelement in der Toolbox angezeigt.

Schritt 11: Platzieren des VideoPlayer-Steuerelements auf der ASP.NET-Webseite

Um zu sehen, wie die Steuerung funktioniert, müssen wir ihr ein Zuhause geben. Fügen Sie der Website eine neue Seite hinzu. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das ASP.NET-Projekt. Wählen Sie Add New Item und fügen Sie ein Web Form hinzu. Nennen Sie das Webformular VideoPlayerTest.aspx.

Wechseln Sie in den Design-Modus, um das Steuerelement auf der Seite zu platzieren. Ziehen Sie das VideoPlayer-Steuerelement aus der Toolbox und legen Sie es in der Entwurfsansicht VideoPlayerTest.aspx ab.

Die folgende Auflistung zeigt, wie das Steuerelement auf der Seite deklariert wird:

1	<cc1:VideoPlayer ID="VideoPlayer1" runat="server" Mp4Url="videos/movie.mp4" OggUrl="videos/movie.ogg" Width="400" Height="300" />

Die folgende Codezeile wurde von Visual Studio zur ASPX-Datei hinzugefügt, um das Steuerelement aufzunehmen. Sie können es anzeigen, indem Sie in Visual Studio unten im Codefenster die Registerkarte Source auswählen. Die Register-Direktive teilt der ASP.NET-Laufzeit mit, wo sich das benutzerdefinierte Steuerelement (welche Assembly) befindet, und ordnet es einem Tag-Präfix zu.

1	<%@ Register assembly="CustomControls" namespace="CustomControls" tagprefix="cc1" %>

Wir können jetzt die Steuerung testen.

VideoPlayer-Steuerelement, das unter Google Chrome ausgeführt wird.

Zusammenfassung

In diesem Tutorial haben Sie gelernt, wie Sie Ihr eigenes benutzerdefiniertes ASP.NET-Serversteuerelement von Grund auf neu erstellen. Sie kennen jetzt jeden Schritt des Prozesses - vom Erstellen eines Projekts für eine benutzerdefinierte Websteuerelementbibliothek über das Hinzufügen von Eigenschaften zu einem benutzerdefinierten Steuerelement, das Rendern des HTML-Markups des Steuerelements für den Client bis hin zur Verwendung des Benutzerdefiniertes ASP.NET-Steuerelement in einem Webformular.

Hoffentlich verfügen Sie jetzt über die Fähigkeiten, benutzerdefinierte Steuerelemente zu erstellen, die alle Funktionen der serverseitigen Standardsteuerelemente von ASP.NET bieten. Vielen Dank fürs Lesen!

1	using System;
2	using System.Collections.Generic;
3	using System.ComponentModel;
4	using System.Linq;
5	using System.Text;
6	using System.Web;
7	using System.Web.UI;
8	using System.Web.UI.WebControls;
9
10	namespace CustomControls
11	{
12	[ToolboxData("<{0}:VideoPlayer runat=server></{0}:VideoPlayer>")]
13	public class VideoPlayer : WebControl
14	{
15	private string _Mp4Url;
16	public string Mp4Url
17	{
18	get { return _Mp4Url; }
19	set { _Mp4Url = value; }
20	}
21
22	private string _OggUrl = null;
23	public string OggUrl
24	{
25	get { return _OggUrl; }
26	set { _OggUrl = value; }
27	}
28
29	private string _Poster = null;
30	public string PosterUrl
31	{
32	get { return _Poster; }
33	set { _Poster = value; }
34	}
35
36	private bool _AutoPlay = false;
37	public bool AutoPlay
38	{
39	get { return _AutoPlay; }
40	set { _AutoPlay = value; }
41	}
42
43	private bool _Controls = true;
44	public bool DisplayControlButtons
45	{
46	get { return _Controls; }
47	set { _Controls = value; }
48	}
49
50	private bool _Loop = false;
51	public bool Loop
52	{
53	get { return _Loop; }
54	set { _Loop = value; }
55	}
56
57	protected override void RenderContents(HtmlTextWriter output)
58	{
59	output.AddAttribute(HtmlTextWriterAttribute.Id, this.ID);
60	output.AddAttribute(HtmlTextWriterAttribute.Width, this.Width.ToString());
61	output.AddAttribute(HtmlTextWriterAttribute.Height, this.Height.ToString());
62	if (DisplayControlButtons == true)
63	{
64	output.AddAttribute("controls", "controls");
65	}
66
67	if (PosterUrl != null)
68	{
69	output.AddAttribute("poster", PosterUrl);
70	}
71
72	if (AutoPlay == true)
73	{
74	output.AddAttribute("autoplay", "autoplay");
75	}
76
77	if (Loop == true)
78	{
79	output.AddAttribute("loop", "loop");
80	}
81
82	output.RenderBeginTag("video");
83	if (OggUrl != null)
84	{
85	output.AddAttribute("src", OggUrl);
86	output.AddAttribute("type", "video/ogg");
87	output.RenderBeginTag("source");
88	output.RenderEndTag();
89	}
90
91	if (Mp4Url != null)
92	{
93	output.AddAttribute("src", Mp4Url);
94	output.AddAttribute("type", "video/mp4");
95	output.RenderBeginTag("source");
96	output.RenderEndTag();
97	}
98	output.RenderEndTag();
99	}
100
101	protected override void Render(HtmlTextWriter writer)
102	{
103	this.RenderContents(writer);
104	}
105	}
106	}
107