taller de programación web

TALLER DE PROGRAMACIÓN
WEB
Ing. David Gil
Unidad Didáctica: Taller de Programación Web | 2
Web Forms (Formularios Web)
Las páginas ASP.NET (oficialmente conocidas como formularios web) son una parte vital de una aplicación
ASP.NET. Proporcionan la salida actual de una aplicación web –las páginas web, que los clientes solicitan y
ven en sus navegadores.
Esencialmente, los formularios web le permiten crear una aplicación web utilizando la misma interfaz de
basada en controles como una aplicación Windows. Para ejecutar un formulario web ASP.NET, el motor
ASP.NET lee todo el archivo .aspx, genera los objetos correspondientes, y dispara una serie de eventos. Usted
reacciona a estos eventos utilizando código completamente orientado a objetos.
Procesamiento de página
Uno de los objetivos principales de ASP.NET es crear un modelo que permite a los desarrolladores web,
desarrollar rápidamente formularios web de la misma manera que los desarrolladores de Windows pueden
construir ventanas hechas a medida en una aplicación de escritorio. Por supuesto, las aplicaciones web son
muy diferentes de las tradicionales aplicaciones de cliente enriquecido. Hay dos obstáculos principales:
•
•
Las aplicaciones Web se ejecutan en el servidor.
Las aplicaciones web no tienen estado.
Etapas de procesamiento de web forms
Por el lado del servidor, el procesamiento de un formulario Web ASP.NET se lleva a cabo en etapas. En cada
etapa, se plantean diversos eventos. Esto permite que su página de conecte al flujo de procesamiento en
cualquier etapa y responder en cualquier momento que lo desee.
La siguiente lista muestra las principales etapas en el flujo de proceso de una página ASP.NET:
•
•
•
•
•
•
Inicialización del marco de trabajo de la página.
Inicialización del código de usuario.
Validación.
Manejando Eventos
Enlace de datos automático.
Limpieza.
La clase Page
La página en si misma es como una instancia de un tipo de objeto control. De hecho, todos los formularios
web son en realidad instancias de la clase Page de ASP.NET, que se encuentra en el espacio de nombres
System.Web.UI.
Es posible que haya notado que cada clase de código subyacente explícitamente se deriva de
System.Web.UI.Page. Esto significa que cada web form a crear está equipado con una enorme cantidad
funcionalidad de fuera de la de la caja. El FindControl () y la propiedad IsPostBack son dos ejemplos que
hemos visto hasta ahora. Además, se derivan de la clase Page que da a su código las siguientes propiedades
de gran utilidad:
o
o
o
o
o
o
o
o
Session
Application
Cache
Request
Response
Server
User
Trace
Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia
Ing. David Gil
Unidad Didáctica: Taller de Programación Web | 3
Server Controls (Controles de Servidor)
Los controles de servidor, son una parte fundamental de la arquitectura ASP.NET. En esencia, los controles
de servidor son las clases de .NET Framework que representan los elementos visuales de un formulario web.
Algunas de estas clases son relativamente sencillos y reprecentan de cerca a una etiqueta HTML específica.
Otros controles son mucho más ambiciosos y hacen una representación más compleja de múltiples
elementos HTML.
Tipos de Server Controls
 Controles de servidor HTML: Estas son las clases que envuelven los elementos estándar HTML.
Aparte de este atributo, la declaración de un control de servidor HTML sigue siendo el mismo. Dos
ejemplos son HtmlAnchor (para la etiqueta <a>) y HtmlSelect (para la etiqueta <select>). Sin
embargo, puede convertir cualquier etiqueta HTML en un control de servidor. Si no hay una clase
directa correspondiente, ASP.NET simplemente usará la clase HtmlGenericControl. Para cambiar un
elemento HTML normal en un control de servidor, basta con añadir el atributo runat = "server" a la
etiqueta del elemento.
 Controles Web: Estas clases duplican las funciones de los elementos básicos de HTML, pero tiene un
juego más consistente y significativa de propiedades y métodos que hacen más fácil al desarrollador
declarar y acceder a ellos. Algunos ejemplos son los controles HyperLink, ListBox y Button. En Visual
Studio, se encuentran en la ficha Estándar del Cuadro de herramientas.
 Controles Enriquesidos: Estos controles avanzados tienen la capacidad de generar una gran cantidad
de código HTML, e incluso JavaScript del lado del cliente para crear la interfaz. Algunos ejemplos son
el Calendar, AdRotator, y los controles TreeView. En Visual Studio, muchos controles enriquesidos
también se encuentran en la ficha Estándar del Cuadro de herramientas.
 Controles de validación: Este conjunto de controles permite fácilmente la validación de un control
de entrada asociado contra varias normas o reglas definidas por el usuario. Por ejemplo, puede
especificar que la entrada no puede estar vacía, que debe ser un número, que debe ser mayor que un
determinado valor, y así sucesivamente. Si la validación falla, se puede evitar el procesamiento de
páginas o permitir que estos controles muestren mensajes de error en línea en la página. En Visual
Studio, estos controles se encuentran en la ficha de validación de la Caja de herramientas.
 Controles de datos: Estos controles incluyen cuadriculas sofisticadas y listas que están diseñados
para mostrar grandes cantidades de datos, con soporte para características avanzadas tales como
plantillas, edición, selección, y paginación. Este conjunto incluye también los controles de origen de
datos de que permiten unirse a diferentes fuentes de datos de forma declarativa, sin necesidad de
escribir código adicional.
 Controles de navegación: Estos controles están diseñados para mostrar mapas de sitio y permitir al
usuario navegar de una página a otra.
 Controles de inicio de sesión: Estos controles son el soporte de formularios de uthentication, en el
modelo de ASP.NET para autenticación de usuarios contra una base de datos y el seguimiento de su
estado. En vez de escribir sus propias interfaces para trabajar con la autenticación de formularios,
puede utilizar estos controles para obtener precompilados, páginas de acceso personalizables, la
recuperación de la contraseña y el usuario, asistentes para la creación de usuarios.
 Controles partes Web: Este conjunto de controles soporta WebParts, un modelo de ASP.NET para
la construcción por componentes, portales web altamente configurables.
 Controles ASP.NET AJAX: Estos controles permiten el uso de técnicas Ajax en sus páginas web sin
forzar a escribir código del lado del cliente.
Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia
Ing. David Gil
Unidad Didáctica: Taller de Programación Web | 4
 Controles de ASP.NET Mobile: Este es un conjunto de controles que se asemeja a los controles Web,
pero están personalizados para apoyar a los clientes móviles como PDAs, teléfonos inteligentes, y
otros dispositivos móviles, adaptando las páginas a las normas de marcado como HTML 3.2 o WML
1.1. Los controles móviles son muy adaptables, lo que significa que cuando se crea una página
utilizando estos controles, la página se puede representar de varias maneras totalmente diferentes,
dependiendo del dispositivo que está accediendo a la página.
Jerarquía de controles de servidor
Todos los controles de servidor se derivan de la clase base Control en el espacio de nombres (namespace)
System.Web.UI.
Debido a que todos los controles derivan de la clase base Control, tienen un denominador común básico que
puede utilizar para manipular cualquier control de la página, incluso si usted no sabe el tipo de control
específico.
Propiedades de la clase Control
Propiedad
Descripción
ClientID
Devuelve el identificador del control, que es un nombre único creado por ASP.NET
en el momento que la página es instanciada.
Controls
Devuelve la colección de controles secundarios. Usted puede utilizar la colección
Page.Controls para conseguir una colección de alto nivel de los controles en la
página. Cada control de la colección Controls puede contener sus propio controles
hijo, y los controles hijo pueden contener a su vez sus propios controles hijos, y así
sucesivamente.
EnableViewState Devuelve o establece un valor booleano que indica si el control debe mantener su
estado a través de las devoluciones de datos de la página principal. Esta propiedad
es true por defecto.
Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia
Ing. David Gil
Unidad Didáctica: Taller de Programación Web | 5
ID
Devuelve o establece el identificador del control. En la práctica, este es el nombre
por el cual se puede acceder al control desde los scripts de servidor o de la clase de
código subyacente.
Page
Devuelve una referencia al objeto de página que contiene el control.
Parent
Devuelve una referencia al control principal del control, que puede ser la página u
otro control contenedor.
Visible
Devuelve o establece un valor booleano que indica si el control debe ser presentado.
Si es false, el control se hace invisible en el lado del cliente, la etiqueta HTML
correspondiente no se genera.
Métodos de la clase Control
Método
Descripción
DataBind()
Enlaza el control y todos sus controles secundarios al origen de datos o expresión.
FindControl()
Busca un control hijo con un nombre específico en el control actual y todos los
controles contenidos. Si el control hijo se encuentra, el método devuelve una
referencia de tipo general del control. A continuación, puede lanzar este control
para el tipo adecuado.
HasControls()
Devuelve un valor booleano que indica si este control tiene controles secundarios.
El control debe ser un contenedor para tener controles secundarios (como una
etiqueta <div>).
Render()
Escribe la salida HTML para el control basado en su estado actual. No se puede
llarmar a este método directamente. En cambio, ASP.NET lo llama cuando la página
está siendo presentada.
Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia
Ing. David Gil
Unidad Didáctica: Taller de Programación Web | 6
HTML Server Controls (Controles de servidor HTML)
En total, hay alrededor de 20 diferentes clases de controles de servidor HTML. Están divididos en categorías
distintas en función de si son controles de entrada (en cuyo caso se derivan de HtmlInputControl) o pueden
contener otros controles (en cuyo caso se derivan de HtmlContainerControl).
La clase HtmlControl
Todos los controles de servidor HTML derivan de la clase base HtmlControl. La siguiente tabla muestra las
propiedades que la clase HtmlControl añade a la clase base de Control.
Propiedades
Propiedad
Descripción
Attributes
Le permite acceder a otras páginas de atributos en la etiqueta de control. Puede
utilizar esta colección para agregar atributos que no son expuestos por las
propiedades específicas.
Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia
Ing. David Gil
Unidad Didáctica: Taller de Programación Web | 7
Disabled
Devuelve o establece el estado desactivado del control. Si es true, el control suele
mostrarse como "en gris" y no es utilizable.
Style
Devuelve una colección de atributos CSS que se aplican para el control.
TagName
Devuelve el nombre de la etiqueta de control, tales como a, img, etc.
La clase HtmlContainerControl
Cualquier etiqueta HTML que tiene tanto una etiqueta de apertura y una de cierre pueden incluir contenido
HTML o de otros controles. Un ejemplo es la etiqueta de anclaje, que por lo general ajusta el texto o una
imagen con las etiquetas <a> ... </ a>. Muchas otras etiquetas HTML también funcionan como contenedores,
incluyendo todo, desde la etiqueta <div> (que le permite dar formato a un bloque de contenido) a los humildes
<b> etiqueta (que se aplica el formato de negrita). Estas etiquetas no se asignan a clases específicas de control
de servidor HTML, pero todavía se puede utilizar con el atributo runat = "server". En este caso, interactuas
con ellos mediante la clase HtmlGenericControl, que a su vez deriva de HtmlContainerControl.
Para soportar la contención, la clase HtmlContainerControl añade las dos propiedades que se muestran a
continuación.
Propiedades
Propiedad
Descripción
InnerHtml
Devuelve o establece el texto HTML en las etiquetas de apertura y de cierre. Cuando
se utiliza esta propiedad, todos los caracteres se dejan como son. Esto significa que
puede integrar el formato HTML (texto en negrita, agregando saltos de línea, y así
sucesivamente).
InnerText
Devuelve o establece el texto dentro de la etiquetas de apertura y de cierre. Cuando
se utiliza esta propiedad, cualquier carácter que se interprete como sintaxis HTML
especial, se reemplazarán automáticamente con las entidades HTML equivalentes.
La clase HtmlInputControl
Los controles de entrada HTML permite la interacción del usuario. Estos incluyen las casillas de verificación,
cuadros de texto, botones y cuadros de lista. Todos estos controles se generan con la etiqueta <input>. El
atributo type indica el tipo de control de entrada, como en <input type="text"> (un cuadro de texto), <input
type="submit"> (un botón), y <input type="file"> ( los controles para subir un archivo).
Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia
Ing. David Gil
Unidad Didáctica: Taller de Programación Web | 8
Propiedades
Propiedad
Descripción
Type
Obtiene el tipo de un HtmlInputControl. Por ejemplo, si esta propiedad está
establecida a text, el HtmlInputControl es un cuadro de texto para la entrada de
datos.
Value
Obtiene o establece el valor asociado a un control de entrada. El valor asociado a un
control depende del tipo de control. Por ejemplo, en un cuadro de texto esta
propiedad contiene el texto introducido en el control. Para los botones, esta define
el texto en el botón.
Las clases de controles de servidor HTML
Declaración de etiqueta
Clase .NET
Miembros específicos
<a runat="server">
HtmlAnchor
HRef, Target, Title, Name,
ServerClick event
<button runat="server">
HtmlButton
CausesValidation,
ValidationGroup, ServerClick
event
<form runat="server">
HtmlForm
Enctype, Method, Target,
DefaultButton, DefaultFocus
<img runat="server">
HtmlImage
Align, Alt, Border, Height,
Src, Width
<input type="button" runat="server">
HtmlInputButton
Type, Value,
CausesValidation,
ValidationGroup, ServerClick
event
<input type="reset" runat="server">
HtmlInputReset
Type, Value
<input type="submit" runat="server">
HtmlInputSubmit
Type, Value,
CausesValidation,
ValidationGroup, ServerClick
event
Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia
Ing. David Gil
Unidad Didáctica: Taller de Programación Web | 9
<input type="checkbox" runat="server">
HtmlInputCheckBox
Checked, Type, Value,
ServerClick event
<input type="file" runat="server">
HtmlInputFile
Accept, MaxLength,
PostedFile, Size, Type, Value
<input type="hidden" runat="server">
HtmlInputHidden
Type, Value, ServerChange
event
<input type="image" runat="server">
HtmlInputImage
Align, Alt, Border, Src, Type,
Value, CausesValidation,
ValidationGroup, ServerClick
event
<input type="radio" runat="server">
HtmlInputRadioButton
Checked, Type, Value,
ServerChange event
<input type="text" runat="server">
HtmlInputText
MaxLength, Type, Value,
ServerChange event
<input type="password" runat="server">
HtmlInputPassword
MaxLength, Type, Value,
ServerChange event
<select runat="server">
HtmlSelect
Multiple, SelectedIndex,
Size, Value, DataSource,
DataTextField,
DataValueField, Items
(collection),
ServerChange event
<table runat="server">,
HtmlTable
<td runat="server">
Align, BgColor, Border,
BorderColor,
CellPadding,
CellSpacing, Height,
NoWrap, Width, Rows
(collection)
<th runat="server">
HtmlTableCell
Align, BgColor, Border,
BorderColor, ColSpan,
Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia
Ing. David Gil
Unidad Didáctica: Taller de Programación Web |
10
Height, NoWrap,
RowSpan, VAlign, Wid
<tr runat="server">
HtmlTableRow
Align, BgColor, Border,
BorderColor, Height,
VAlign, Cells (collection)
<textarea runat="server">
HtmlTextArea
Cols, Rows, Value,
ServerChange event
Cualquier otra etiqueta HTML con el
atributo runat = "server"
HtmlGenericControl
Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia
Ninguno
Ing. David Gil