Share
Dans ce didacticiel, vous allez apprendre à créer un contrôle serveur ASP.NET en créant un contrôle de lecteur vidéo HTML5. En cours de route, nous passerons en revue le processus fondamental de développement du contrôle de serveur..
ASP.NET est livré avec son propre ensemble de contrôles côté serveur, alors pourquoi créer notre propre?
En créant nos propres contrôles, nous pouvons ensuite créer de puissants composants visuels réutilisables pour l'interface utilisateur de notre application Web..
Ce tutoriel vous présentera le processus de développement du contrôle serveur ASP.NET. Vous verrez également comment la création de vos propres contrôles peut simultanément améliorer la qualité de vos applications Web, vous rendre plus productif et améliorer vos interfaces utilisateur..
Les contrôles personnalisés ASP.NET sont plus souples que les contrôles utilisateur. Nous pouvons créer un contrôle personnalisé qui hérite d'un autre contrôle côté serveur, puis étendre ce contrôle. Nous pouvons également partager un contrôle personnalisé entre les projets. En règle générale, nous allons créer notre contrôle personnalisé dans une bibliothèque de contrôles Web personnalisée compilée séparément de notre application Web. En conséquence, nous pouvons ajouter cette bibliothèque à n’importe quel projet afin d’utiliser notre contrôle personnalisé dans ce projet..
Jusqu'à présent, il n'y avait jamais eu de moyen natif d'afficher une vidéo sur une page Web. Aujourd'hui, la plupart des vidéos sont diffusées via un plugin (comme Flash ou Silverlight). Cependant, tous les navigateurs n'ont pas les mêmes plugins. HTML5 spécifie un moyen natif standard d’inclure une vidéo, avec le vidéo élément.
Il existe actuellement deux formats vidéo largement pris en charge pour l'élément video: Ogg fichiers [codés avec Theora et Vorbis pour la vidéo et l’audio respectivement] et MPEG 4 fichiers [codés avec H.264 et AAC].
Pour afficher une vidéo en HTML5, c'est tout ce dont nous avons besoin:
le les contrôles attribut est pour l'ajout jouer, pause et le volume les contrôles. Sans cet attribut, votre vidéo ne semble être qu'une image. C’est aussi toujours une bonne idée d’inclure les deux largeur et la taille les attributs. Le tableau suivant montre tous les attributs du élément:
Pour commencer, une copie de Visual Studio de Visual Web Developer Express est nécessaire. Si vous ne disposez pas de la version complète de Visual Studio, vous pouvez télécharger gratuitement la version Express Edition..
Le lecteur vidéo HTML5 que nous allons créer ici n’est qu’un simple lecteur vidéo qui restituera l’interface native fournie par le navigateur. Les navigateurs prenant en charge la vidéo HTML5 ont des lecteurs vidéo intégrés, y compris un ensemble de commandes (lecture / pause, etc.), de sorte que vous verrez une interface différente pour chaque navigateur lors de l’exécution de cette commande..
Le lecteur vidéo HTML5 dans Firefox 3.6.8. Premièrement, nous devons créer un nouveau projet de bibliothèque de classes pour contenir nos contrôles personnalisés. En créant le contrôle personnalisé dans une bibliothèque de classes séparée, nous pouvons compiler le projet dans une DLL distincte et utiliser le contrôle personnalisé dans toute application le nécessitant..
Ouvrez votre projet ASP.NET avec Visual Studio ou Visual Web Developer. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom de la solution, puis sélectionnez Ajouter un nouveau projet dans le menu contextuel. Dans la boîte de dialogue Ajouter un nouveau projet, choisissez le type de projet à Web projet et sélectionnez Contrôle serveur ASP.NET comme modèle, comme ci-dessous:
Nommez le projet Contrôles personnalisés. Cliquez sur D'accord. Le nouveau projet de contrôle de serveur ASP.NET est créé et Visual Studio vous fournit également un contrôle Web simple pour commencer. Supprimer ce contrôle personnalisé car nous n'en avons pas besoin.
Dans l'Explorateur de solutions, cliquez avec le bouton droit de la souris sur Contrôles personnalisés projet et sélectionnez Ajoute un nouvel objet dans le menu contextuel. dans le Ajoute un nouvel objet boîte de dialogue, choisissez le type de catégorie à Web catégorie et sélectionnez Contrôle serveur ASP.NET dans les templates.
Nommez le nouveau contrôle personnalisé Lecteur vidéo. Cliquez sur Ajouter. Le nouveau contrôle personnalisé (VideoPlayer.cs) est créé et ajouté au projet CustomControls.
Accentsconagua
en utilisant le système; 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 [Bindable (true)] [Category (" Apparence ")] [DefaultValue (" ")] [Localizable (true)] chaîne publique Text get String s = (String) ViewState [ "Texte"]; return ((s == null)? "[" + This.ID + "]: s); set ViewState [" Text "] = valeur; annulé protégé RenderContents (sortie HtmlTextWriter ) output.Write (Text); Le code ci-dessus est le code par défaut généré par Visual Studio pour une bibliothèque de contrôles Web. Pour commencer à travailler avec VideoPlayer.cs, nous devons modifier le code ci-dessus. La première chose à faire est de tout supprimer entre la ligne de déclaration de classe et la fin de la classe. Cela nous laisse avec ce code:
en utilisant le système; 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>")] Classe publique VideoPlayer: WebControl Comme vous le voyez ci-dessus, le Lecteur vidéo la classe dérive de la System.Web.UI.WebControl classe. En fait, tous les contrôles ASP.NET côté serveur sont dérivés de la WebControl classe.
La ligne de déclaration de classe dans le code par défaut spécifie également la propriété par défaut du Lecteur vidéo contrôler en tant que Texte propriété. le Lecteur vidéo le contrôle que nous créons ici n'a pas de propriété appelée Texte. Supprimez donc la référence à Texte comme propriété par défaut. Après toutes les modifications, le VideoPlayer.cs Le fichier de code devrait ressembler à ceci:
en utilisant le système; 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; espace de noms CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] Classe publique VideoPlayer: WebControl Dans cette étape, nous allons ajouter des propriétés au contrôle VideoPlayer pour gérer le comportement du contrôle. Ce qui suit est la liste des propriétés que nous allons ajouter à la VideoPlayer.cs fichier de code:
URL de la vidéo: Une propriété de chaîne qui spécifie l'URL de la vidéo à lire.PosterUrl: Propriété de chaîne spécifiant l'adresse d'un fichier image à afficher lorsqu'aucune donnée vidéo n'est disponible.Lecture automatique: Propriété booléenne permettant de spécifier si la lecture de la vidéo doit commencer automatiquement ou non, à l'ouverture de la page Web.DisplayControlButtons: Une propriété booléenne qui spécifie si les boutons de navigation du lecteur sont affichés ou non.Boucle: Une propriété booléenne qui spécifie si la vidéo doit recommencer ou non à chaque fois qu'elle est terminée.Ajoutez le code suivant à la classe VideoPlayer:
chaîne privée _Mp4Url; chaîne publique Mp4Url get return _Mp4Url; set _Mp4Url = valeur; chaîne privée _OggUrl = null; chaîne publique OggUrl get return _OggUrl; set _OggUrl = valeur; chaîne privée _Poster = null; chaîne publique 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 = valeur; private bool _Loop = false; boucle publique bool get return _Loop; set _Loop = value;
Après avoir ajouté les propriétés ci-dessus, la classe VideoPlayer devrait ressembler à
en utilisant le système; 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; espace de noms CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] public class VideoPlayer: WebControl chaîne privée _Mp4Url; chaîne publique Mp4Url get return _Mp4Url; set _Mp4Url = valeur; chaîne privée _OggUrl = null; chaîne publique OggUrl get return _OggUrl; set _OgUrl = valeur; chaîne privée _Poster = null; chaîne publique PosterUrl get return _Poster; set _Poster = valeur; private bool _AutoPlay = false; bool public AutoPlay get return _AutoPlay; set _AutoPlay = valeur ; private bool _Controls = true; public bool DisplayControlButtons get return _Controls; set _Controls = valeur; private bool _Loop = false; bool public Loop get return _Loop; set _Loop = valeur; Le travail principal d'un contrôle serveur consiste à restituer un type de langage de balisage dans le flux de sortie HTTP, qui est renvoyé au client et affiché par ce dernier. Il est de notre responsabilité en tant que développeur de contrôle d’indiquer au contrôle du serveur le balisage à restituer. Le dépassé RenderContents La méthode est l'emplacement principal où nous disons au contrôle ce que nous voulons rendre au client..
Ajouter le remplacement suivant RenderContents méthode à la Lecteur vidéo classe:
protégé annuler void RenderContents (sortie HtmlTextWriter)
Notez que le RenderContents méthode a un paramètre de méthode appelé sortie. Ce paramètre est un HtmlTextWriter objet, qui est ce que le contrôle utilise pour rendre HTML au client. le HtmlTextwriter classe a un certain nombre de méthodes que vous pouvez utiliser pour rendre votre code HTML, y compris Ajouter un attribut et RenderBeginTag.
Avant d’écrire le code pour rendre le élément, la première chose à faire est d’ajouter quelques attributs. Nous pouvons utiliser le Ajouter un attribut méthode du HtmlTextWriter objet pour ajouter des attributs pour les balises HTML.
Ajoutez le code suivant dans le RenderContents méthode:
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 ("contrôles", "contrôles"); if (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); if (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); if (Loop == true) output.AddAttribute ("boucle", "boucle"); Vous pouvez voir que, en utilisant le Ajouter un attribut méthode, nous avons ajouté sept attributs à la balise. Notez également que nous utilisons une énumération, HtmlTextWriterAttribute, pour sélectionner l'attribut que nous voulons ajouter à la balise.
Après avoir ajouté le code ci-dessus, le RenderContents méthode devrait ressembler à ceci:
protégé annule le contenu vide RenderContents (sortie 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 ("contrôles", "contrôles"); if (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); if (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); if (Loop == true) output.AddAttribute ("boucle", "boucle"); Après avoir ajouté des attributs de balise pour l’élément video, il est temps de rendre le balise avec ses attributs sur le document HTML. Ajoutez le code suivant dans le RenderContents méthode:
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 (); Nous utilisons le RenderBeginTag méthode de sortie objet pour rendre la balise d'ouverture de l'élément vidéo, et RenderEndTag pour rendre sa balise de fermeture. Nous avons également ajouté le élément. L'élément vidéo permet plusieurs éléments source. La source les éléments peuvent être liés à différents fichiers vidéo. Le navigateur utilisera le premier format reconnu.
le RenderContents La méthode devrait ressembler à ceci après que nous ayons ajouté le code ci-dessus:
protégé annule le contenu vide RenderContents (sortie 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 ("contrôles", "contrôles"); if (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); if (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); if (Loop == true) output.AddAttribute ("boucle", "boucle"); 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 (); Notez que l’ordre dans lequel nous plaçons le AddAttributes les méthodes sont importantes. Nous plaçons le AddAttributes méthodes directement avant la RenderBeginTag méthode dans le code. le AddAttributes La méthode associe les attributs à la prochaine balise HTML rendue par le RenderBeginTag méthode, dans ce cas la vidéo étiquette.
Par défaut, ASP.NET entourera la balise de contrôle avec un élément lors du rendu du balisage HTML du contrôle. Si nous avons fourni un ID valeur pour notre contrôle, alors le Envergure balise rendra également, par défaut, un ID attribut. Avoir les balises peut parfois être problématique, donc si nous voulons éviter cela dans ASP.NET, nous pouvons simplement remplacer le Rendre méthode et appelez le RenderContents méthode directement. Voici comment faire cela:
protégé annule le rendu rendu (HtmlTextWriter writer) this.RenderContents (writer);
Après avoir ajouté le code ci-dessus, la classe VideoPlayer devrait ressembler à ceci:
en utilisant le système; 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; espace de noms CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] public class VideoPlayer: WebControl chaîne privée _Mp4Url; chaîne publique Mp4Url get return _Mp4Url; set _Mp4Url = valeur; chaîne privée _OggUrl = null; chaîne publique OggUrl get return _OggUrl; set _OgUrl = valeur; chaîne privée _Poster = null; chaîne publique PosterUrl get return _Poster; set _Poster = valeur; private bool _AutoPlay = false; bool public AutoPlay get return _AutoPlay; set _AutoPlay = valeur ; private bool _Controls = true; public bool DisplayControlButtons get return _Controls; set _Controls = valeur; private bool _Loop = false; bool public Loop get return _Loop; set _Loop = valeur; Protégé par la protection de la liste des adresses (RtContents) (output HtmlTextWriter) output.AddAttribute (HtmlTextWriterAttribute.Id, this.ID); output.AddAttribute Height.ToString ()); if (DisplayControlButtons == true) sortie.A ddAttribute ("contrôles", "contrôles"); if (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); if (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); if (Loop == true) output.AddAttribute ("boucle", "boucle"); 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); Notre contrôle est maintenant terminé! Il ne nous reste plus qu'à construire le projet avant de l'utiliser sur une page Web ASP.NET.
Il est temps de construire le projet. Sélectionner Construire, puis cliquez sur Solution de construction du menu principal.
Après avoir créé le projet, l’étape suivante consiste à ajouter le contrôle VideoPlayer dans le dossier. Explorateur de boîte à outils.
Explorateur de boîte à outils Choisir des articles du menu contextuelFeuilleter bouton de la boîte de dialogue Choisir les éléments de la boîte à outils Contrôles personnalisés annuaireBin \ Debug répertoire (Visual Studio crée les versions de débogage par défaut.) CustomControls.DLL assemblage et cliquez sur le Ouvrir bouton
Lecteur vidéo apparaîtra dans la boîte de dialogue Choisir les éléments de la boîte à outils, comme indiqué dans l'image ci-dessus. La case à cocher indiquera comme sélectionné. Dès que vous cliquez sur le D'accord bouton de la boîte de dialogue Choisir les éléments de la boîte à outils, le nouveau contrôle VideoPlayer apparaît dans la boîte à outils.
Pour voir comment fonctionne le contrôle, nous devons lui donner une maison. Ajouter une nouvelle page sur le site. Cliquez avec le bouton droit sur le projet ASP.NET dans l'Explorateur de solutions. Sélectionner Ajoute un nouvel objet, et ajouter un Formulaire Web. Nommez le formulaire Web VideoPlayerTest.aspx.
Pour placer le contrôle sur la page, basculez sur Conception mode. Faites glisser le Lecteur vidéo contrôle de la boîte à outils et déposez-le sur le VideoPlayerTest.aspx vue de conception.
La liste suivante montre comment le contrôle est déclaré sur la page:
La ligne de code suivante est ce que Visual Studio a ajouté à la ASPX fichier pour accueillir le contrôle. Vous pouvez le voir en sélectionnant le La source onglet du bas de la fenêtre de code dans Visual Studio. le registre directive indique au moteur d'exécution ASP.NET où trouver le contrôle personnalisé (quel assemblage) et le mappe sur un préfixe de balise.
<%@ Register assembly="CustomControls" namespace="CustomControls" tagprefix="cc1" %>
Nous pouvons maintenant tester le contrôle.
Contrôle VideoPlayer s'exécutant sur Google Chrome. Dans ce tutoriel, vous avez appris à créer votre propre contrôle serveur personnalisé ASP.NET. Vous connaissez maintenant toutes les étapes du processus: création d'un projet de bibliothèque de contrôles Web personnalisé, ajout de propriétés à un contrôle personnalisé, rendu du balisage HTML du contrôle au client et, enfin, utilisation du Contrôle personnalisé ASP.NET dans un formulaire Web.
J'espère que vous avez maintenant les compétences nécessaires pour créer des contrôles personnalisés dotés de toutes les fonctionnalités des contrôles ASP.NET standard côté serveur. Merci beaucoup pour la lecture!
