Share
În acest tutorial, veți învăța cum să construiți un control al serverului ASP.NET creând un control HTML5 al playerului video. Pe parcurs, vom analiza procesul fundamental de dezvoltare a controlului serverului de la zero.
ASP.NET vine cu un set propriu de comenzi de la server, deci de ce creăm propriile noastre?
Prin crearea propriilor noastre controale, putem construi componente vizuale puternice, reutilizabile pentru interfața utilizator a aplicației noastre Web.
Acest tutorial vă va prezenta procesul de dezvoltare a controlului serverului ASP.NET. Veți vedea, de asemenea, modul în care crearea propriilor controale vă poate îmbunătăți simultan calitatea aplicațiilor dvs. Web, vă va face mai productivi și veți îmbunătăți interfața utilizatorilor.
Controalele personalizate ASP.NET sunt mai flexibile decât comenzile utilizatorului. Putem crea un control personalizat care moștenește de la un alt server de control și apoi extinde acest control. De asemenea, putem împărtăși un control particularizat între proiecte. În mod obișnuit, vom crea controlul personalizat într-o bibliotecă de control personalizat web care este compilată separat de aplicația noastră web. Ca rezultat, putem adăuga acea bibliotecă la orice proiect pentru a folosi controlul particularizat în proiectul respectiv.
Până în prezent, nu a existat niciodată un mod nativ de afișare a videoclipurilor pe o pagină web. Astăzi, majoritatea videoclipurilor sunt afișate, prin utilizarea unui plugin (cum ar fi Flash sau Silverlight). Cu toate acestea, nu toate browserele au aceleași pluginuri. HTML5 specifică o metodă standard, nativă de a include video, cu video element.
În prezent, există două formate video acceptate pe scară largă pentru elementul video: Ogg fișiere [codate cu Theora și Vorbis pentru video și audio respectiv] și MPEG 4 fișiere [codate cu H.264 și AAC].
Pentru a afișa un videoclip în HTML5, tot ce avem nevoie este:
controale atributul este pentru adăugare Joaca, pauză și volum controale. Fără acest atribut, videoclipul dvs. pare să fie doar o imagine. De asemenea, este întotdeauna o idee bună să includeți atât lăţime și înălţime atribute. Următorul tabel prezintă toate atributele element:
Tot ce este necesar pentru a începe este o copie a Visual Studio de Visual Web Developer Express. Dacă nu aveți versiunea completă a Visual Studio, puteți lua gratuit Express Edition.
Playerul HTML5 pe care îl vom crea aici este doar un player video simplu care va face orice interfață nativă pe care o oferă browserul. Browserele care acceptă video HTML5 au playere video încorporate, inclusiv un set de comenzi (redare / pauză etc.), astfel încât veți vedea o interfață diferită pentru fiecare browser atunci când executați acest control.
Playerul video HTML5 în Firefox 3.6.8. În primul rând, trebuie să creăm un nou proiect de bibliotecă de clasă pentru a organiza controalele personalizate. Prin crearea unui control personalizat într-o bibliotecă separată de clasă, putem compila proiectul într-un DLL separat și să folosim controlul personalizat în orice aplicație care o cere.
Deschideți proiectul ASP.NET cu Visual Studio sau Visual Web Developer. În Solution Explorer, faceți clic dreapta pe numele soluției și selectați Adăugați un proiect nou din meniul contextual. În caseta de dialog Adăugați un proiect nou, alegeți tipul de proiect să fie a Web proiect și selectați ASP.NET Server Control ca șablon, cum ar fi:
Denumiți proiectul CustomControls. Clic O.K. Este creat noul proiect ASP.NET Server Control, iar Visual Studio vă oferă de asemenea un control Web simplu pentru a începe. Ștergeți acest control personalizat deoarece nu avem nevoie de el.
În Solution Explorer, faceți clic dreapta pe CustomControls proiect și selectați Adăugați un element nou din meniul contextual. În Adăugați un element nou caseta de dialog, alegeți tipul de categorie pentru a fi a Web și selectați ASP.NET Server Control în șabloane.
Denumiți noul control personalizat Video player. Clic Adăuga. Noul control personalizat (VideoPlayer.cs) este creat și adăugat la proiectul CustomControls.
Accentsconagua
utilizând Sistemul; folosind System.Collections.Generic; utilizând System.ComponentModel; folosind System.Linq; folosind System.Text; utilizând System.Web; utilizând System.Web.UI; utilizând System.Web.UI.WebControls; spațiul de nume CustomControls [DefaultProperty ("Text")] [ToolboxData ("<0:VideoPlayer runat=server>") [] [Std] [Bindable (true)] [Categoria (" Aspect ")] [DefaultValue "Text"]; return ((s == null)? "[" + This.ID + "]": s); set ViewState ["Text"] = value; ) output.Write (Text); Codul de mai sus este codul implicit generat de Visual Studio pentru o bibliotecă de control web. Pentru a începe să lucrați cu VideoPlayer.cs, trebuie să modificăm codul de mai sus. Primul lucru pe care ar trebui să-l facem este să ștergem totul între linia de declarație a clasei și sfârșitul clasei. Aceasta ne lasă cu acest cod:
utilizând Sistemul; folosind System.Collections.Generic; utilizând System.ComponentModel; folosind System.Linq; folosind System.Text; utilizând System.Web; utilizând System.Web.UI; utilizând System.Web.UI.WebControls; spațiul de nume CustomControls [DefaultProperty ("Text")] [ToolboxData ("<0:VideoPlayer runat=server>")] VideoPlayer de clasă publică: WebControl După cum vedeți mai sus, Video player clasa derivă din System.Web.UI.WebControl clasă. De fapt, toate controalele ASP.NET de pe server derivă din WebControl clasă.
Linia de declarație de clasă din codul implicit specifică și proprietatea implicită pentru Video player de control ca Text proprietate. Video player controlul pe care îl creăm aici nu are o proprietate numită Text. Deci, ștergeți referința la Text ca proprietate implicită. După toate modificările, VideoPlayer.cs fișierul de cod ar trebui să arate astfel:
utilizând Sistemul; folosind System.Collections.Generic; utilizând System.ComponentModel; folosind System.Linq; folosind System.Text; utilizând System.Web; utilizând System.Web.UI; utilizând System.Web.UI.WebControls; namespace CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] VideoPlayer de clasă publică: WebControl În acest pas, vom adăuga câteva proprietăți controlului VideoPlayer pentru a gestiona comportamentul controlului. Următoarea este lista de proprietăți pe care le vom adăuga la VideoPlayer.cs cod fișier:
VideoUrl: O proprietate șir care specifică adresa URL a videoclipului pe care doriți să îl redați.PosterUrl: O proprietate șir care specifică adresa unui fișier imagine care să fie afișat în timp ce nu sunt disponibile date video.Redare automata: O proprietate booleană pentru a specifica dacă videoclipul ar trebui să înceapă automat să fie redat sau nu, când pagina web este deschisă.DisplayControlButtons: O proprietate booleană care specifică dacă butoanele de navigare ale playerului sunt afișate sau nu.Buclă: O proprietate booleană care specifică dacă videoclipul va începe din nou sau nu, de fiecare dată când este terminat.Adăugați următorul cod în clasa VideoPlayer:
string personal _Mp4Url; șirul public Mp4Url get return _Mp4Url; set _Mp4Url = value; stringul privat _OggUrl = null; șirul public OggUrl get return _OggUrl; set _OggUrl = valoare; șirul privat _Poster = null; șir public PosterUrl get return _Poster; set _Poster = valoare; bool privat _AutoPlay = false; boot public AutoPlay get return _AutoPlay; set _AutoPlay = valoare; bool privat _Controls = true; boot public DisplayControlButtons get return _Controls; set _Controls = valoare; bool privat _Loop = false; bool public bool get return _Loop; set _Loop = valoare;
După ce am adăugat proprietățile de mai sus, ar trebui să arate clasa VideoPlayer
utilizând Sistemul; folosind System.Collections.Generic; utilizând System.ComponentModel; folosind System.Linq; folosind System.Text; utilizând System.Web; utilizând System.Web.UI; utilizând System.Web.UI.WebControls; namespace CustomControls [ToolboxData ("<0:VideoPlayer runat=server>") ) public clasa VideoPlayer: WebControl șirul privat _Mp4Url; șir public Mp4Url get return _Mp4Url; set _Mp4Url = value; string public OggUrl = value; string privat _Poster = null; șir public PosterUrl get return _Poster; set _Poster = value; bool privat _AutoPlay = false; public bool AutoPlay get return _AutoPlay; ; private bool _Controls = true; public bool DisplayControlButtons get return _Controls; set _Controls = value; bool privat boot _Loop = Funcția primară a unui control al serverului este de a face un tip de limbaj de markup în fluxul de ieșire HTTP, care este returnat și afișat de client. Este responsabilitatea noastră ca dezvoltator de control să îi spunem controlul serverului ce marcaj trebuie făcut. Suprasolicitat RenderContents metoda este locația primară în care îi spunem controlului ce vrem să oferim clientului.
Adăugați următoarea suprascriere RenderContents metoda pentru a Video player clasă:
suprascriere protejată RavenContents (ieșire HtmlTextWriter)
Observați că RenderContents metoda are un parametru de metodă numit producție. Acest parametru este un HtmlTextWriter obiect, ceea ce este folosit de control pentru a face HTML clientului. HtmlTextwriter clasa are o serie de metode pe care le puteți utiliza pentru a vă afișa HTML-ul, inclusiv AddAttribute și RenderBeginTag.
Înainte de a scrie codul pentru a reda element, primul lucru de făcut este să adăugați câteva atribute pentru el. Putem folosi AddAttribute metodă a HtmlTextWriter obiecte pentru a adăuga atribute pentru etichetele HTML.
Adăugați următorul cod în RenderContents metodă:
output.AddAttribute (HtmlTextWriterAttribute.Id, this.ID); output.AddAttribute (HtmlTextWriterAttribute.Width, acest.Width.ToString ()); output.AddAttribute (HtmlTextWriterAttribute.Height, acest.Height.ToString ()); dacă (DisplayControlButtons == true) output.AddAttribute ("controale", "controale"); dacă (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); dacă (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); dacă (Loop == true) output.AddAttribute ("loop", "loop"); Puteți vedea acest lucru, folosind AddAttribute , am adăugat șapte atribute etichetei. De asemenea, observați că folosim o enumerare, HtmlTextWriterAttribute, pentru a selecta atributul pe care dorim să-l adăugăm la etichetă.
După ce am adăugat codul de mai sus, RenderContents metoda ar trebui să arate așa:
protejarea suprascriirii void RenderContents (ieșire HtmlTextWriter) output.AddAttribute (HtmlTextWriterAttribute.Id, this.ID); output.AddAttribute (HtmlTextWriterAttribute.Width, acest.Width.ToString ()); output.AddAttribute (HtmlTextWriterAttribute.Height, acest.Height.ToString ()); dacă (DisplayControlButtons == true) output.AddAttribute ("controale", "controale"); dacă (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); dacă (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); dacă (Loop == true) output.AddAttribute ("loop", "loop"); După adăugarea unor atribute de tag pentru elementul video, este timpul să redați eticheta cu atributele sale pe documentul HTML. Adăugați următorul cod în RenderContents metodă:
output.RenderBeginTag ( "video"); dacă (OggUrl! = null) output.AddAttribute ("src", OggUrl); output.AddAttribute ("tip", "video / ogg"); output.RenderBeginTag ( "sursă"); output.RenderEndTag (); dacă (Mp4Url! = null) output.AddAttribute ("src", Mp4Url); output.AddAttribute ("tip", "video / mp4"); output.RenderBeginTag ( "sursă"); output.RenderEndTag (); output.RenderEndTag (); Noi folosim RenderBeginTag Metodă de producție obiect pentru a face eticheta de deschidere a elementului video și RenderEndTag pentru a face eticheta de închidere. Am adăugat și element. Elementul video permite mai multe elemente sursă. Sursă elementele pot conecta la diferite fișiere video. Browserul va utiliza primul format recunoscut.
RenderContents metoda ar trebui să arate astfel după ce am adăugat codul de mai sus:
protejarea suprascriirii void RenderContents (ieșire HtmlTextWriter) output.AddAttribute (HtmlTextWriterAttribute.Id, this.ID); output.AddAttribute (HtmlTextWriterAttribute.Width, acest.Width.ToString ()); output.AddAttribute (HtmlTextWriterAttribute.Height, acest.Height.ToString ()); dacă (DisplayControlButtons == true) output.AddAttribute ("controale", "controale"); dacă (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); dacă (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); dacă (Loop == true) output.AddAttribute ("loop", "loop"); output.RenderBeginTag ("video"); dacă (OggUrl! = null) output.AddAttribute ("src", OggUrl); output.AddAttribute ("tip", "video / ogg"); output.RenderBeginTag ( "sursă"); output.RenderEndTag (); dacă (Mp4Url! = null) output.AddAttribute ("src", Mp4Url); output.AddAttribute ("tip", "video / mp4"); output.RenderBeginTag ( "sursă"); output.RenderEndTag (); output.RenderEndTag (); Observați ordinea în care plasăm AddAttributes este importantă. Am plasat AddAttributes metode în mod direct înainte de RenderBeginTag în cod. AddAttributes metoda asociază atributele cu următoarea etichetă HTML care este redată de către RenderBeginTag metoda, în acest caz video etichetă.
În mod implicit, ASP.NET va înconjura eticheta de control cu a element în momentul redării marcajului HTML al controlului. Dacă am furnizat un ID-ul valoare pentru controlul nostru, atunci deschidere tag-ul va, de asemenea, în mod prestabilit, render un ID-ul atribut. Având etichetele poate fi uneori problematică, deci dacă vrem să prevenim acest lucru în ASP.NET, putem pur și simplu să ignorăm Face și apelați RenderContents metoda directă. Iată cum puteți face acest lucru:
protejat suprascriere void Render (writer HtmlTextWriter) this.RenderContents (writer);
După ce am adăugat codul de mai sus, clasa VideoPlayer ar trebui să arate astfel:
utilizând Sistemul; folosind System.Collections.Generic; utilizând System.ComponentModel; folosind System.Linq; folosind System.Text; utilizând System.Web; utilizând System.Web.UI; utilizând System.Web.UI.WebControls; namespace CustomControls [ToolboxData ("<0:VideoPlayer runat=server>") ) public clasa VideoPlayer: WebControl șirul privat _Mp4Url; șir public Mp4Url get return _Mp4Url; set _Mp4Url = value; string public OggUrl = value; string privat _Poster = null; șir public PosterUrl get return _Poster; set _Poster = value; bool privat _AutoPlay = false; public bool AutoPlay get return _AutoPlay; ; private bool _Controls = true; public bool DisplayControlButtons get return _Controls; set _Controls = value; bool privat boot _Loop = suprascriere protejată void RenderContents (ieșire HtmlTextWriter) output.AddAttribute (HtmlTextWriterAttribute.Id, this.ID); output.AddAttribute (HtmlTextWriterAttribute.Width, this.Width.ToString ()); output.AddAttribute (HtmlTextWriterAttribute.Height, this. Height.ToString ()); dacă (DisplayControlButtons == true) output.A ddAttribute ("controale", "controale"); dacă (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); dacă (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); dacă (Loop == true) output.AddAttribute ("loop", "loop"); output.RenderBeginTag ("video"); dacă (OggUrl! = null) output.AddAttribute ("src", OggUrl); output.AddAttribute ("tip", "video / ogg"); output.RenderBeginTag ( "sursă"); output.RenderEndTag (); dacă (Mp4Url! = null) output.AddAttribute ("src", Mp4Url); output.AddAttribute ("tip", "video / mp4"); output.RenderBeginTag ( "sursă"); output.RenderEndTag (); output.RenderEndTag (); suprascriere protejată void Render (scriitor HtmlTextWriter) this.RenderContents (writer); Controlul nostru este acum terminat! Tot ce trebuie să facem este să construim proiectul înainte să îl folosim pe o pagină web ASP.NET.
E timpul să construim proiectul. Selectați Construi, apoi faceți clic pe Construiți soluția din meniul principal.
După construirea proiectului, următorul pas este să adăugați controlul VideoPlayer în Cutie de instrumente Explorer.
Cutie de instrumente Explorer Selectați Elemente din meniul contextualNaviga butonul din caseta de dialog Alegeți uneltele de instrumente CustomControls directorBin \ Debug (Visual Studio construiește în mod implicit versiuni de depanare). CustomControls.DLL asamblare și faceți clic pe Deschis buton
Video player va apărea în caseta de dialog Select Toolbox (Elemente de instrumente), după cum se arată în imaginea de mai sus. Caseta de selectare va arăta că este selectată. Imediat ce faceți clic pe O.K în caseta de dialog Alegeți cutia de instrumente, noul control VideoPlayer va apărea în caseta de instrumente.
Pentru a vedea cum funcționează controlul, trebuie să-i oferim o locuință. Adăugați o pagină nouă pe site. Faceți clic dreapta pe proiectul ASP.NET din Solution Explorer. Selectați Adăugați un element nou, și adăugați a Formularul Web. Denumiți formularul Web VideoPlayerTest.aspx.
Pentru a plasa comanda pe pagină, comutați la Proiecta Mod. Trageți Video player controlați din caseta de instrumente și lăsați-l pe VideoPlayerTest.aspx design vedere.
Următoarea afișare arată cum se declară controlul pe pagină:
Următorul rând de cod este ceea ce Visual Studio a adăugat la ASPX fișier pentru a se potrivi cu controlul. Puteți să îl vedeți selectând Sursă din partea de jos a ferestrei de cod din Visual Studio. Inregistreaza-te directiva indică runtime-ul ASP.NET unde să găsească controlul personalizat (care ansamblu) și îl cartografiază într-un prefix de etichetă.
<%@ Register assembly="CustomControls" namespace="CustomControls" tagprefix="cc1" %>
Acum putem testa controlul.
Comanda videoPlayer rulează pe Google Chrome. În acest tutorial, ați învățat cum să creați propriul control al serverului ASP.NET de la zero. Acum cunoașteți fiecare etapă a procesului - de la cum să creați un proiect de bibliotecă de comandă personalizată pe web, cum să adăugați proprietăți unui control personalizat, cum să redați marcajul HTML al controlului către client și, în sfârșit, cum să utilizați Controlul personalizat ASP.NET într-o formă web.
Sperăm că acum aveți abilitățile de a crea controale personalizate care să aibă toate funcționalitățile controalelor standard ASP.NET de pe server. Vă mulțumesc foarte mult pentru lectură!
