Introducción a ASP.NET

INTRODUCCIÓN A ASP.NET
TGP2006
Rafael Cano Parra
rafael.cano@alumnos.uva.es
12 de enero de 2007
Tecnología de la Programación
Ingeniería Técnica en Informática de Gestión
Universidad de Valladolid
ÍNDICE GENERAL
1.
INTRODUCCIÓN A ASP.NET.......................................................................... 3
1.1. Procesamiento dinámico........................................................................... 3
1.2. Enlace de los elementos ........................................................................... 3
1.3. Elementos de una página ASP.NET ......................................................... 3
2.
CREACIÓN GENERAL DE PÁGINAS ............................................................. 5
2.1. Bloques de declaración de código ............................................................ 5
2.2. Flujo de página ......................................................................................... 5
2.3. Estado visual............................................................................................. 6
2.4. Cómo debemos escribir código de ASP.NET y HTML .............................. 6
2.5. Comentarios en el código ......................................................................... 6
2.6. División del código en varias líneas .......................................................... 6
2.7. Cómo importar espacios de nombres ....................................................... 6
3.
USO BÁSICO DE OBJETOS ........................................................................... 7
3.1. Objeto Response ...................................................................................... 7
3.2. Objeto Request ......................................................................................... 7
3.3. Objeto HttpCookie..................................................................................... 7
3.4. Objeto Page .............................................................................................. 8
3.5. Objeto Session.......................................................................................... 8
3.6. Objeto HttpApplication .............................................................................. 9
3.7. Objeto HttpServerUtility............................................................................. 9
4.
INTRODUCCIÓN A FORMULARIOS WEB.................................................... 10
4.1. Presentación de los formularios .............................................................. 10
4.2. Presentación de formularios web ............................................................ 10
4.3. Modelo de programación de los formularios web.................................... 10
5.
INCLUSIÓN DE ARCHIVOS EXTERNOS DESDE EL SERVIDOR ............... 16
6.
BIBLIOGRAFÍA Y REFERENCIAS ................................................................ 17
2
1. INTRODUCCIÓN A ASP.NET
1.1.
PROCESAMIENTO DINÁMICO:
Internet está basado en un modelo cliente-servidor, en el que se realizan una serie de
peticiones por el cliente las cuales son respondidas por el servidor. Por ello, tenemos un equipo
que contiene información al que se le denomina servidor, y también tenemos otro equipo que la
solicita al cual se le denomina cliente.
El modelo cliente-servidor puede ser:
•
Estático: el servidor no puede proporcionar información de forma dinámica o procesar
los datos para devolver la información. Esto ocurre con el lenguaje HTML.
•
Dinámico: el servidor proporciona la información dinámicamente y analiza dicha
información antes de enviarla al cliente. Esto ocurre con el lenguaje ASP.
•
Controlado por eventos: el servidor espera a que algo ocurra en el cliente para entrar en
acción y ejecutar alguna tarea. Esto ocurre con el lenguaje ASP.NET.
Por tanto, ASP.NET es un lenguaje el cual sigue un modelo controlado por eventos. Éste sabe
lo que ocurre en el cliente porque se basa en el procesamiento dentro del cliente para simular un
modelo controlado por eventos, como puede ser por ejemplo cualquier otra aplicación hecha en
Visual Basic.
1.2.
ENLACE DE LOS ELEMENTOS:
Hay dos lugares para ejecutar el código: en el servidor donde todo se devuelve como HTML, y
en el cliente. Estos dos lugares para el código son distintos y no tienen relación entre sí, como
veremos a continuación:
•
Ejecución en el cliente: no se procesa en el servidor, sino que se escribe en secuencias
de comandos que indican al cliente que haga algo. Se usa para realizar efectos
dinámicos en el cliente como cuadros de mensaje.
•
Ejecución en el servidor: se ejecuta sólo en el servidor y todo se convierte en HTML o
XML antes de enviarlo al cliente. Se utiliza para procesar resultados y devolver datos.
En el caso específico de ASP.NET, éste sabe lo que ocurre en el cliente porque éste se
comunica con el servidor mediante una petición. La forma en la que enlaza los elementos del
cliente con el servidor es a través de secuencias de comandos en el cliente, y que proporciona
información de lo que éste hace durante las peticiones al servidor.
Otra cualidad de ASP.NET es que, tras una petición de información de una página, el servidor
compila esta para tener una aplicación más eficiente. La compilación se ejecuta la primera vez y
ser reutiliza para posteriores peticiones de página.
1.3.
ELEMENTOS DE UNA PÁGINA ASP.NET:
Un archivo sencillo que puede ser encontrado en la carpeta raíz del servidor web con la
extensión *.aspx para identificarle como ASP.NET, es el siguiente:
<%@ Page Language="VB" %>
<html>
<head>
<title>Página en ASP.NET</title>
<script runat="server">
Sub Page_Load(obj as object, e as eventargs)
lblMensaje.Text = "¡Bienvenido a ASP.NET!"
3
End sub
</script>
</head>
<body>
<asp:Label id="lblMensaje" runat="server" />
</body>
</html>
En el ejemplo anterior podemos encontrar los siguientes elementos:
•
Primero tenemos la etiqueta <%@ Page Language="VB" %> que identifica la directiva de
página y es la que da la información específica a la página ASP.NET. Esta es la que
nos dice que el lenguaje usado es Visual Basic, ya que se pueden usar más lenguajes,
como C# o JScript.
•
Todo el trozo que engloba la etiqueta <script runat="server"> hasta su cierre es el
bloque de declaración de código. Se parece al código que es ejecutado en el lado del
cliente, pero se diferencia por la variable runat="server", que también es utilizada en
otro tipo de elementos HTML que veremos más adelante. Éste es el código que
ASP.NET utiliza para procesar sus páginas y es donde controlaremos la funcionalidad
de la misma. Este trozo normalmente se coloca en el <head>, aunque se puede utilizar
en otras partes del código.
•
Luego están los elementos típicos de una página HTML, como son las etiquetas
<html>, <head> y <body>. Dentro de ellas es donde va todo el código de la página que
va a ser visualizado por en navegador.
•
Finalmente, entre el <body> podemos tener varios elementos de control de ASP.NET,
así como otras funcionalidades de ASP. Ejemplo de esto es la línea <asp:Label
id="lblMensaje" runat="server" /> que es parte de un formulario web, muy típico
en el nuevo contexto de ASP.NET, y que suele ir encerrado entre el trozo de las
etiquetas <form runat="server">, similares a las de HTML pero que son controladas
por ASP.NET.
Aunque ASP y ASP.NET sean totalmente distintos, pueden operar en conjunto, ya que el
servidor web procesa ambas tecnologías. Podemos tener trozos de código entre <% y %> propios de
ASP, pero se ha de tener en cuenta que estos trozos no son compilados por .NET y la aplicación
puede perder la eficiencia que se consigue con el nuevo ASP.NET.
4
2. CREACIÓN GENERAL DE PÁGINAS
2.1.
BLOQUES DE DECLARACIÓN DE CÓDIGO:
Una declaración de código para Visual Basic sería:
<%@ Page Language="VB" Debug="True" %>
<script runat="server">
Sub tbMensaje_Change(Sender As Object, E As EventArgs)
lblMensaje.Text = "Hola, " + tbMensaje.Text + "."
End Sub
</script>
El mismo código escrito en C# es el siguiente:
<%@ Page Language="c#" Debug="True" %>
<script runat="server">
public void tbMensaje_Change (Object sender, EventArgs E) {
lblMensaje.Text = "Hola, " + tbMensaje.Text + ".";
}
</script>
Los eventos que controlarán ese trozo de código y de los cuales veremos más adelante su
descripción, serán los del siguiente formulario web:
<form runat="server">
<p>Por favor, teclea tu nombre:</p>
<asp:textbox id="tbMensaje" OnTextChanged="tbMensaje_Change" runat="server" />
<asp:button id="btSubmit" Text="Enviar" runat="server" />
<asp:label id="lblMensaje" font-size="20pt" runat="server" />
</form>
La etiqueta <script> se utiliza en secuencias de comandos del cliente. Delimita una sección de la
página que la aplicación manejará de forma dinámica, conocida como bloque de declaración de código.
No se convierte en HTML dentro de la página, si no que contiene código que será ejecutado por el
servidor. No olvidar nunca incluir runat="server", ya que sino ASP.NET no lo interpretará como código
para la aplicación dinámica.
Podemos ver que la diferencia entre ambos es la sintaxis, ya que el control de eventos se hace de la
misma forma, sea el lenguaje que sea. En los formularios web, servicios web,… que contiene la página
HTML no influye el lenguaje utilizado, ya que los eventos se identifican del mismo modo.
Es mejor separar el bloque <script> tanto como sea posible del código de presentación en HTML,
por ello es recomendable escribirlo en la cabecera de la página.
En cuanto al trozo del formulario web, comentar que no tiene acción asociada ya que se refiere a la
misma página. La etiqueta <asp:textbox /> como las otras son los controles de servidor y siempre han
de contener el cierre de etiqueta para que no genere errores. El atributo id es un nombre único que
damos al control para su identificación. El cuadro de texto tiene el atributo
OnTextChanged="tbMensaje_Change". Tiene un evento que es TextChanged. Hemos indicado a
ASP.NET que ejecute el procedimiento tbMensaje_Change cuando ocurra ese evento. Estos eventos se
controlan en el servidor.
2.2.
FLUJO DE PÁGINA:
La primera vez que se solicita la página desde el explorador web ASP.NET compilará el código que
esté en los bloques de declaración. Por esto el explorador tarda en mostrar la página. Sin embargo, si se
solicita una segunda vez sin modificar el código no habrá retardo alguno. Pero si se modifica algo
ASP.NET volverá a compilar la página.
Una vez que se envía el formulario y se compila el código, ASP.NET empieza a procesar todo el
código que hemos generado y cualquier evento que haya ocurrido. En el ejemplo, el evento TextChanged
5
ocurrió cuando se tecleó algo en la caja de texto. El motor de ASP.NET explora este evento, determina
que debe hacer y lo hace.
En ese momento, ASP.NET convierte cualquier control en elemento HTML. Luego evalúa cualquier
bloque proveedor de código y devuelve el HTML necesario.
Por último, el HTML resultante se envía al explorador web, que recibe sólo HTML estándar. Por lo
que cualquier explorador web puede mostrar la página.
2.3.
ESTADO VISUAL:
Describe el aspecto de un objeto en un momento determinado, como por ejemplo, si un botón está o
no pulsado. Una aplicación que lleve el control de esta información se conoce como estado de
conservación. Si llenamos un formulario HTML y volvemos a él después, es posible que esté vacío. Esto
es porque la web es un medio sin estado.
ASP.NET lleva automáticamente un control del estado visual. Esto quiere decir que si rellenamos un
formulario HTML y volvemos a él después los datos estarán allí. ASP.NET hace esto al devolver campos
ocultos de formulario HTML siempre que indicamos runat="server" en el formulario.
2.4.
CÓMO DEBEMOS ESCRIBIR CÓDIGO DE ASP.NET Y HTML:
Hay dos formas de escribir código de ASP.NET: en los bloques de declaración de código o en los
bloques proveedores de código. Es mejor el primer método. También hay otras formas de escribir HTML
puro mediante ASP.NET, como son Response.Write o la etiqueta <%=, ambos heredados de ASP.
Pero lo más correcto es separar el código ASP.NET del HTML tanto como podamos mediante
bloques de declaración de código. Por ello no debemos utilizar bloques proveedores de código para
intercalar código o resultados HTML (con Response.Write) cuando otro método cumpla mejor con el
trabajo.
2.5.
COMENTARIOS EN EL CÓDIGO:
Hay cuatro formas de comentar el código dependiendo del lenguaje usado:
2.6.
•
<!-- y --> para comentar código sólo en HTML.
•
' (apóstrofo) para comentar con código en Visual Basic.
•
// y /* … */ para comentar código en C#.
•
<%-- y --%> para comentarios del servidor.
DIVISIÓN DEL CÓDIGO EN VARIAS LÍNEAS:
Esto es propio del lenguaje Visual Basic, ya que C# hasta que no encuentra un punto y coma no
cierra la línea. La forma de hacerlo es con la barra baja, como vemos en el siguiente ejemplo:
<% Response.Write ("Te estoy "
"saludando") %>
2.7.
& _
CÓMO IMPORTAR ESPACIOS DE NOMBRES:
De forma predeterminada, se importan automáticamente los siguientes espacios de nombre a todas
las páginas ASP.NET: System, System.Collections, System.IO, System.Web, System.Web.IU,
System.Web.IU.HtmlControls y System.Web.IU.WebConstrols.
En el caso de que nos haga falta otra cualquiera, como por ejemplo el espacio System.Drawing, se
haría de la siguiente forma:
<%@ Import Namespace="System.Drawing" %>
6
3. USO BÁSICO DE OBJETOS
En los siguientes puntos veremos los objetos que están implementados en ASP.NET, junto con una
descripción de su utilización y los métodos que pueden usarse con ellos. Se puede buscar y ampliar más
información sobre estos en cualquier libro o página de Internet.
3.1.
OBJETO Response:
El objeto Response permite la interacción del servidor con el cliente.
Cuando un usuario solicita una página ASP.NET genera una instancia del objeto HttpResponse, el
cual contiene información (propiedades y métodos) necesaria para comunicarse con el cliente. El nombre
de la instancia es Response, de modo que podrá utilizar este nombre para acceder a las propiedades y
métodos del objeto HttpResponse.
Los métodos de los que consta son los siguientes:
3.2.
•
Para escribir en pantalla: Write.
•
Para controlar el buffer: Buffer, junto con Clear, Flush y End.
•
Para redirigir a otras páginas: Redirect.
OBJETO Request:
Una función del objeto Request es obtener información personal a través del explorador web, por
ejemplo, lo que ha capturado un usuario en un formulario o los valores de cadena de consulta de cómo
máximo 255 caracteres.
Los métodos que recogen estos datos son:
•
QueryString y QueryString(“variable”) obtiene todas las variables o una variable concreta de la
ruta de acceso a la página.
•
Form y Form(“nombre”) devuelve todos los valores o el valor concreto de los controles de un
formulario.
•
ServerVariables devuelve información sobre el servidor, como la IP o el protocolo.
•
Cookies devuelve información sobre las cookies utilizadas en la aplicación.
Variables del servidor que pueden ser utilizadas son: URL o PATH_INFO (obtiene el nombre de la
página actual), PATH_TRANSLATED (obtiene toda la ruta física del servidor), SERVER_NAME (obtiene
el nombre del servidor web) y SERVER_SOFTWARE (obtiene el nombre del software del servidor web).
3.3.
OBJETO HttpCookie:
Una cookie es un pequeño archivo en la computadora del usuario que contiene información
específica para un sitio web. El objeto HttpCookie ofrece métodos para acceder y generar esas cookies.
La forma común de manejar las cookies es mediante los objetos Request y Response, los cuales cuentan
con una propiedad Cookies que devuelve una referencia a un objeto HttpCookie.
Métodos que son usados por este objeto son:
•
Value para dar un valor en particular a una cookie.
•
Expires para darlas un tiempo concreto de duracion (con una fecha). Esto se usa para eliminar
una cookie, si damos una fecha anterior o la ponemos a cero.
•
Domain restringe el uso de la cookie para el dominio que le indiquemos.
•
Path sólo permite el acceso a la cookie a las páginas ASP.NET que se encuentren en una ruta
específica del servidor.
•
HasKeys indica si esta cookie tiene claves o es una cookie con un único valor.
7
•
3.4.
Secure indica a ASP.NET si debe o no transmitir la cookie de forma segura, es decir, sólo bajo
el protocolo HTTPS. El valor predeterminado es false.
OBJETO Page:
Contiene todas las propiedades y métodos que genere la página ASP.NET. Cuando ejecutamos una
página ASP.NET ésta heredará de la clase Page del .NET Framework.
Las páginas ASP.NET son los objetos secundarios del objeto Page. Cualquier método o propiedad
que se defina en la página ASP.NET se convertirá en miembro del objeto basado en su página. Esto
significa que si genero otra página podré acceder a los métodos y propiedades de la primera.
Miembros útiles integrados:
•
IsPostBack: indica si un formulario de esta página fue enviado a la misma.
•
DataBind: enlaza todas las expresiones de datos a los controles de la página.
Eventos que son producidos:
•
Init: es lanzado cuando la página es inicializada, cuando es lanzado este evento todavía no se
han creado por completo los distintos controles de la página. Este evento es tratado en el
método Page_Init.
•
Load: este evento se lanzaría a continuación del método Init y es lanzado cuando la página se
ha cargado, en este caso todos los controles de la página ya han sido creados. Este evento se
lanzará cada vez que la página ASP.NET es ejecutada y es tratado en el método Page_Load.
•
PreRender: el evento se lanzará justo antes de enviar la información al cliente. Este evento es
tratado en el método Page_PreRender, y siempre es lanzado después del evento Load.
•
UnLoad: este otro evento se lanzará en último lugar, y tiene lugar cuando la página ha
finalizado de procesarse, es decir, cuando se ha terminado la ejecución de la página y toda la
información ha sido enviada al cliente. Este evento es tratado en el método Page_UnLoad.
•
Error: este evento se lanzará cuando se produzca una excepción no tratada dentro de la
página. El método Page_Error se utilizará cuando deseemos realizar nuestro propio
tratamiento de errores.
Propiedades que son utilizadas en el método son:
3.5.
•
IsPostBack: esta propiedad de la clase Boolean devolverá true si la página ASP.NET actual ya
ha sido enviada al servidor en alguna ocasión. Si tiene el valor false indicará que es la primera
vez que se carga la página y nos servirá de indicador para poder inicializar los controles web o
bien realizar otras labores de inicialización.
•
Application: esta propiedad nos va a ofrecer una referencia a un objeto de la clase
System.Web.HttpApplicationState. Este objeto nos va a permitir almacenar y acceder a
información que va a ser común a toda la aplicación web, es decir, es una información
compartida por todos los clientes de una aplicación web determinada. Esta propiedad es
equivalente al objeto integrado Application de anteriores versiones de ASP.
OBJETO Session:
Debido a que la web es un medio sin estado, es difícil llevar un control de la información del usuario.
No hay forma de utilizar el protocolo http para saber si una serie de peticiones proviene de un usuario o
de varios. El objeto Session permite almacenar elementos propios de un usuario, como variables,
objetos, cadenas,... en un solo lugar del servidor. Por eso se conoce como sesión al tiempo que un
usuario pasa en un sitio, y se la suele identificar con un nombre y un valor.
El control de las sesiones se hace con los siguientes métodos:
•
Timeout es el tiempo que puede estar inactiva una sesión antes que ASP.NET la deje. El
tiempo predeterminado es de 20 minutos, pero se puede modificar dándole otro valor.
•
Abandon: hace que la sesión termine.
8
Es posible almacenar los datos con ámbito de sesión a fin de proporcionar datos individuales a un
usuario durante una sesión. Además es posible configurar las características del estado de una sesión en
la sección <sessionState> del archivo web.config del servidor web de ASP.NET.
3.6.
OBJETO HttpApplication:
ASP.NET genera un objeto HttpApplication llamado Application cuando arranca su aplicación, es
decir, cuando alguien solicita la página por primera vez. Sólo se genera un objeto Application para toda la
aplicación. Al igual que Session puede usarse para almacenar variables y objetos, como por ejemplo un
pie de página que vamos a colocar en cada página.
3.7.
OBJETO HttpServerUtility:
Podemos utilizar el nombre Server para acceder a los métodos de este objeto.
Los métodos que pueden ser usados por este objeto son:
•
Transfer: lleva la ejecución a otra página.
•
Execute: lleva la ejecución a otra página, pero regresa a la misma cuando termine.
•
HtmlEncode: se utiliza para que la salida de un texto no sea interpretada por HTML, por lo que
codifica los caracteres especiales. Su operación inversa es HtmlDecode.
•
UrlEncode: hace algo similar ya que da formato a una cadena en particular con las reglas
URL. Su operación inversa es UrlDecode.
•
MapPath: traduce una ruta virtual en una física en el servidor.
•
ScriptTimeout: indicamos el tiempo que vamos a esperar en segundos antes de finalizar la
secuencia de comandos, como puede ocurrir si tenemos un bucle infinito.
•
CreateObject: creamos una instancia de un objeto COM.
9
4. INTRODUCCIÓN A FORMULARIOS WEB
4.1.
PRESENTACIÓN DE LOS FORMULARIOS:
Un cliente envía una petición a un servidor para obtener cierta información y que éste responda a su
envío. Es el modelo petición-respuesta. Un ejemplo de formulario puede ser:
<form method ="post">
<p>Teclea tu nombre:</p>
<input type="text" size="20" />
<input type="submit" value="Enviar" />
</form>
El cliente también puede enviar datos al servidor. Los formularios HTML permiten la interacción del
usuario con páginas web. Cuando el usuario hace clic en el botón “Enviar”, el formulario envía al servidor
los datos que haya capturado.
Los formularios HTML se basan por completo en el cliente. Entre el cliente y el servidor es difícil
intercambiar información. Tan pronto como el servidor envía los datos, olvida todo lo que el formulario
indica y pierde el rastro de lo que sucede.
4.2.
PRESENTACIÓN DE FORMULARIOS WEB:
Son muy similares a los de HTML. La diferencia es que se basan en el servidor, es decir, genera los
elementos del usuario en el servidor. El servidor tendrá conocimiento de la apariencia de la interfaz, qué
puede hacer, qué datos recibirá,…
En el servidor generaremos objetos llamados controles de servidor, que pueden controlarse por
completo: tienen propiedades, eventos y métodos que podemos manejar. Tan pronto como el cliente
solicita la página, ASP.NET convierte los controles a HTML.
A través de la secuencia de comandos que ASP.NET genera automáticamente en el cliente, estos
controles avisan al servidor cuando algo sucede, como cuando se hace clic en un botón.
4.3.
MODELO DE PROGRAMACIÓN DE LOS FORMULARIOS WEB:
Los formularios web están divididos en dos partes: los elementos visuales y la lógica de la interfaz.
Están separados entre sí en el plano conceptual y en el físico.
4.3.1.
Controles de servidor:
Al ejecutarse una página ASP.NET, la serie de objetos de los controles de servidor generarán todo
el código equivalente en el lenguaje HTML de esta página para que su resultado pueda ser interpretado
por cualquier navegador web.
Cada control se corresponde con una clase determinada perteneciente a un espacio con nombre
determinado. Existe un gran número de controles de servidor y cada uno de ellos pertenece a una clase
del .NET Framework. Estos controles son los elementos de la interfaz de usuario de un formulario web.
Hay cuatro tipos y todos tienen propiedades, métodos y eventos.
La descripción de cada uno de ellos es la siguiente:
•
Controles HTML de servidor: representan a los elementos normales de los formularios HTML,
como los cuadros de texto y los botones, pero se crean en el servidor donde podemos
controlarlos.
•
Controles web: son semejantes, pero ofrecen una mayor funcinalidad y pueden representar
interfaces de usuario más complejas.
•
Controles de validación: se utilizan para validar lo capturado por el usuario.
•
Controles de usuario: son aquellos programados a medida para realizar cierta funcionalidad.
10
4.3.2.
Eventos de controles de servidor:
Cuando hacemos clic en un botón, en un vínculo, llenamos un cuadro de texto, seleccionamos un
elemento de una lista,… y este está asociado a un control, generará uno o varios eventos
automáticamente, ya que ha sucedido algo que él controla. Para controlar el evento en el servidor,
necesitará indicar al control qué método utilizar.
Hay dos clases de eventos: el evento activo que necesita una acción explícita del usuario, y el
evento pasivo se puede ejecutar sin intención directa del usuario, como mover el cursor por una imagen.
Sólo los eventos activos se manejan en el servidor.
Tenemos dos formas de enviar los eventos al servidor: conforme ocurren o todos juntos en un solo
envío. Es conveniente utilizar el segundo método. Permanecen en la caché del usuario hasta que éste se
decida a enviar los datos.
Un ejemplo de un formulario web que utiliza controles de servidor es el siguiente:
<%@ Page Language="VB" %>
<script runat="server">
Sub btnEnviar_Click(obj as object, e as EventArgs)
lblMensaje.Text="Hizo clic en <b>" & obj.Text & "</b>"
End Sub
</script>
<html>
<body>
<form runat="server">
<asp:Label id="lblMensaje" runat="server" />
<asp:Button id="btnEnviar" runat="server" text="Enviar" _
onClick="btnEnviar_Click" />
</form>
</body>
</html>
En el ejemplo anterior, tenemos especificado en el controlador de servicio Button1 un método que
deberá controlar un evento, el cual es Button1_Click. Si no genero este método en alguna parte del
bloque de declaración de código, recibiré un error.
4.3.3.
Cómo enviar formularios web:
Una situación típica es que una página que se carga en el explorador muestre un mensaje de
bienvenida en un control de servidor. Este mensaje formará parte del estado visual del control y ASP.NET
lo recordará siempre. El objeto Page tiene una propiedad llamada IsPostBack que informa si el formulario
ya ha sido o no enviado. Con él se puede verificar esta propiedad y decidir si se llena o no con los
controles de servidor.
Un ejemplo de este uso es con el siguiente código:
<%@ Page Language="VB" %>
<script runat="server">
Sub Page_Load(obj as object, e as EventArgs)
If Not Page.IsPostBack Then
lblMensaje.Text = "¡Hola, mundo!"
End If
End Sub
Sub btnEnviar_Click(obj as object, e as EventArgs)
lblMensaje.Text = "Formulario enviado."
End Sub
</script>
Si tomamos el formulario web de la sección anterior, veremos que la primera vez que entremos en la
página nos escribirá en la etiqueta lblMensaje el mensaje de bienvenida, y además, cada vez que
pulsemos el botón de enviar nos rellenará la etiqueta con el mensaje de “Formulario enviado.”.
4.3.4.
Cómo guardar el estado:
11
Los formularios web guardan el estado visual de cada control en el formulario mediante campos
ocultos. Este estado visual le indica lo que se ha tecleado en el control, ya sea que éste se encuentre o
no seleccionado, qué elemento lo está,…
Hay otra forma de guardar información en los formularios web, que es utilizando el saco de estado o
“state bag”, un objeto que contiene los valores cuando se envía un formulario. Si se coloca algo en el
saco de estado y se envía el formulario, el servidor guarda la información y la devuelve al cliente cuando
finaliza su proceso. Es una forma sencilla de almacenar información personalizada que un usuario no
haya tecleado, por ejemplo un cálculo. Se accede al saco de estado mediante la variable ViewState.
Un ejemplo puede ser el de guardar la hora actual en el saco de estado tan pronto como se carga la
página, para luego poder ser mostrada tras dar en el botón “Enviar” de un formulario web.
4.3.5.
Orden de procesamiento de formularios web:
Los pasos que se siguen ante una petición a una página ASP.NET es el siguiente:
4.3.6.
•
La página se solicita del servidor web o se envía desde este.
•
Se restaura el estado visual de los controles.
•
Ocurre el evento Page_Load y se llama a la función correspondiente si existe.
•
Se controlan los eventos y se llaman a los métodos que controlan estos eventos, en el caso
de que sucedan.
•
Ocurre el evento Page_Unload y se llama a la función correspondiente si existe.
Controles HTML de servidor:
Los controles HTML ofrecen a los desarrolladores de entornos web la potencia de los formularios
web o “web forms”, pero manteniendo la familiaridad y facilidad de uso de las etiquetas HTML que
representan los campos de un formulario.
Estos controles tienen el mismo aspecto que una etiqueta HTML, a excepción de que presentan el
atributo runat con el valor server. Si queremos realizar el tratamiento de eventos con código del
servidor, utilizaremos el atributo OnServer seguido del evento, como por ejemplo OnServerClick, al cual
se le indica como valor el nombre del método que queremos ejecutar.
Los elementos HTML están totalmente basados en el cliente. Un explorador conoce el aspecto y
funcionamiento de <input type="text" /> y lo interpreta de acuerdo con eso. Los controles HTML de
servidor son elementos u objetos que se crean en éste, con propiedades, métodos y eventos que
podemos controlar. Son muy fáciles de generar: sólo hay que agregar el atributo runat="server" a
cualquier elemento HTML.
Unos ejemplos de estos controles HTML pueden ser:
<input type="Button" id="Centro" runat="server" value="Centro" OnServerClick="Click" />
<img src="foto.jpg" id="Imagen" runat="server" />
<div id="Cuerpo" runat="server"></div>
Todos estos controles pertenecen al espacio de nombres System.Web.UI.HtmlControls. A
continuación veremos cada uno de los controles que pueden ser aplicados a los elementos en HTML y a
las clases a las que corresponden, y son los siguientes:
•
HtmlAnchor: esta clase se corresponde con la etiqueta <a> que es la que nos permite crear
un hipervínculo para desplazarse a otra ubicación de la página o a otra página web.
•
HtmlButton: este control HTML generará la etiqueta <button> de HTML y se utilizará cuando
sea necesario personalizar al máximo el aspecto de un botón. Permite incluir texto con
formato, imágenes u otros controles de formularios web.
•
HtmlForm: esta clase representa a la etiqueta <form> en el servidor, y es la que nos permite
definir un formulario web que va a realizar la labor de contenedor para una serie de controles
de servidor dentro de la página ASP.NET. Todos los controles ASP.NET que deseemos enviar
al servidor (post) debemos incluirlos dentro de un control de la clase HtmlForm.
12
4.3.7.
•
HtmlGenericControl: esta clase se utilizará para representar las etiquetas HTML que no
poseen una correspondencia directa con las clases del .NET Framework, como puede
suceder con las etiquetas <span>, <div> o <body>, entre otras.
•
HtmlImage: esta clase permite utilizar la etiqueta <img> de HTML en el servidor, por lo que
vamos a ser capaces de manejar imágenes.
•
HtmlInputCheckBox: se corresponde con la etiqueta <input type="checkbox" />, y gracias
a él tenemos acceso en el servidor a este tipo de elemento. Para determinar si se selecciona
el control, se ha de utilizar la propiedad checked.
•
HtmlInputRadioButton: el control HTML que es instancia de esta clase generará en el cliente
una etiqueta <input type="radio" />, permitiendo al código de servidor interactuar con
este elemento. No tiene funcionalidad integrada para mostrar un título para el botón de opción.
Para determinar si el control HtmlInputRadioButton está seleccionado, se ha de mirar con la
propiedad checked.
•
HtmlInputText: se corresponde con las etiquetas <input type="text" /> e <input
type="password" />. El tipo de caja de texto que se genera viene dado por el valor de la
propiedad type.
•
HtmlSelect: Este control HTML se corresponde con una lista desplegable del lenguaje HTML,
es decir, con una etiqueta <select>.
•
HtmlTable: este control se corresponde con una tabla del lenguaje HTML, es decir, permite el
acceso desde el código de servidor a una etiqueta <table>. Esta clase posee una colección
llamada Rows, que contiene objetos de la clase HtmlTableRow. Las propiedades que se
pueden emplear son: Border para especificar el ancho del borde (en píxeles), BgColor para
obtener o establecer el color de fondo, CellPadding para obtener o establecer la cantidad de
espacio entre el contenido de una celda y el borde de la misma, y CellSpacing para obtener o
establecer la cantidad de espacio (en píxeles) entre las celdas adyacentes.
•
HtmlTableRow: clase relacionada con la anterior y que es el control HTML que permite
manipular una fila de una tabla. Esta clase posee una colección llamada Cells, que contiene
objetos de la clase HtmlTableCell.
•
HtmlTableCell: clase que permite el acceso a las celdas de una tabla, es decir, se
corresponde con las etiquetas <td> y <th>.
Controles web de servidor:
Los controles web ofrecen un mayor nivel de abstracción que los controles HTML, y su modelo de
objetos no refleja la sintaxis HTML necesariamente. Cuando la página se carga en el navegador, el
control web determina el tipo de navegador que ha realizado la petición, y de acuerdo con esta
información genera el código HTML apropiado. Podemos decir que en este aspecto se trata de controles
inteligentes.
Son similares a los controles HTML de servidor. Se generan en el servidor y permiten crear
interfaces de usuario complejas con facilidad. Necesitan el atributo runat="server", no es necesario que
se relacionen con elementos HTML y pueden representar elementos más complejos de la interfaz de
usuario.
Para crear un control web, se utiliza la siguiente sintaxis:
<asp:Control id="nombre" runat="server" />
<asp:RadioButtonList id="rblEdad" runat="server"> … </asp:RadioButtonList>
La clase de base System.Web.UI.WebControls.WebControl contiene todas las propiedades
comunes. La mayoría de los controles web de servidor derivan de esta clase.
Los controles web básicos proporcionan la misma funcionalidad que sus correspondientes controles
HTML de servidor, pero además incluyen métodos, eventos y propiedades adicionales que se puede usar
para programar.
Los controles web se pueden clasificar en cuatro tipos: controles web intrínsecos (que son los
equivalentes a los controles HTML), controles web de lista, controles web ricos y controles web de
13
validación. Los beneficios que se desprenden de utilizar controles web intrínsecos sobre los controles
HTML vistos anteriormente son los siguientes:
•
Se ofrece una convención de nomenclatura para controles similares.
•
Existen propiedades comunes para todos los controles, ofreciéndose un modelo de objetos
más robusto.
•
Se incluyen propiedades específicas de los controles.
•
Se genera código HTML específico para cada navegador web.
La similitud con los controles HTML es que para permitir hacer referencia a los controles dentro del
código fuente de la página, se debe utilizar el atributo id. Las diferencias con estos las tenemos en: la
declaración de los controles, algunos nombres de las propiedades cambian y que en los métodos para el
tratamiento de eventos de la pulsación de un botón del ratón en los controles HTML utilizamos la
propiedad OnServerClick, mientras que en los controles web utilizamos la propiedad OnClick.
En los siguientes puntos nos vamos a referir a los diferentes controles web de servidor que pueden
ser empleados, junto con la explicación de utilización. Estos son los siguientes:
•
Button: este control web representa un botón y se corresponde con la etiqueta <input
type="submit" />, es decir, un botón que envía el contenido de un formulario al servidor.
Esta clase se corresponde con el control web <asp:Button>.
•
CheckBox: es el control web que se corresponde con la etiqueta <input type="checkbox"
/> del lenguaje HTML. La propiedad AutoPostBack establece un valor que indica si el estado
del control CheckBox se devuelve automáticamente al servidor cuando se hace clic en él.
•
CheckBoxList: este control permite utilizar una lista de selección múltiple de elementos
CheckBox. Este objeto posee una colección Items que contiene todos los objetos CheckBox.
Se puede especificar la distribución de los CheckBox en la página a través de las propiedades
RepeatDirection y RepeatLayout.
•
DropDownList: este control web representa una lista desplegable, y se corresponde con la
etiqueta <select> de HTML. Cada uno de los elementos del control DropDownList se indica
con un objeto de la clase ListItem.
•
HyperLink: este otro control web representa un enlace en la página, por lo tanto generará en
el cliente una etiqueta <a>.
•
Image: control web que representa una imagen dentro de una página ASP.NET, y que
generará como resultado de su ejecución una etiqueta <img> de HTML. Para indicar la imagen
que deseamos mostrar se utilizará la propiedad ImageURL.
•
ImageButton: este control es muy similar al anterior, pero además de mostrar una imagen
posee la característica adicional de funcionar como un botón de tipo submit, es decir, al pulsar
el botón se envían los contenidos del formulario al servidor. Este control genera en el cliente la
etiqueta HTML <input type="image">.
•
LinkButton: este control va a representar un botón que presenta un estilo similar a los enlaces.
El control LinkButton presenta una apariencia similar a un control HyperLink, pero sin embargo
ofrece la misma funcionalidad que un control Button, es decir, presenta un texto a modo de
enlace que al pulsarlo enviará el formulario en el que se encuentre al servidor.
•
ListBox: este nuevo control web representa una lista de selección sencilla o múltiple que se
corresponde con una etiqueta <select> en el código HTML. Es similar al control
DropDownList, pero en este caso se muestran varios elementos de la lista y se permite la
selección múltiple. Métodos que se pueden emplear son: Rows con el que indicamos el
número de filas visibles, y SelectionMode con el que indicamos si se permite la selección
múltiple, mediante el valor Multiple, o bien la selección simple mediante el valor Single.
•
Panel: este otro control web intrínseco se utiliza para agrupar controles y realizar la función de
contenedor de los mismos. El control Panel posee una propiedad llamada Controls que es una
colección que contiene todos los controles incluidos dentro del objeto Panel.
•
PlaceHolder: control web que realiza también la función de un contenedor de controles web,
pero en este caso no genera ningún código HTML, Se utiliza para añadir controles web de
14
forma dinámica en la página ASP.NET en un punto determinado, y para ello se utiliza su
propiedad Controls.
•
RadioButton: este control representa un botón de opción que se corresponde con el elemento
<input type="radio" /> de HTML. Muestra la misma funcionalidad, es decir, permite
seleccionar una opción dentro de un mismo grupo de opciones. Las opciones se agrupan
mediante la propiedad GroupName.
•
RadioButtonList: este control permite utilizar una lista de selección múltiple de controles
RadioButton. Este objeto posee una colección Items que contiene todos los objetos
RadioButton. Se puede especificar a través de las propiedades RepeatDirection y
RepeatLayout la distribución de los RadioButton en la página. Como se puede apreciar es
muy similar al control CheckBoxList, pero en este caso se utilizan controles RadioButton.
•
Table, TableRow y TableCell: estos controles web se encuentran muy relacionados entre sí y
mediante la utilización de todos ellos podremos generar tablas en HTML. El control web Table
se corresponde con una tabla del lenguaje HTML, es decir, permite generar tablas del
lenguaje HTML. Esta clase posee una colección llamada Rows, que contiene objetos de la
clase TableRow.
Los controles web ofrecen un completo soporte para las hojas de estilo, es decir, podemos aplicar
los estilos de forma similar a como lo hacemos en HTML para personalizar el aspecto de nuestros
controles.
Existen tres formas para aplicar estos estilos:
4.3.8.
•
Mediante propiedades específicas de cada control, similar al uso en HTML.
•
Mediante la propiedad CssClass, que accede a una clase del la lista de estilos CSS.
•
Mediante la propiedad Style, que es una colección que nos permite asignar valores a las
distintas propiedades del estilo del control.
Cómo enviar datos inmediatamente:
Por ejemplo, imaginar un formulario que muestra las provincias de un país. Una vez seleccionada
una provincia, se envía el formulario, se realiza cierto procesamiento y se filtra la lista de ciudades de esa
provincia.
Se puede enviar datos inmediatamente con la propiedad AutoPostBack de los controles web,
cuando seleccionamos esta a true, lo cual indica al control que envíe los datos tan pronto como ocurra el
evento.
Un ejemplo de esto podría ser el siguiente:
<asp:TextBox id="tbNombre" runat="server" _
OnTextChanged="ControladorDeNombre" AutoPostBack="true" />
Por lo tanto, cuando ocurra el evento OnTextChanged, es decir, que cuando cambie el texto del
TextBox, se autoenviará la página con los datos del formulario web a la dirección indicada en el <form>.
15
5. INCLUSIÓN DE ARCHIVOS EXTERNOS DESDE EL SERVIDOR
Un archivo incluído desde el servidor es una forma de separar código de una página, como por
ejemplo, tener por un lado el código dinámico de ASP.NET y por otro el código en HTML, o tener en
archivos diferentes el encabezado, el pie de página y el documento principal. Estos se pueden incluir a
través de una línea sencilla de instrucción.
Los dos tipos de inclusiones que pueden hacerse son las siguientes:
<!-- #include file="../../includes/archivo1.aspx" -->
<!-- #include virtual="/includes/archivo1.aspx" -->
La diferencia entre ambos consiste en que con file se accede a una carpeta que está al mismo nivel
del archivo donde estás haciendo la referencia para el include, mientras que con virtual le estás diciendo
que tienes una carpeta virtual que se llama includes y no importa el nivel donde te encuentres ya que
tomará la ruta virtual para localizar al archivo.
Pongamos un ejemplo sobre el uso de la inclusión de archivos a la hora de separar diferentes partes
de una página web, en cuanto a su estructura externa:
•
Encabezado de la página en encabezado.aspx:
<a href="indice.aspx"><img src="encabezado.jpg" alt="Principal" /></a><hr />
<a href="indice.aspx">Principal</a>
<a href="fin_sesion.aspx">Finalizar sesión</a>
•
Página principal de la aplicación en indice.aspx:
<%@ Page Language="C#" %>
<script runat="server">
private void Page_Load(object obj, EventArgs e) {
/* hacemos algo en la lectura del documento */
}
</script>
<html>
<body>
<!-- #include file="encabezado.aspx" -->
<p>¡Hola a todos!</p>
</body>
</html>
Tras la lectura del archivo indice.aspx, ASP.NET inserta el contenido de encabezado.aspx antes de
procesar cualquier comando, y en la salida del código en HTML aparecen ambos unidos, como si fuera
una página HTML solamente. El archivo encabezado.aspx se encuentra en el mismo directorio que el
archivo indice.aspx, por eso se emplea file y sin ningún tipo de ruta absoluta.
16
6. BIBLIOGRAFÍA Y REFERENCIAS
Prácticamente la totalidad de la información que ha sido extraída para este documento está sacada
de una fuente en concreto: Internet. A través de la lectura y comprensión de varios artículos, manuales y
tutoriales que están a disposición de cualquier usuario, se ha abstraído toda la información necesaria
para la creación de este documento.
Hay multitud de fuentes bibliográficas y referencias consultadas, pero las más relativas las
expondremos a continuación.
Manuales de ASP.NET completos:
•
http://es.gotdotnet.com/quickstart/aspplus/doc/quickstart.aspx
(último acceso el día 10 de enero de 2007)
•
http://www.es-asp.net/tutoriales-asp-net/tutorial-0-61.aspx
(último acceso el día 10 de enero de 2007)
Manuales conceptuales de ASP.NET:
•
http://www.miliuco.net/aspnet/aspnet_intro.html
(último acceso el día 10 de enero de 2007)
•
http://www.gamarod.com.ar/articulos/introduccion_a_aspnet.asp
(último acceso el día 10 de enero de 2007)
•
http://es.wikipedia.org/wiki/ASP.NET
(último acceso el día 10 de enero de 2007)
•
http://www.adrformacion.com/cursos/aspnet2/leccion3/tutorial1.html
(último acceso el día 10 de enero de 2007)
Diferencias entre ASP y ASP.NET:
•
http://www.microsoft.com/spanish/msdn/articulos/archivo/191001/voices/aspnetmigrissues.asp
(último acceso el día 10 de enero de 2007)
•
http://www.programacion.net/asp/articulo/aspnet_quees/
(último acceso el día 10 de enero de 2007)
•
http://www.desarrolloweb.com/manuales/32/
(último acceso el día 10 de enero de 2007)
Ejemplos en ASP.NET:
•
http://msdn.microsoft.com/library/spa/default.asp?url=/library/SPA/cpqstart/html/cpsmpASPNE
TQuickStart.asp
(último acceso el día 10 de enero de 2007)
Algunos de estos manuales contienen múltiples ejemplos que pueden ser usados para una posterior
comprensión y práctica de los conceptos adquiridos.
También incluyen descripciones más ampliadas de muchos de los puntos tratados en este
documento, así como otros que por su elevada complicación no han sido expuestos, ya que se pretende
introducir al lector en la tecnología ASP.NET con sus conceptos lo más básicos posibles y a través de
esquemas simples y ejemplos sencillos que sirvan para una mejor búsqueda de información posterior.
17