Share
In deze zelfstudie leert u hoe u een ASP.NET-serverbesturingselement kunt bouwen door een HTML5-videospelerbesturing te maken. Onderweg zullen we het fundamentele proces van de ontwikkeling van serverbesturing helemaal opnieuw bekijken.
ASP.NET wordt geleverd met een eigen set besturingselementen aan de serverkant, dus waarom zou u die van ons zelf maken??
Door onze eigen besturingselementen te maken, kunnen we krachtige, herbruikbare visuele componenten bouwen voor de gebruikersinterface van onze webapplicatie.
Deze tutorial zal u kennis laten maken met het proces van de ontwikkeling van de ASP.NET-serverbesturing. U zult ook zien hoe het creëren van uw eigen bedieningselementen tegelijkertijd de kwaliteit van uw webtoepassingen kan verbeteren, u productiever kan maken en uw gebruikersinterfaces kan verbeteren.
Aangepaste ASP.NET-besturingselementen zijn flexibeler dan gebruikersbedieningen. We kunnen een aangepast besturingselement maken dat erft van een ander besturingselement aan de serverzijde en dat besturingselement vervolgens uitbreiden. We kunnen ook een aangepast besturingselement tussen projecten delen. Meestal zullen we ons aangepast besturingselement maken in een aangepaste webbibliotheek die afzonderlijk van onze webtoepassing wordt gecompileerd. Als gevolg hiervan kunnen we die bibliotheek toevoegen aan elk project om ons aangepaste besturingselement in dat project te gebruiken.
Tot nu toe was er nooit een native manier om video op een webpagina weer te geven. Tegenwoordig worden de meeste video's getoond, via het gebruik van een plug-in (zoals Flash of Silverlight). Niet alle browsers hebben echter dezelfde plug-ins. HTML5 specificeert een standaard, native manier om video op te nemen, met de video- element.
Momenteel zijn er twee breed ondersteunde video-indelingen voor het video-element: Ogg bestanden [gecodeerd met respectievelijk Theora en Vorbis voor video en audio] en MPEG 4 bestanden [gecodeerd met H.264 en AAC].
Om een video in HTML5 te tonen, is dit alles wat we nodig hebben:
De controls kenmerk is voor toevoegen spelen, pauze en volume controles. Zonder dit kenmerk lijkt uw video slechts een afbeelding te zijn. Het is ook altijd een goed idee om beide op te nemen breedte en hoogte attributen. De volgende tabel toont alle attributen van de element:
Het enige dat nodig is om aan de slag te gaan, is een kopie van Visual Studio of Visual Web Developer Express. Als u niet over de volledige versie van Visual Studio beschikt, kunt u de gratis Express-versie gebruiken.
De HTML5-videospeler die we hier zullen maken, is slechts een eenvoudige videospeler die elke native interface van de browser zal weergeven. Browsers die HTML5-video ondersteunen, hebben videospelers ingebouwd, inclusief een reeks bedieningselementen (afspelen / pauzeren, enz.), Zodat u een andere interface voor elke browser ziet wanneer u dit besturingselement uitvoert.
De HTML5-videospeler in Firefox 3.6.8. Eerst moeten we een nieuw klassenbibliotheekproject maken om onze aangepaste besturingselementen te houden. Door het aangepaste besturingselement in een afzonderlijke klassenbibliotheek te maken, kunnen we het project in een afzonderlijke DLL compileren en het aangepaste besturingselement gebruiken in elke toepassing waarvoor dit vereist is.
Open uw ASP.NET-project met Visual Studio of Visual Web Developer. Klik in Solution Explorer met de rechtermuisknop op de naam van de oplossing en selecteer Nieuw project toevoegen vanuit het contextmenu. Kies in het dialoogvenster Nieuw project toevoegen het projecttype om een te zijn Web project en selecteer ASP.NET Server Control als de sjabloon, zoals zo:
Geef het project een naam CustomControls. Klik OK. Het nieuwe ASP.NET Server Control-project wordt gemaakt en Visual Studio biedt u in de eerste plaats ook een eenvoudige webbesturing. Verwijder dit aangepaste besturingselement, omdat we het niet nodig hebben.
Klik in Solution Explorer met de rechtermuisknop op CustomControls project en selecteer Voeg een nieuw item toe vanuit het contextmenu. In de Voeg een nieuw item toe dialoogvenster, kies het categorietype om een te zijn Web categorie en selecteer ASP.NET Server Control in de sjablonen.
Geef de nieuwe aangepaste besturing een naam Video speler. Klik Toevoegen. Het nieuwe aangepaste besturingselement (VideoPlayer.cs) is gemaakt en toegevoegd aan het CustomControls-project.
Accentsconagua
systeem gebruiken; met behulp van System.Collections.Generic; met behulp van System.ComponentModel; met behulp van System.Linq; met behulp van System.Text; met behulp van System.Web; met behulp van System.Web.UI; met behulp van System.Web.UI.WebControls; naamruimte CustomControls [DefaultProperty ("Text")] [ToolboxData ("<0:VideoPlayer runat=server>")] public class VideoPlayer: WebControl [Bindable (true)] [Category (" Appearance ")] [DefaultValue (" ")] [Localizable (true)] public string Tekst get String s = (String) ViewState [ "Tekst"]; return ((s == null)? "[" + This.ID + "]": s); set ViewState ["Text"] = waarde; beveiligde override void RenderContents (HtmlTextWriter-uitvoer ) output.Write (tekst); De bovenstaande code is de standaardcode die wordt gegenereerd door Visual Studio voor een webbesturingsbibliotheek. Om mee te werken VideoPlayer.cs, we moeten de bovenstaande code wijzigen. Het eerste dat we moeten doen, is alles tussen de klassendeclaratielijn en het einde van de klas verwijderen. Dat laat ons met deze code:
systeem gebruiken; met behulp van System.Collections.Generic; met behulp van System.ComponentModel; met behulp van System.Linq; met behulp van System.Text; met behulp van System.Web; met behulp van System.Web.UI; met behulp van System.Web.UI.WebControls; naamruimte CustomControls [DefaultProperty ("Text")] [ToolboxData ("<0:VideoPlayer runat=server>")] public class VideoPlayer: WebControl Zoals je hierboven ziet, de Video speler klasse is afgeleid van de System.Web.UI.WebControl klasse. Alle besturingselementen voor de ASP.NET-server zijn afgeleid van de WebControl klasse.
De klasse-declaratieregel in de standaardcode geeft ook de standaardeigenschap voor de Video speler controle als de Tekst eigendom. De Video speler controle die we hier maken, heeft geen eigenschap genaamd Tekst. Dus, verwijder de verwijzing naar Tekst als de standaardeigenschap. Na alle aanpassingen, de VideoPlayer.cs codebestand zou er als volgt uit moeten zien:
systeem gebruiken; met behulp van System.Collections.Generic; met behulp van System.ComponentModel; met behulp van System.Linq; met behulp van System.Text; met behulp van System.Web; met behulp van System.Web.UI; met behulp van System.Web.UI.WebControls; namespace CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] public class VideoPlayer: WebControl In deze stap voegen we een aantal eigenschappen toe aan het besturingselement VideoPlayer om het gedrag van het besturingselement af te handelen. Het volgende is de lijst met eigenschappen die we zullen toevoegen aan de VideoPlayer.cs code bestand:
Video URL: Een tekenreekseigenschap die de URL van de af te spelen video aangeeft.PosterUrl: Een tekenreekseigenschap die het adres van een afbeeldingsbestand aangeeft dat moet worden weergegeven terwijl er geen videogegevens beschikbaar zijn.Automatisch afspelen: Een boolean-eigenschap om op te geven of de video automatisch moet worden afgespeeld of niet, wanneer de webpagina wordt geopend.DisplayControlButtons: Een boolean-eigenschap die aangeeft of de navigatieknoppen van de speler worden weergegeven of niet.Lus: Een boolean-eigenschap die aangeeft of de video opnieuw moet beginnen of niet, telkens wanneer deze is voltooid.Voeg de volgende code toe aan de klasse VideoPlayer:
private string _Mp4Url; openbare tekenreeks Mp4Url krijg return _Mp4Url; set _Mp4Url = waarde; private string _OggUrl = null; openbare string OggUrl krijg return _OggUrl; set _OggUrl = waarde; private string _Poster = null; public string PosterUrl krijg return _Poster; set _Poster = waarde; private bool _AutoPlay = false; public bool AutoPlay krijg return _AutoPlay; set _AutoPlay = waarde; private bool _Controls = true; public bool DisplayControlButtons krijg return _Controls; set _Controls = waarde; private bool _Loop = false; public bool Loop krijg return _Loop; set _Loop = waarde;
Nadat we de bovenstaande eigenschappen hebben toegevoegd, zou de klasse VideoPlayer eruit moeten zien
systeem gebruiken; met behulp van System.Collections.Generic; met behulp van System.ComponentModel; met behulp van System.Linq; met behulp van System.Text; met behulp van System.Web; met behulp van System.Web.UI; met behulp van System.Web.UI.WebControls; namespace CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] 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 = waarde; private string _Poster = null; public string PosterUrl krijg return _Poster; set _Poster = value; private bool _AutoPlay = false; public bool AutoPlay krijg return _AutoPlay; set _AutoPlay = waarde ; private bool _Controls = true; public bool DisplayControlButtons krijg return _Controls; set _Controls = value; private bool _Loop = false; public bool Loop krijg return _Loop; set _Loop = value; De primaire taak van een serverbesturingselement is om een bepaald type opmaaktaal naar de HTTP-uitvoerstroom te vertalen, die wordt geretourneerd naar en wordt weergegeven door de client. Het is onze verantwoordelijkheid als besturingsontwikkelaar om aan de server te vertellen welke markeringen moeten worden weergegeven. Het overschreven RenderContents methode is de primaire locatie waar we de besturing vertellen wat we aan de klant willen geven.
Voeg de volgende opheffing toe RenderContents methode om de Video speler klasse:
beveiligde override void RenderContents (HtmlTextWriter-uitvoer)
Merk op dat de RenderContents methode heeft een methode parameter genaamd uitgang. Deze parameter is een HtmlTextWriter object, wat het besturingselement gebruikt om HTML naar de client te renderen. De HtmlTextWriter klasse heeft een aantal methoden die u kunt gebruiken om uw HTML te renderen, inclusief Attribuut toevoegen en RenderBeginTag.
Voordat we de code schrijven om het te maken element, het eerste ding om te doen is een aantal attributen toe te voegen. We kunnen de gebruiken Attribuut toevoegen methode van de HtmlTextWriter object om kenmerken voor HTML-tags toe te voegen.
Voeg de volgende code toe aan de RenderContents 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 ("controls", "controls"); if (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); if (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); if (Loop == true) output.AddAttribute ("loop", "loop"); U kunt dat zien aan de hand van de Attribuut toevoegen methode hebben we zeven kenmerken aan de tag toegevoegd. Merk ook op dat we een opsomming gebruiken, HtmlTextWriterAttribute, om het attribuut te selecteren dat we aan de tag willen toevoegen.
Nadat we de bovenstaande code hebben toegevoegd, de RenderContents methode zou er zo uit moeten zien:
beschermde override void RenderContents (HtmlTextWriter-uitvoer) 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"); Nadat u enkele tagattributen voor het video-element heeft toegevoegd, is het tijd om de tag te renderen tag met zijn attributen in het HTML-document. Voeg de volgende code toe aan de RenderContents 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 (); Wij gebruiken de RenderBeginTag methode van uitgang object om de openingstag van het video-element weer te geven, en RenderEndTag om de sluitingstag te maken. We hebben ook het element. Het video-element maakt meerdere bronelementen mogelijk. Bron elementen kunnen linken naar verschillende videobestanden. De browser gebruikt de eerste herkende indeling.
De RenderContents methode zou er zo uit moeten zien nadat we de bovenstaande code hebben toegevoegd:
beschermde override void RenderContents (HtmlTextWriter-uitvoer) 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 (); Merk op dat de volgorde waarin we het plaatsen AddAttributes methoden is belangrijk. We plaatsen de AddAttributes methoden direct voor de RenderBeginTag methode in de code. De AddAttributes methode associeert de kenmerken met de volgende HTML-tag die wordt weergegeven door de RenderBeginTag methode, in dit geval de video- label.
Standaard omringt ASP.NET de controletag met a element bij het renderen van de HTML-opmaak van het besturingselement. Als we een ID kaart waarde voor onze controle, dan is de Span tag zal ook standaard een ID kaart attribuut. Het hebben van de tags kan soms problematisch zijn, dus als we dit in ASP.NET willen voorkomen, kunnen we eenvoudig de geven methode en bel de RenderContents methode direct. Hier is hoe te om dat te doen:
beschermde override void Render (HtmlTextWriter writer) this.RenderContents (schrijver);
Nadat we de bovenstaande code hebben toegevoegd, ziet de klasse VideoPlayer er als volgt uit:
systeem gebruiken; met behulp van System.Collections.Generic; met behulp van System.ComponentModel; met behulp van System.Linq; met behulp van System.Text; met behulp van System.Web; met behulp van System.Web.UI; met behulp van System.Web.UI.WebControls; namespace CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] 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 = waarde; private string _Poster = null; public string PosterUrl krijg return _Poster; set _Poster = value; private bool _AutoPlay = false; public bool AutoPlay krijg return _AutoPlay; set _AutoPlay = waarde ; private bool _Controls = true; public bool DisplayControlButtons krijg return _Controls; set _Controls = value; private bool _Loop = false; public bool Loop krijg return _Loop; set _Loop = value; beschermde override void RenderContents (HtmlTextWriter-uitvoer) output.AddAttribute (HtmlTextWriterAttribute.Id, this.ID); output.AddAttribute (HtmlTextWriterAttribute.Width, this.Width.ToString ()); output.AddAttribute (HtmlTextWriterAttribute.Height, this. Height.ToString ()); if (DisplayControlButtons == true) output.A ddAttribute ("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 (); beschermde override void Render (HtmlTextWriter writer) this.RenderContents (schrijver); Onze controle is nu voltooid! Het enige dat we moeten doen, is het project bouwen voordat we het op een ASP.NET-webpagina gebruiken.
Het is tijd om het project te bouwen. kiezen Bouwen, en klik vervolgens op Bouw oplossing vanuit het hoofdmenu.
Na het bouwen van het project, is de volgende stap om het besturingselement VideoPlayer toe te voegen aan de Toolbox Explorer.
Toolbox Explorer Kies items vanuit het contextmenuBlader in het dialoogvenster Choose Toolbox Items CustomControls directoryBin \ Debug directory (Visual Studio bouwt standaard foutopsporingsversies.) CustomControls.DLL montage en klik op de Open knop
Video speler zal verschijnen in het Choose Toolbox Items dialoogvenster zoals getoond in de afbeelding hierboven. Het selectievakje toont het zoals geselecteerd. Zodra u op de knop klikt OK knop in het dialoogvenster Choose Toolbox Items kiezen, verschijnt het nieuwe besturingselement VideoPlayer in de toolbox.
Om te zien hoe de besturing werkt, moeten we hem een thuis geven. Voeg een nieuwe pagina toe aan de website. Klik met de rechtermuisknop op het ASP.NET-project vanuit de Solution Explorer. kiezen Voeg een nieuw item toe, en voeg een toe Webformulier. Geef het webformulier een naam VideoPlayerTest.aspx.
Ga naar als u het besturingselement op de pagina wilt plaatsen Ontwerp modus. Sleept de Video speler controle vanuit de Toolbox en laat het op de VideoPlayerTest.aspx ontwerpweergave.
De volgende lijst laat zien hoe het besturingselement wordt gedeclareerd op de pagina:
De volgende coderegel is wat Visual Studio heeft toegevoegd aan de ASPX bestand om de besturing onder te brengen. U kunt het zien door de. Te selecteren Bron tab onder aan het codevenster in Visual Studio. De Registreren directive vertelt de ASP.NET runtime waar het aangepaste besturingselement (welke assembly) te vinden is en koppelt het aan een tagprefix.
<%@ Register assembly="CustomControls" namespace="CustomControls" tagprefix="cc1" %>
We kunnen nu de besturing testen.
VideoPlayer-besturing werkt op Google Chrome. In deze zelfstudie hebt u geleerd hoe u vanuit het niets uw eigen aangepaste ASP.NET-serverbesturing kunt maken. U kent nu elke stap van het proces - van het maken van een webproject voor aangepaste controlebibliotheek, hoe u eigenschappen toevoegt aan een aangepast besturingselement, hoe u de HTML-markup van het besturingselement rendert naar de client en tenslotte hoe u de Aangepaste ASP.NET-controle in een webformulier.
Hopelijk heb je nu de vaardigheden om aangepaste besturingselementen te maken die alle functionaliteit van de standaard ASP.NET-bedieningsknoppen aan de serverzijde hebben. Heel erg bedankt voor het lezen!
