Share
I denne opplæringen lærer du hvordan du bygger en ASP.NET server kontroll ved å opprette en HTML5 videospiller kontroll. Underveis vurderer vi den grunnleggende prosessen med serverkontrollutvikling fra bunnen av.
ASP.NET kommer med sitt eget sett med server-side kontroller, så hvorfor lage vår egen?
Ved å skape egne kontroller, kan vi da bygge kraftige, gjenbrukbare visuelle komponenter for vårt webprograms brukergrensesnitt.
Denne opplæringen vil introdusere deg til prosessen med ASP.NET serverkontrollutvikling. Du vil også se hvordan å lage dine egne kontroller samtidig kan forbedre kvaliteten på webapplikasjonene dine, gjøre deg mer produktiv og forbedre brukergrensesnittene dine.
ASP.NET tilpassede kontroller er mer fleksible enn brukerkontroller. Vi kan opprette en egendefinert kontroll som arver fra en annen server-side kontroll og deretter utvide den kontrollen. Vi kan også dele en tilpasset kontroll blant prosjekter. Vanligvis vil vi opprette vår egendefinerte kontroll i et web tilpasset kontrollbibliotek som er opprettet separat fra vårt webprogram. Som et resultat kan vi legge til biblioteket til et hvilket som helst prosjekt for å kunne bruke vår egendefinerte kontroll i det prosjektet.
Hittil har det aldri vært en innfødt måte å vise video på en nettside på. I dag vises de fleste videoene, ved hjelp av et plugin (som Flash eller Silverlight). Men ikke alle nettlesere har samme plugin. HTML5 angir en standard, innfødt måte å inkludere video med video element.
Foreløpig er det to videofiler som er støttet av videoen: ogg filer [kodet med Theora og Vorbis for henholdsvis video og lyd] og MPEG 4 filer [kodet med H.264 og AAC].
For å vise en video i HTML5, er dette alt vi trenger:
De kontroller Attributtet er for å legge til spille, pause og volum kontroller. Uten dette attributtet ser videoen ut til å være bare et bilde. Det er også alltid en god idé å inkludere begge bredde og høyde egenskaper. Følgende tabell viser alle attributter av element:
Alt som kreves for å komme i gang er en kopi av Visual Studio av Visual Web Developer Express. Hvis du ikke har fullversjonen av Visual Studio, kan du hente den gratis Express Edition.
HTML5 videospilleren som vi vil lage her er bare en enkel videospiller som vil gjengi hvilket som helst innfødt grensesnitt nettleseren gir. Nettlesere som støtter HTML5-video, har videospillere innebygd, inkludert et sett med kontroller (spill / pause etc.), så du vil se et annet grensesnitt for hver nettleser når du kjører denne kontrollen.
HTML5 videospilleren i Firefox 3.6.8. Først må vi opprette et nytt klassebiblioteksprosjekt for å holde våre tilpassede kontroller. Ved å opprette egendefinert kontroll i et eget klassebibliotek, kan vi kompilere prosjektet i en egen DLL og bruke den egendefinerte kontrollen i ethvert program som krever det.
Åpne ditt ASP.NET-prosjekt med Visual Studio eller Visual Web Developer. I Solution Explorer høyreklikker du på løsningsnavnet, og velger Legg til nytt prosjekt fra kontekstmenyen. I dialogboksen Legg til nytt prosjekt velger du prosjekttype for å være en web prosjekt, og velg ASP.NET Server Control som malen, slik som:
Gi navnet navnet på prosjektet CustomControls. Klikk OK. Det nye ASP.NET Server Control-prosjektet er opprettet, og Visual Studio gir deg også en enkel webkontroll til å begynne med. Slett denne egendefinerte kontrollen fordi vi ikke trenger det.
I Solution Explorer, høyreklikk på CustomControls prosjekt, og velg Legg til nytt element fra kontekstmenyen. I Legg til nytt element dialogboksen, velg kategori type for å være en web kategori, og velg ASP.NET Server Control i malene.
Gi den nye tilpassede kontrollen navnet Videospiller. Klikk Legg til. Den nye egendefinerte kontrollen (VideoPlayer.cs) er opprettet og lagt til i CustomControls-prosjektet.
Accentsconagua
bruker system; bruker System.Collections.Generic; bruker System.ComponentModel; bruker System.Linq; bruker System.Text; bruker System.Web; bruker System.Web.UI; bruker System.Web.UI.WebControls; namespace CustomControls [DefaultProperty ("Text")] [ToolboxData ("<0:VideoPlayer runat=server>"[PublicValue (" ")]] [Lokaliserbar (sann)] offentlig streng Tekst få String s = (String) ViewState [ "Text"], returnere ((s == null)? "[" + This.ID + "]": s); sett ViewState ["Text"] = verdi; beskyttet overstyring ugyldig RenderContents (HtmlTextWriter-utgang ) output.Write (Text); Koden ovenfor er standardkoden generert av Visual Studio for et webkontrollbibliotek. For å begynne å jobbe med VideoPlayer.cs, Vi må endre koden ovenfor. Det første vi bør gjøre er å slette alt mellom klassedeklarasjonslinjen og slutten av klassen. Det forlater oss med denne koden:
bruker system; bruker System.Collections.Generic; bruker System.ComponentModel; bruker System.Linq; bruker System.Text; bruker System.Web; bruker System.Web.UI; bruker System.Web.UI.WebControls; namespace CustomControls [DefaultProperty ("Text")] [ToolboxData ("<0:VideoPlayer runat=server>")] offentlig klasse VideoPlayer: WebControl Som du ser over, er det Videospiller klassen stammer fra System.Web.UI.WebControl klasse. Faktisk kommer alle ASP.NET server-side kontroller ut fra WebControl klasse.
Klassedeklarasjonslinjen i standardkoden spesifiserer også standardegenskapen for Videospiller kontroll som Tekst eiendom. De Videospiller kontroll som vi lager her, har ikke en eiendom som kalles Tekst. Så, slett referansen til Tekst som standardegenskapen. Etter alle endringene, VideoPlayer.cs kodefilen skal se slik ut:
bruker system; bruker System.Collections.Generic; bruker System.ComponentModel; bruker System.Linq; bruker System.Text; bruker System.Web; bruker System.Web.UI; bruker System.Web.UI.WebControls; namespace CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] offentlig klasse VideoPlayer: WebControl I dette trinnet vil vi legge til noen egenskaper til VideoPlayer-kontrollen for å håndtere kontrollens oppførsel. Følgende er listen over egenskaper som vi vil legge til i VideoPlayer.cs kodefil:
VideoUrl: En strengegenskap som spesifiserer nettadressen til videoen som skal spilles av.PosterUrl: En strengegenskap som spesifiserer adressen til en bildefil som skal vises mens ingen videodata er tilgjengelig.Auto spill: En boolsk eiendom for å angi om videoen skal starte automatisk eller ikke, når nettsiden er åpnet.DisplayControlButtons: En boolsk eiendom som angir om spillerknappnavigeringsknappene vises eller ikke.Loop: En boolsk eiendom som spesifiserer om videoen vil starte om igjen eller ikke, hver gang den er ferdig.Legg til følgende kode i klassen VideoPlayer:
privat streng _Mp4Url; offentlig streng Mp4Url get return _Mp4Url; sett _Mp4Url = verdi; privat streng _OggUrl = null; offentlig streng OggUrl get return _OggUrl; sett _OggUrl = verdi; privat streng _Poster = null; offentlig streng PosterUrl get return _Poster; sett _Poster = verdi; privat bool _AutoPlay = false; offentlig bool AutoPlay get return _AutoPlay; sett _AutoPlay = verdi; privat bool _Controls = true; offentlig bool DisplayControlButtons get return _Controls; sett _Controls = verdi; privat bool _Loop = false; offentlig bool Loop get return _Loop; sett _Loop = verdi;
Etter at vi har lagt til de ovennevnte egenskapene, bør VideoPlayer-klassen se ut
bruker system; bruker System.Collections.Generic; bruker System.ComponentModel; bruker System.Linq; bruker System.Text; bruker System.Web; bruker System.Web.UI; bruker System.Web.UI.WebControls; namespace CustomControls [ToolboxData ("<0:VideoPlayer runat=server>") offentlig klasse VideoPlayer: WebControl privat streng _Mp4Url; offentlig streng Mp4Url get return _Mp4Url; sett _Mp4Url = verdi; privat streng _OggUrl = null; offentlig streng OggUrl get return _OggUrl; sett _OggUrl = verdi; privat streng _Poster = null; offentlig streng PosterUrl get return _Poster; sett _Poster = verdi; privatbool _AutoPlay = false; offentlig bool AutoPlay get return _AutoPlay; sett _AutoPlay = verdi ; private bool _Controls = true; offentlige bool DisplayControlButtons get return _Controls; sett _Controls = verdi; private bool _Loop = false; offentlig bool Loop get return _Loop; sett _Loop = verdi; Den primære jobben med en serverkontroll er å gjengi noen type opptakspråk til HTTP-utgangsstrømmen, som returneres til og vises av klienten. Det er vårt ansvar som kontrollutvikleren å fortelle serverkontrollen hvilken merking som skal gjengis. Den overstyrte RenderContents Metoden er den primære plasseringen der vi forteller kontrollen hva vi vil gjengi til klienten.
Legg til følgende overstyring RenderContents metode til Videospiller klasse:
beskyttet overstyring ugyldig RenderContents (HtmlTextWriter-utgang)
Legg merke til at RenderContents Metoden har en metodeparameter kalt produksjon. Denne parameteren er en HtmlTextWriter objekt, som er hva kontrollen bruker til å gjengi HTML til klienten. De HtmlTextwriter klassen har en rekke metoder du kan bruke til å gjengi HTML, inkludert AddAttribute og RenderBeginTag.
Før vi skriver koden for å gjengi element, det første du må gjøre er å legge til noen attributter for det. Vi kan bruke AddAttribute metode av HtmlTextWriter motsette seg å legge til attributter for HTML-koder.
Legg til følgende kode i RenderContents metode:
output.AddAttribute (HtmlTextWriterAttribute.Id, this.ID); output.AddAttribute (HtmlTextWriterAttribute.Width, this.Width.ToString ()); output.AddAttribute (HtmlTextWriterAttribute.Hight, this.Height.ToString ()); hvis (DisplayControlButtons == true) output.AddAttribute ("kontroller", "kontroller"); hvis (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); hvis (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); hvis (Loop == true) output.AddAttribute ("loop", "loop"); Du kan se det ved å bruke AddAttribute metode, vi har lagt til sju attributter til taggen. Legg merke til at vi bruker en oppsummering, HtmlTextWriterAttribute, for å velge attributtet vi vil legge til i taggen.
Etter at vi har lagt til koden ovenfor, vil RenderContents metoden skal se slik ut:
beskyttet overstyre ugyldig RenderContents (HtmlTextWriter-utgang) output.AddAttribute (HtmlTextWriterAttribute.Id, this.ID); output.AddAttribute (HtmlTextWriterAttribute.Width, this.Width.ToString ()); output.AddAttribute (HtmlTextWriterAttribute.Hight, this.Height.ToString ()); hvis (DisplayControlButtons == true) output.AddAttribute ("kontroller", "kontroller"); hvis (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); hvis (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); hvis (Loop == true) output.AddAttribute ("loop", "loop"); Etter at du har lagt til noen tagattributter for videoelementet, er det på tide å gjengi tag med attributter på HTML-dokumentet. Legg til følgende kode i RenderContents metode:
output.RenderBeginTag ( "video"); hvis (OggUrl! = null) output.AddAttribute ("src", OggUrl); output.AddAttribute ("type", "video / ogg"); output.RenderBeginTag ( "source"); output.RenderEndTag (); hvis (Mp4Url! = null) output.AddAttribute ("src", Mp4Url); output.AddAttribute ("type", "video / mp4"); output.RenderBeginTag ( "source"); output.RenderEndTag (); output.RenderEndTag (); Vi bruker RenderBeginTag Metode av produksjon motsette seg å gjengi åpningsmerket til videoelementet, og RenderEndTag å gjengi sin avsluttende kode. Vi har også lagt til element. Videoelementet tillater flere kildeelementer. Kilde elementer kan koble til forskjellige videofiler. Nettleseren vil bruke det første anerkjente formatet.
De RenderContents Metoden skal se slik ut etter at vi har lagt til koden ovenfor:
beskyttet overstyre ugyldig RenderContents (HtmlTextWriter-utgang) output.AddAttribute (HtmlTextWriterAttribute.Id, this.ID); output.AddAttribute (HtmlTextWriterAttribute.Width, this.Width.ToString ()); output.AddAttribute (HtmlTextWriterAttribute.Hight, this.Height.ToString ()); hvis (DisplayControlButtons == true) output.AddAttribute ("kontroller", "kontroller"); hvis (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); hvis (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); hvis (Loop == true) output.AddAttribute ("loop", "loop"); output.RenderBeginTag ("video"); hvis (OggUrl! = null) output.AddAttribute ("src", OggUrl); output.AddAttribute ("type", "video / ogg"); output.RenderBeginTag ( "source"); output.RenderEndTag (); hvis (Mp4Url! = null) output.AddAttribute ("src", Mp4Url); output.AddAttribute ("type", "video / mp4"); output.RenderBeginTag ( "source"); output.RenderEndTag (); output.RenderEndTag (); Legg merke til at bestillingen der vi plasserer AddAttributes metoder er viktige. Vi plasserer AddAttributes metoder rett før RenderBeginTag metode i koden. De AddAttributes Metoden forbinder attributter med den neste HTML-taggen som gjengis av RenderBeginTag metode, i dette tilfellet video stikkord.
Som standard vil ASP.NET omgir kontrolletiketten med a element når du gjengir kontrollens HTML-oppslag. Hvis vi har gitt en ID verdi for vår kontroll, da span tag vil også som standard gjengi en ID Egenskap. Å ha taggene kan noen ganger være problematisk, så hvis vi ønsker å forhindre dette i ASP.NET, kan vi bare overstyre Render metode og ring til RenderContents metode direkte. Slik gjør du det:
beskyttet overstyring ugyldig Render (HtmlTextWriter skribent) this.RenderContents (skribent);
Etter at vi har lagt til koden ovenfor, bør VideoPlayer-klassen se slik ut:
bruker system; bruker System.Collections.Generic; bruker System.ComponentModel; bruker System.Linq; bruker System.Text; bruker System.Web; bruker System.Web.UI; bruker System.Web.UI.WebControls; namespace CustomControls [ToolboxData ("<0:VideoPlayer runat=server>") offentlig klasse VideoPlayer: WebControl privat streng _Mp4Url; offentlig streng Mp4Url get return _Mp4Url; sett _Mp4Url = verdi; privat streng _OggUrl = null; offentlig streng OggUrl get return _OggUrl; sett _OggUrl = verdi; privat streng _Poster = null; offentlig streng PosterUrl get return _Poster; sett _Poster = verdi; privatbool _AutoPlay = false; offentlig bool AutoPlay get return _AutoPlay; sett _AutoPlay = verdi ; private bool _Controls = true; offentlige bool DisplayControlButtons get return _Controls; sett _Controls = verdi; private bool _Loop = false; offentlig bool Loop get return _Loop; sett _Loop = verdi; beskyttet overstyre void RenderContents (HtmlTextWriter-utgang) output.AddAttribute (HtmlTextWriterAttribute.Id, this.ID); output.AddAttribute (HtmlTextWriterAttribute.Width, this.Width.ToString ()); output.AddAttribute (HtmlTextWriterAttribute.High, dette. Height.ToString ()), hvis (DisplayControlButtons == true) output.A ddAttribute ("kontroller", "kontroller"); hvis (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); hvis (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); hvis (Loop == true) output.AddAttribute ("loop", "loop"); output.RenderBeginTag ("video"); hvis (OggUrl! = null) output.AddAttribute ("src", OggUrl); output.AddAttribute ("type", "video / ogg"); output.RenderBeginTag ( "source"); output.RenderEndTag (); hvis (Mp4Url! = null) output.AddAttribute ("src", Mp4Url); output.AddAttribute ("type", "video / mp4"); output.RenderBeginTag ( "source"); output.RenderEndTag (); output.RenderEndTag (); beskyttet overstyring ugyldig Render (HtmlTextWriter skribent) this.RenderContents (skribent); Vår kontroll er nå ferdig! Alt vi har igjen å gjøre er å bygge prosjektet før vi bruker det på en ASP.NET webside.
Det er på tide å bygge prosjektet. Å velge Bygge, og klikk deretter Bygg løsning fra hovedmenyen.
Etter å ha bygget prosjektet, er neste trinn å legge til VideoPlayer-kontrollen i Verktøykasse Explorer.
Verktøykasse Explorer Velg elementer fra kontekstmenyenSøk knappen i dialogboksen Velg verktøykasseelementer CustomControls katalogBin \ Debug katalog (Visual Studio bygger feilsøkingsversjoner som standard.) CustomControls.DLL montering og klikk på Åpen knapp
Videospiller vises i dialogboksen Velg verktøykasseelementer som vist i bildet ovenfor. Kryssruten vil vise den som valgt. Så snart du klikker på OK knappen i dialogboksen Choose Toolbox Items, vil den nye VideoPlayer-kontrollen vises i verktøykassen.
For å se hvordan kontrollen fungerer, må vi gi det et hjem. Legg til en ny side på nettstedet. Høyreklikk på ASP.NET-prosjektet fra Solution Explorer. Å velge Legg til nytt element, og legg til en Nettformular. Navn på webskjemaet VideoPlayerTest.aspx.
For å plassere kontrollen på siden, bytt til Design modus. Dra Videospiller Kontroller fra verktøykassen og slipp den på VideoPlayerTest.aspx designvisning.
Følgende liste viser hvordan kontrollen er deklarert på siden:
Følgende linje av kode er hva Visual Studio lagt til ASPX fil for å imøtekomme kontrollen. Du kan se det ved å velge Kilde kategorien nederst i kodevinduet i Visual Studio. De Registrere Direktivet forteller ASP.NET runtime hvor du finner den egendefinerte kontrollen (hvilken montering) og kartlegger den til et prefix.
<%@ Register assembly="CustomControls" namespace="CustomControls" tagprefix="cc1" %>
Vi kan nå teste kontrollen.
VideoPlayer-kontroll kjører på Google Chrome. I denne opplæringen lærte du hvordan du oppretter din egen ASP.NET tilpasset serverkontroll fra grunnen av. Du vet nå hvert trinn i prosessen - fra hvordan du oppretter et web tilpasset kontrollbiblioteksprosjekt, hvordan du legger til egenskaper til en egendefinert kontroll, hvordan du gjør HTML-oppslaget til kontrollen til klienten, og til slutt, hvordan du bruker ASP.NET tilpasset kontroll i et webskjema.
Forhåpentligvis har du nå ferdighetene til å opprette egendefinerte kontroller som har all funksjonalitet i standard ASP.NET-server-side kontroller. Takk så mye for å lese!
