Share
En este tutorial, aprenderá cómo crear un control de servidor ASP.NET creando un control de reproductor de video HTML5. En el camino, revisaremos el proceso fundamental del desarrollo del control del servidor desde cero..
ASP.NET viene con su propio conjunto de controles del lado del servidor, así que ¿por qué crear nuestros propios?
Al crear nuestros propios controles, podemos crear componentes visuales potentes y reutilizables para la interfaz de usuario de nuestra aplicación web.
Este tutorial le presentará el proceso de desarrollo del control del servidor ASP.NET. También verá cómo la creación de sus propios controles puede mejorar simultáneamente la calidad de sus aplicaciones web, aumentar su productividad y mejorar sus interfaces de usuario..
Los controles personalizados de ASP.NET son más flexibles que los controles de usuario. Podemos crear un control personalizado que se hereda de otro control del lado del servidor y luego extender ese control. También podemos compartir un control personalizado entre proyectos. Por lo general, crearemos nuestro control personalizado en una biblioteca de control personalizado web que se compila por separado de nuestra aplicación web. Como resultado, podemos agregar esa biblioteca a cualquier proyecto para usar nuestro control personalizado en ese proyecto.
Hasta ahora, nunca ha habido una forma nativa de mostrar videos en una página web. Hoy en día, la mayoría de los videos se muestran mediante el uso de un complemento (como Flash o Silverlight). Sin embargo, no todos los navegadores tienen los mismos complementos. HTML5 especifica una forma nativa estándar de incluir video, con el vídeo elemento.
Actualmente, hay dos formatos de video ampliamente soportados para el elemento de video: Ogg archivos [codificados con Theora y Vorbis para video y audio respectivamente] y MPEG 4 Archivos [codificados con H.264 y AAC].
Para mostrar un video en HTML5, esto es todo lo que necesitamos:
los controles atributo es para agregar jugar, pausa y volumen controles Sin este atributo, su video parecería ser solo una imagen. También es siempre una buena idea incluir tanto anchura y altura atributos La siguiente tabla muestra todos los atributos de la elemento:
Todo lo que se necesita para comenzar es una copia de Visual Studio de Visual Web Developer Express. Si no tiene la versión completa de Visual Studio, puede obtener la Edición Express gratuita..
El reproductor de video HTML5 que crearemos aquí es solo un reproductor de video simple que representará cualquier interfaz nativa que proporcione el navegador. Los navegadores que admiten video HTML5 tienen reproductores de video integrados, que incluyen un conjunto de controles (reproducir / pausar, etc.), por lo que verá una interfaz diferente para cada navegador cuando ejecute este control.
El reproductor de video HTML5 en Firefox 3.6.8. Primero, necesitamos crear un nuevo proyecto de biblioteca de clases para mantener nuestros controles personalizados. Al crear el control personalizado en una biblioteca de clases separada, podemos compilar el proyecto en una DLL separada y usar el control personalizado en cualquier aplicación que lo requiera.
Abra su proyecto ASP.NET con Visual Studio o Visual Web Developer. En el Explorador de soluciones, haga clic con el botón derecho en el nombre de la solución y seleccione Añadir nuevo proyecto desde el menú contextual. En el cuadro de diálogo Agregar nuevo proyecto, elija el tipo de proyecto para ser un Web proyecto, y seleccione Control de servidor ASP.NET como la plantilla, como tal:
Nombra el proyecto Controles personalizados. Hacer clic DE ACUERDO. Se crea el nuevo proyecto de Control de Servidor ASP.NET y, para comenzar, Visual Studio también le proporciona un control web simple. Eliminar este control personalizado porque no lo necesitamos..
En el Explorador de soluciones, haga clic derecho en el Controles personalizados proyecto, y seleccione Agregar ítem nuevo desde el menú contextual. En el Agregar ítem nuevo cuadro de diálogo, elija el tipo de categoría para ser un Web categoría, y seleccione Control de servidor ASP.NET en las plantillas.
Nombra el nuevo control personalizado Reproductor de video. Hacer clic Añadir. El nuevo control personalizado (VideoPlayer.cs) se crea y agrega al proyecto CustomControls.
Accentsconagua
utilizando el sistema; utilizando System.Collections.Generic; utilizando System.ComponentModel; utilizando System.Linq; utilizando System.Text; utilizando System.Web; utilizando System.Web.UI; utilizando System.Web.UI.WebControls; CustomControls del espacio de nombres [DefaultProperty ("Text")] [ToolboxData ("<0:VideoPlayer runat=server>")] public class VideoPlayer: WebControl [Bindable (true)] [Category (" Appearance ")] [DefaultValue (" ")] [Localizable (true)] public string Text get String s = (String) ViewState [ "Texto"]; return ((s == null)? "[" + This.ID + "]": s); set ViewState ["Text"] = value; anulación protegida void RenderContents (HtmlTextWriter output ) output.Write (Text); El código anterior es el código predeterminado generado por Visual Studio para una biblioteca de control web. Para empezar a trabajar con VideoPlayer.cs, Necesitamos modificar el código de arriba. Lo primero que debemos hacer es eliminar todo entre la línea de declaración de clase y el final de la clase. Eso nos deja con este código:
utilizando el sistema; utilizando System.Collections.Generic; utilizando System.ComponentModel; utilizando System.Linq; utilizando System.Text; utilizando System.Web; utilizando System.Web.UI; utilizando System.Web.UI.WebControls; CustomControls del espacio de nombres [DefaultProperty ("Text")] [ToolboxData ("<0:VideoPlayer runat=server>")] clase pública VideoPlayer: WebControl Como se ve arriba, el Reproductor de video clase deriva de la System.Web.UI.WebControl clase. De hecho, todos los controles del lado del servidor ASP.NET se derivan de la Control web clase.
La línea de declaración de clase en el código predeterminado también especifica la propiedad predeterminada para el Reproductor de video control como el Texto propiedad. los Reproductor de video El control que creamos aquí no tiene una propiedad llamada Texto. Por lo tanto, elimine la referencia a Texto como la propiedad por defecto. Después de todas las modificaciones, el VideoPlayer.cs El archivo de código debería verse así:
utilizando el sistema; utilizando System.Collections.Generic; utilizando System.ComponentModel; utilizando System.Linq; utilizando System.Text; utilizando System.Web; utilizando System.Web.UI; utilizando System.Web.UI.WebControls; espacio de nombres CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] clase pública VideoPlayer: WebControl En este paso, agregaremos algunas propiedades al control VideoPlayer para manejar el comportamiento del control. La siguiente es la lista de propiedades que agregaremos a la VideoPlayer.cs archivo de código:
URL del vídeo: Una propiedad de cadena que especifica la URL del video para reproducir.PosterUrl: Una propiedad de cadena que especifica la dirección de un archivo de imagen para mostrar mientras no hay datos de video disponibles.Auto-reproducción: Una propiedad booleana para especificar si el video debe comenzar a reproducirse automáticamente o no, cuando se abre la página web.DisplayControlButtons: Una propiedad booleana que especifica si los botones de navegación del reproductor se muestran o no.Lazo: Una propiedad booleana que especifica si el video comenzará nuevamente o no, cada vez que se termine.Agregue el siguiente código a la clase VideoPlayer:
cadena privada _Mp4Url; cadena pública Mp4Url get return _Mp4Url; establece _Mp4Url = valor; cadena privada _OggUrl = null; cadena pública OggUrl get return _OggUrl; establece _OggUrl = valor; cadena privada _Poster = null; cadena pública PosterUrl get return _Poster; establecer _Poster = valor; private bool _AutoPlay = false; public bool AutoPlay get return _AutoPlay; establece _AutoPlay = valor; private bool _Controls = true; public bool DisplayControlButtons get return _Controls; establecer _Controls = valor; bool privado _Loop = falso; public bool Loop get return _Loop; establece _Loop = valor;
Una vez que hayamos agregado las propiedades anteriores, la clase VideoPlayer debería verse como
utilizando el sistema; utilizando System.Collections.Generic; utilizando System.ComponentModel; utilizando System.Linq; utilizando System.Text; utilizando System.Web; utilizando System.Web.UI; utilizando System.Web.UI.WebControls; espacio de nombres CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] public class VideoPlayer: WebControl cadena privada _Mp4Url; cadena pública Mp4Url get return _Mp4Url; set _Mp4Url = value; cadena privada _OggUrl = null; public string OggUrl get return _Og genllllllq = valor; cadena privada _Poster = null; public string 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 = value; private bool _Loop = false; public bool Loop get return _Loop; set _Loop = value; El trabajo principal de un control de servidor es representar algún tipo de lenguaje de marcado en la secuencia de salida HTTP, que el cliente devuelve y muestra. Es nuestra responsabilidad, como desarrollador de control, indicar al control del servidor qué marcado se debe representar. Lo anulado Contenido de contenido El método es la ubicación principal donde le decimos al control lo que queremos hacer al cliente..
Añade la siguiente anulación Contenido de contenido método para el Reproductor de video clase:
invalidado protegido invalida RenderContents (salida HtmlTextWriter)
Tenga en cuenta que el Contenido de contenido método tiene un parámetro de método llamado salida. Este parámetro es un HtmlTextWriter objeto, que es lo que utiliza el control para representar HTML al cliente. los HtmlTextwriter La clase tiene una serie de métodos que puede utilizar para representar su HTML, incluyendo AddAttribute y RenderBeginTag.
Antes de escribir el código para renderizar el Elemento, lo primero que debe hacer es agregar algunos atributos para ello. Podemos usar el AddAttribute método de la HtmlTextWriter Objeto para agregar atributos para etiquetas HTML.
Agregue el siguiente código en el Contenido de contenido método:
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 ("controles", "controles"); if (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); if (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); if (Loop == true) output.AddAttribute ("loop", "loop"); Puedes ver eso, usando el AddAttribute Método, hemos añadido siete atributos a la etiqueta. Note también que estamos usando una enumeración., HtmlTextWriterAttribute, Para seleccionar el atributo que queremos agregar a la etiqueta..
Después de haber añadido el código anterior, el Contenido de contenido El método debería verse así:
invalidado protegido invalida RenderContents (salida 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 ("controles", "controles"); if (PosterUrl! = null) output.AddAttribute ("poster", PosterUrl); if (AutoPlay == true) output.AddAttribute ("autoplay", "autoplay"); if (Loop == true) output.AddAttribute ("loop", "loop"); Después de agregar algunos atributos de etiqueta para el elemento de video, es hora de representar el etiqueta con sus atributos en el documento HTML. Agregue el siguiente código en el Contenido de contenido método:
output.RenderBeginTag ("video"); if (OggUrl! = null) output.AddAttribute ("src", OggUrl); output.AddAttribute ("type", "video / ogg"); output.RenderBeginTag ("fuente"); output.RenderEndTag (); if (Mp4Url! = null) output.AddAttribute ("src", Mp4Url); output.AddAttribute ("type", "video / mp4"); output.RenderBeginTag ("fuente"); output.RenderEndTag (); output.RenderEndTag (); Usamos el RenderBeginTag método de salida objeto para representar la etiqueta de apertura del elemento de video, y RenderEndTag para hacer su etiqueta de cierre. También agregamos el elemento. El elemento video permite múltiples elementos fuente.. Fuente Los elementos pueden enlazar a diferentes archivos de video. El navegador utilizará el primer formato reconocido..
los Contenido de contenido El método debería tener este aspecto después de haber agregado el código anterior:
invalidado protegido invalida RenderContents (salida 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 ("controles", "controles"); 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 ("fuente"); output.RenderEndTag (); if (Mp4Url! = null) output.AddAttribute ("src", Mp4Url); output.AddAttribute ("type", "video / mp4"); output.RenderBeginTag ("fuente"); output.RenderEndTag (); output.RenderEndTag (); Tenga en cuenta que el orden en que colocamos el AddAttributes Los métodos son importantes. Colocamos el AddAttributes métodos directamente antes de la RenderBeginTag Método en el código. los AddAttributes El método asocia los atributos con la siguiente etiqueta HTML que representa el RenderBeginTag método, en este caso el vídeo etiqueta.
Por defecto, ASP.NET rodeará la etiqueta de control con un elemento al representar el marcado HTML del control. Si hemos proporcionado un CARNÉ DE IDENTIDAD valor para nuestro control, entonces el Lapso La etiqueta también, de forma predeterminada, CARNÉ DE IDENTIDAD atributo. Tener las etiquetas a veces puede ser problemático, por lo que si queremos evitar esto en ASP.NET, simplemente podemos anular la Hacer método y llamar al Contenido de contenido Método directamente. Aquí está cómo hacer eso:
protegido anular void Render (escritor HtmlTextWriter) this.RenderContents (writer);
Después de que hayamos agregado el código anterior, la clase VideoPlayer debería verse así:
utilizando el sistema; utilizando System.Collections.Generic; utilizando System.ComponentModel; utilizando System.Linq; utilizando System.Text; utilizando System.Web; utilizando System.Web.UI; utilizando System.Web.UI.WebControls; espacio de nombres CustomControls [ToolboxData ("<0:VideoPlayer runat=server>")] public class VideoPlayer: WebControl cadena privada _Mp4Url; cadena pública Mp4Url get return _Mp4Url; set _Mp4Url = value; cadena privada _OggUrl = null; public string OggUrl get return _Og genllllllq = valor; cadena privada _Poster = null; public string 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 = value; private bool _Loop = false; public bool Loop get return _Loop; set _Loop = value; reemplazo anulado void RenderContents (HtmlTextWriter output) output.AddAttribute (tipo de ajuste). Height.ToString ()); if (DisplayControlButtons == true) output.A ddAttribute ("controles", "controles"); 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 ("fuente"); output.RenderEndTag (); if (Mp4Url! = null) output.AddAttribute ("src", Mp4Url); output.AddAttribute ("type", "video / mp4"); output.RenderBeginTag ("fuente"); output.RenderEndTag (); output.RenderEndTag (); protegido anular void Render (escritor HtmlTextWriter) this.RenderContents (writer); ¡Nuestro control ya está terminado! Todo lo que nos queda por hacer es compilar el proyecto antes de usarlo en una página web ASP.NET.
Es hora de construir el proyecto. Seleccionar Construir, y luego haga clic Construir la solución desde el menu principal.
Después de construir el proyecto, el siguiente paso es agregar el control de VideoPlayer en el Explorador de la caja de herramientas.
Explorador de la caja de herramientas Elegir artículos desde el menú contextualVistazo botón en el cuadro de diálogo Elegir elementos de la caja de herramientas Controles personalizados directorioBin \ Debug directorio (Visual Studio crea versiones de depuración de forma predeterminada) CustomControls.DLL montaje y haga clic en el Abierto botón
Reproductor de video aparecerá en el cuadro de diálogo Elegir elementos de la caja de herramientas como se muestra en la imagen de arriba. La casilla de verificación lo mostrará como seleccionado. Tan pronto como haga clic en el DE ACUERDO en el cuadro de diálogo Elegir elementos de la caja de herramientas, el nuevo control de VideoPlayer aparecerá en la caja de herramientas.
Para ver cómo funciona el control, necesitamos darle un hogar. Añadir una nueva página al sitio web. Haga clic derecho en el proyecto ASP.NET desde el Explorador de soluciones. Seleccionar Agregar ítem nuevo, y agrega un Formulario web. Nombre el formulario web VideoPlayerTest.aspx.
Para colocar el control en la página, cambie a Diseño modo. Arrastrar el Reproductor de video control desde la Caja de herramientas y suéltelo en el VideoPlayerTest.aspx vista de diseño.
El siguiente listado muestra cómo se declara el control en la página:
La siguiente línea de código es lo que Visual Studio agregó a la ASPX Archivo para acomodar el control. Puedes verlo seleccionando la Fuente pestaña desde la parte inferior de la ventana de código en Visual Studio. los Registro La directiva le dice al tiempo de ejecución de ASP.NET dónde encontrar el control personalizado (qué ensamblaje) y lo asigna a un prefijo de etiqueta.
<%@ Register assembly="CustomControls" namespace="CustomControls" tagprefix="cc1" %>
Ahora podemos probar el control..
Control de VideoPlayer corriendo en Google Chrome. En este tutorial, aprendió cómo crear su propio control de servidor personalizado ASP.NET desde cero. Ahora conoce cada paso del proceso: desde cómo crear un proyecto de biblioteca de control personalizado web, cómo agregar propiedades a un control personalizado, cómo representar el marcado HTML del control al cliente y, finalmente, cómo usar el Control personalizado ASP.NET en un formulario web..
Es de esperar que ahora tenga las habilidades para crear controles personalizados que tengan todas las funciones de los controles estándar del lado del servidor ASP.NET. Muchas Gracias Por Leer!
