Share
In questo tutorial, imparerai come creare un controllo server ASP.NET creando un controllo lettore video HTML5. Lungo la strada, esamineremo da zero il processo fondamentale dello sviluppo del controllo server.
ASP.NET è dotato di un proprio set di controlli lato server, quindi perché creare il nostro?
Creando i nostri controlli, possiamo quindi costruire componenti visivi potenti e riutilizzabili per l'interfaccia utente della nostra applicazione Web.
Questo tutorial ti introdurrà al processo di sviluppo del controllo server ASP.NET. Vedrai anche come la creazione di controlli personalizzati può contemporaneamente migliorare la qualità delle tue applicazioni Web, renderti più produttivo e migliorare le tue interfacce utente.
I controlli personalizzati ASP.NET sono più flessibili dei controlli utente. Possiamo creare un controllo personalizzato che eredita da un altro controllo lato server e quindi estendere tale controllo. Possiamo anche condividere un controllo personalizzato tra i progetti. In genere, creeremo il nostro controllo personalizzato in una libreria di controllo web personalizzata che viene compilata separatamente dalla nostra applicazione web. Di conseguenza, possiamo aggiungere quella libreria a qualsiasi progetto per utilizzare il nostro controllo personalizzato in quel progetto.
Fino ad ora, non c'è mai stato un modo nativo per visualizzare i video su una pagina web. Oggi, la maggior parte dei video viene mostrata, tramite l'uso di un plugin (come Flash o Silverlight). Tuttavia, non tutti i browser hanno gli stessi plugin. HTML5 specifica un modo standard e nativo per includere il video con video elemento.
Attualmente, ci sono due formati video ampiamente supportati per l'elemento video: Ogg file [codificati con Theora e Vorbis rispettivamente per video e audio] e MPEG 4 file [codificati con H.264 e AAC].
Per mostrare un video in HTML5, questo è tutto ciò di cui abbiamo bisogno:
Il controlli l'attributo è per l'aggiunta giocare, pausa e volume controlli. Senza questo attributo, il tuo video sembrerebbe essere solo un'immagine. È anche sempre una buona idea includere entrambi larghezza e altezza attributi. La seguente tabella mostra tutti gli attributi di elemento:
Tutto ciò che è necessario per iniziare è una copia di Visual Studio di Visual Web Developer Express. Se non si dispone della versione completa di Visual Studio, è possibile utilizzare l'Express Edition gratuita.
Il video player HTML5 che creeremo qui è solo un semplice lettore video che renderà qualsiasi interfaccia nativa fornita dal browser. I browser che supportano i video HTML5 incorporano i lettori video, incluso un set di controlli (riproduzione / pausa ecc.), In modo che vedrai un'interfaccia diversa per ciascun browser quando esegui questo controllo.
Il player video HTML5 in Firefox 3.6.8. Per prima cosa, dobbiamo creare un nuovo progetto di libreria di classi per contenere i nostri controlli personalizzati. Creando il controllo personalizzato in una libreria di classi separata, possiamo compilare il progetto in una DLL separata e utilizzare il controllo personalizzato in qualsiasi applicazione che lo richiede.
Apri il tuo progetto ASP.NET con Visual Studio o Visual Web Developer. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome della soluzione e selezionare Aggiungi nuovo progetto dal menu di scelta rapida. Nella finestra di dialogo Aggiungi nuovo progetto, selezionare il tipo di progetto da a web progetto e selezionare Controllo server ASP.NET come il modello, in questo modo:
Assegna un nome al progetto CustomControls. Clic ok. Viene creato il nuovo progetto Controllo server ASP.NET e Visual Studio fornisce anche un semplice controllo Web per iniziare. Elimina questo controllo personalizzato perché non ne abbiamo bisogno.
In Esplora soluzioni, fare clic con il tasto destro del mouse su CustomControls progetto e selezionare Aggiungi un nuovo elemento dal menu di scelta rapida. Nel Aggiungi un nuovo elemento finestra di dialogo, scegliere il tipo di categoria da a web categoria e selezionare Controllo server ASP.NET nei modelli.
Assegna un nome al nuovo controllo personalizzato Lettore video. Clic Inserisci. Il nuovo controllo personalizzato (VideoPlayer.cs) viene creato e aggiunto al progetto CustomControls.
Accentsconagua
usando il sistema; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; usando System.Web; usando System.Web.UI; utilizzando System.Web.UI.WebControls; namespace CustomControls [DefaultProperty ("Text")] [ToolboxData ("<0:VideoPlayer runat=server>")] public class VideoPlayer: WebControl [Bindable (true)] [Categoria (" Appearance ")] [DefaultValue (" ")] [Localizable (true)] public string Testo get String s = (String) ViewState [ "Testo"]; return ((s == null)? "[" + This.ID + "]": s); set ViewState ["Text"] = valore; override protetto RenderContents (output HtmlTextWriter ) output.Write (testo); Il codice sopra è il codice predefinito generato da Visual Studio per una libreria di controllo web. Per iniziare a lavorare con VideoPlayer.cs, dobbiamo modificare il codice qui sopra. La prima cosa che dovremmo fare è cancellare tutto tra la riga di dichiarazione della classe e la fine della classe. Questo ci lascia con questo codice:
usando il sistema; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; usando System.Web; usando System.Web.UI; utilizzando System.Web.UI.WebControls; namespace CustomControls [DefaultProperty ("Text")] [ToolboxData ("<0:VideoPlayer runat=server>")] publicPlayer VideoPlayer: WebControl Come vedi sopra, il Lettore video la classe deriva dal System.Web.UI.WebControl classe. Infatti, tutti i controlli lato server ASP.NET derivano da WebControl classe.
La riga di dichiarazione di classe nel codice predefinito specifica anche la proprietà predefinita per Lettore video controllo come il Testo proprietà. Il Lettore video il controllo che creiamo qui non ha una proprietà chiamata Testo. Quindi, elimina il riferimento a Testo come la proprietà predefinita. Dopo tutte le modifiche, il VideoPlayer.cs il file di codice dovrebbe assomigliare a questo:
usando il sistema; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; usando System.Web; usando System.Web.UI; utilizzando System.Web.UI.WebControls; namespace CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] publicPlayer VideoPlayer: WebControl In questo passaggio, aggiungeremo alcune proprietà al controllo di VideoPlayer per gestire il comportamento del controllo. Quello che segue è l'elenco delle proprietà che aggiungeremo al VideoPlayer.cs file di codice:
videoURL: Una proprietà stringa che specifica l'URL del video da riprodurre.PosterUrl: Una proprietà stringa che specifica l'indirizzo di un file immagine da mostrare quando non sono disponibili dati video.Riproduzione automatica: Una proprietà booleana per specificare se il video deve iniziare automaticamente a giocare o meno, quando viene aperta la pagina web.DisplayControlButtons: Una proprietà booleana che specifica se i pulsanti di navigazione del lettore sono visualizzati o meno.Ciclo continuo: Una proprietà booleana che specifica se il video verrà riavviato o meno, ogni volta che viene completato.Aggiungi il seguente codice alla classe VideoPlayer:
stringa privata _Mp4Url; public string Mp4Url get return _Mp4Url; set _Mp4Url = value; stringa privata _OggUrl = null; stringa pubblica OggUrl get return _OggUrl; set _OggUrl = value; stringa privata _Poster = null; public string PosterUrl get return _Poster; imposta _Poster = valore; private bool _AutoPlay = false; public bool AutoPlay get return _AutoPlay; set _AutoPlay = valore; bool privato _Controls = true; public bool DisplayControlButtons get return _Controls; imposta _Controls = valore; bool privato _Loop = falso; bool pubblico Loop get return _Loop; imposta _Loop = valore;
Dopo aver aggiunto le proprietà di cui sopra, dovrebbe apparire la classe VideoPlayer
usando il sistema; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; usando System.Web; usando System.Web.UI; utilizzando System.Web.UI.WebControls; namespace CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] public class VideoPlayer: WebControl stringa privata _Mp4Url; stringa pubblica Mp4Url get return _Mp4Url; set _Mp4Url = value; stringa privata _OggUrl = null; stringa pubblica OggUrl get return _OggUrl; set _OggUrl = valore; stringa privata _Poster = null; stringa pubblica PosterUrl get return _Poster; set _Poster = value; bool privato _AutoPlay = false; public bool AutoPlay get return _AutoPlay; set _AutoPlay = value ; bool privato _Controls = true; bool pubblico DisplayControlButtons get return _Controls; set _Controls = value; bool privato _Loop = false; bool pubblico Loop get return _Loop; set _Loop = value; Il compito principale di un controllo server è di rendere un certo tipo di linguaggio di markup al flusso di output HTTP, che viene restituito e visualizzato dal client. È nostra responsabilità, in qualità di sviluppatore del controllo, comunicare al server quale markup rendere. L'override RenderContents metodo è la posizione principale in cui diciamo al controllo ciò che vogliamo rendere al client.
Aggiungi la seguente sostituzione RenderContents metodo per il Lettore video classe:
protetto override void RenderContents (output HtmlTextWriter)
Si noti che il RenderContents metodo ha un parametro di metodo chiamato produzione. Questo parametro è un HtmlTextWriter oggetto, che è ciò che il controllo utilizza per rendere HTML al client. Il HtmlTextWriter class ha un numero di metodi che puoi usare per rendere il tuo HTML, incluso Aggiungi attributo e RenderBeginTag.
Prima di scrivere il codice per rendere il elemento, la prima cosa da fare è aggiungere alcuni attributi per questo. Possiamo usare il Aggiungi attributo metodo del HtmlTextWriter oggetto di aggiungere attributi per tag HTML.
Aggiungere il seguente codice nel RenderContents metodo:
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"); Puoi vederlo, usando il Aggiungi attributo metodo, abbiamo aggiunto sette attributi al tag. Notare anche che stiamo usando un'enumerazione, HtmlTextWriterAttribute, per selezionare l'attributo che vogliamo aggiungere al tag.
Dopo aver aggiunto il codice sopra, il RenderContents il metodo dovrebbe apparire così:
protetto override void RenderContents (output 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 ("controls", "controls"); if (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); if (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); if (Loop == true) output.AddAttribute ("loop", "loop"); Dopo aver aggiunto alcuni attributi di tag per l'elemento video, è ora di eseguire il rendering di tag con i suoi attributi sul documento HTML. Aggiungi il seguente codice nel RenderContents metodo:
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 (); Noi usiamo il RenderBeginTag metodo di produzione oggetto per rendere il tag di apertura dell'elemento video, e RenderEndTag per rendere il suo tag di chiusura. Abbiamo anche aggiunto il elemento. L'elemento video consente più elementi di origine. fonte gli elementi possono collegarsi a diversi file video. Il browser utilizzerà il primo formato riconosciuto.
Il RenderContents il metodo dovrebbe apparire così dopo aver aggiunto il codice sopra:
protetto override void RenderContents (output 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 ("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 (); Si noti che l'ordine in cui posizioniamo il AddAttributes i metodi sono importanti Inseriamo il AddAttributes metodi direttamente prima del RenderBeginTag metodo nel codice. Il AddAttributes metodo associa gli attributi con il prossimo tag HTML che viene reso dal RenderBeginTag metodo, in questo caso il video etichetta.
Per impostazione predefinita, ASP.NET circonda il tag di controllo con a elemento durante il rendering del markup HTML del controllo. Se abbiamo fornito un ID valore per il nostro controllo, quindi il campata il tag renderà anche, per impostazione predefinita, un ID attributo. Avere i tag a volte può essere problematico, quindi se vogliamo evitare questo in ASP.NET, possiamo semplicemente ignorare il rendere metodo e chiama il RenderContents metodo direttamente. Ecco come farlo:
protected override void Render (HtmlTextWriter writer) this.RenderContents (writer);
Dopo aver aggiunto il codice sopra, la classe VideoPlayer dovrebbe assomigliare a questa:
usando il sistema; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; usando System.Web; usando System.Web.UI; utilizzando System.Web.UI.WebControls; namespace CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] public class VideoPlayer: WebControl stringa privata _Mp4Url; stringa pubblica Mp4Url get return _Mp4Url; set _Mp4Url = value; stringa privata _OggUrl = null; stringa pubblica OggUrl get return _OggUrl; set _OggUrl = valore; stringa privata _Poster = null; stringa pubblica PosterUrl get return _Poster; set _Poster = value; bool privato _AutoPlay = false; public bool AutoPlay get return _AutoPlay; set _AutoPlay = value ; bool privato _Controls = true; bool pubblico DisplayControlButtons get return _Controls; set _Controls = value; bool privato _Loop = false; bool pubblico Loop get return _Loop; set _Loop = value; override protetto RenderContents (output 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.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 (); protected override void Render (HtmlTextWriter writer) this.RenderContents (writer); Il nostro controllo è ora finito! Tutto ciò che resta da fare è creare il progetto prima di utilizzarlo su una pagina Web ASP.NET.
È tempo di costruire il progetto. Selezionare Costruire, e quindi fare clic Build Solution dal menu principale.
Dopo aver creato il progetto, il passo successivo è aggiungere il controllo VideoPlayer nel Toolbox Explorer.
Toolbox Explorer Scegli articoli dal menu di scelta rapidaNavigare pulsante nella finestra di dialogo Scegli elementi della casella degli strumenti CustomControls elencoBin \ Debug directory (Visual Studio crea versioni di debug per impostazione predefinita). CustomControls.DLL assemblea e clicca sul Aperto pulsante
Lettore video apparirà nella finestra di dialogo Scegli elementi degli strumenti come mostrato nell'immagine sopra. La casella di controllo lo mostrerà come selezionato. Non appena fai clic sul ok nella finestra di dialogo Scegli elementi della casella degli strumenti, il nuovo controllo di VideoPlayer verrà visualizzato nella casella degli strumenti.
Per vedere come funziona il controllo, dobbiamo dargli una casa. Aggiungi una nuova pagina al sito web. Fare clic con il pulsante destro del mouse sul progetto ASP.NET da Esplora soluzioni. Selezionare Aggiungi un nuovo elemento, e aggiungere un Modulo Web. Denominare il modulo Web VideoPlayerTest.aspx.
Per posizionare il controllo sulla pagina, passare a Design modalità. Trascina il Lettore video controllo dalla casella degli strumenti e rilasciarlo sul VideoPlayerTest.aspx vista di progettazione.
Il seguente elenco mostra come viene dichiarato il controllo sulla pagina:
La seguente riga di codice è ciò che Visual Studio ha aggiunto a ASPX file per ospitare il controllo. Puoi vederlo selezionando il fonte scheda dalla parte inferiore della finestra del codice in Visual Studio. Il Registrare direttiva dice al runtime ASP.NET dove trovare il controllo personalizzato (quale assieme) e mapparlo a un prefisso di tag.
<%@ Register assembly="CustomControls" namespace="CustomControls" tagprefix="cc1" %>
Ora possiamo testare il controllo.
Controllo di VideoPlayer in esecuzione su Google Chrome. In questo tutorial, hai imparato come creare da zero il tuo controllo server personalizzato ASP.NET. Ora conosci ogni fase del processo: da come creare un progetto di libreria di controllo personalizzato Web, come aggiungere proprietà a un controllo personalizzato, come rendere il markup HTML del controllo al client e, infine, come utilizzare il Controllo personalizzato ASP.NET in un modulo Web.
Si spera che ora abbiate le competenze per creare controlli personalizzati che abbiano tutte le funzionalità dei controlli standard sul lato server di ASP.NET. Grazie mille per la lettura!
