Ejemplo.

Preparar un entorno de pruebas antes de hacer ejemplos

Poner en marcha Visual Web Developer 2012 y le decimos "Crear nuevo proyecto":

 

Hacemos clic en "Web" en la parte izquierda y en la derecha seleccionamos una "Aplicación web vacía de ASP.NET". Fíjate que dice que será una aplicación Web. Además el lenguaje con que escribiremos será el que pone en la columna de la derecha "Visual Basic".

Creará la aplicación Web con su fichero de configuración y una página de propiedades del proyecto en "My project".

 

En el explorador de Windows se podrá ubicar las carpetas y archivos del proyecto que se está creando.

Ahora vamos a añadir un formulario Web a nuestra aplicación, que es como se llama a una página ASP.NET normal. Pulsaremos con el botón derecho en la raíz del proyecto para indicar:

Como nuevo elemento seleccionaremos:

Que quedará añadido a nuestro proyecto:

 

Si abrimos el explorador de archivos veremos que ahora tiene tres archivos más que antes, a pesar que el explorador de archivos sólo nos muestra uno más "webform1.aspx":

 

Uno de ellos ya lo conoces, ya que se trata del fichero de código asociado y que es donde pondremos nuestro código Visual Basic .NET y que se llama "Webform1.aspx.vb". El otro fichero ya lo trataremos más adelante pero de momento diremos que es el que se encarga del diseño de la página.

Para acceder a la página de código .vb simplemente seleccionaremos:

 

O con el botón derecho, seleccionando la opción de "Ver código". En la pantalla de edición veremos entonces la sección de código en lugar de la de HTML:

 

Como ves, cada ventana se queda como una solapa en la parte superior. Nos moveremos entre las dos solapas muy a menudo, así que es mejor que tengamos abiertas las dos.

Ahora vamos a editar la página "webform1.aspx", así que la seleccionamos haciendo doble clic:

Nos mostrará el contenido de la página Web, pero queremos ir a la parte de diseño, así que seleccionamos en la parte inferior:

Ahora tenemos la página Web en modo de diseño, es decir, lo que veremos en el navegador. La página de código .vb no tiene vista de diseño porque solo contendrá el código Visual Basic.Net asociado a esta página. Sigamos con el ejemplo para que veamos como queda todo asociado.

El siguiente paso será añadir tres "controles" a nuestra página Web. Los controles son los elementos que podemos añadir a la página Web: cuadros de texto, literales de texto, botones, cuadros de lista... y muchos más. Podemos verlos en el "Cuadro de herramientas" que aparece plegado a la izquierda. Así que le haremos clic:

 

Como es uno de los cuadros que más utilizaremos, pulsaremos en el icono señalado con una flecha. Esto hace que se quede anclado en la página y evita que se cierre automáticamente. Si no tienes este cuadro o lo has cerrado accidentalmente puedes mostrarlo desde esta opción del menú:

 

Si ahora nos fijamos con detenimiento, veremos la cantidad de controles que tenemos disponibles para utilizarlos en nuestras páginas Web. Además se encuentran estructurados en varias secciones según su funcionalidad:

 

Además podemos añadir nuevos controles. Imagina que adquirimos una aplicación para nuestra empresa que genera gráficos estadísticos complejos en ASP.NET. Con toda seguridad nos creará un grupo de controles nuevo en el editor para poder utilizarlos en nuestro proyecto.

Una vez hemos desplegado este cuadro de herramientas y lo hemos anclado para dejarlo fijo vamos a arrastrar un control de tipo "Label" a nuestra página Web y lo haremos en la pequeña zona sombreada y que corresponde a un "formulario". Los formularios son la base de las páginas ASP.NET y habitualmente colocaremos ahí todos los controles. Verás la zona haciendo clic:

 

Arrastramos ahora el control "Label" a esa zona:

 

Nos mostrará el control de este tipo que hemos añadido. Hacemos clic en el editor para pulsar la tecla de retorno o "intro" para pasar de línea y arrastramos dos controles de etiqueta o "label" a nuestro formulario:

 

Ya tenemos la página creada. Contiene un formulario con tres controles de etiqueta. En general veremos dos cosas al hacer clic en los controles que vayamos incorporando a nuestra página. Por un lado queda seleccionado indicando el nombre y tipo del control:

 

Y por otro lado debajo del explorador de proyectos tenemos las "propiedades" del elemento seleccionado:

 

En este caso es la tercera etiqueta que se llama "label3" con su lista de propiedades: tipo de letra, color, si tiene recuadro alrededor, ... de momento no tocamos nada, estamos haciendo nuestra primera página completa. Ya veremos con mucho más detalle los controles más adelante.

Vamos a ver en la página que código nos ha añadido para representar estos tres controles. Pulsamos en la parte inferior "código":

Veamos el código HTML que ha insertado el editor:

 

Las etiquetas "body" indican el cuerpo o contenido de la página Web. Dentro vemos las del formulario, representado por "<form ..>" y debajo </form>. Por último en la parte central los tres controles que tienen estas propiedades por defecto:

asp:Label. Indica que se trata de un control ASP.NET de tipo "Label" ID="label1". Nombre único del control. Por defecto le llama como el tipo de control con

número sucesivo: "Label1, Label2 y Label3" ruan="server". Indica que este control se debe ejecutar en el servidor. Así es como será

habitualmente ya que ASP.NET siempre se ejecuta en el servidor Text="Label". Es la propiedad que indica el texto que debe escribir en pantalla este

control de etiqueta. Por eso en pantalla vemos que pone "label" en los tres:

 

AnotaciónLas etiquetas <form id="form1" runat="Server"> y </form> son la parte importante de la programación en las páginas. Dentro de estas dos etiquetas pondremos los controles con lo que queremos  trabajar en el servidor.  Eso lo que indica "runat=Server", es decir lo que pongamos aquí lo ejecutará el servidor.

Vamos a hacer una prueba de esta propiedad "text" para ver si es cierto que contiene el texto que mostrará en pantalla. Volvemos a la edición del código de la página y cambiamos el literal de la propiedad "Text" por "etiqueta1, etiqueta2 y etiqueta3". Lo editaremos y escribiremos a mano:

 

Hacemos clic para ver la vista diseño y vemos:

 

Nos ha actualizado su texto por defecto. Una cosa mas, si hacemos clic en cualquiera de las etiquetas podremos ver en las propiedades la propiedad "Text" con el valor que hemos introducido:

 

En el caso de la segunda etiqueta, su nombre ID, sigue siendo "Label2" pero hemos cambiado su propiedad "Text" que debajo nos indica que "text" es "texto que se va a mostrar en la etiqueta". Como vemos, todo está relacionado.

El ejemplo que queremos hacer es precisamente acceder a esa propiedad del objeto de etiqueta y cambiarlo en tiempo de ejecución, es decir cuando se ejecute la página.

Para hacer esto haremos lo mismo que en el ejemplo del primer tema pero ahoya ya entendiendo un poco más el funcionamiento. Por un lado nos vamos a ir a la página donde escribiremos nuestro código que queremos que ejecute. Pulsamos en el botón de "Ver código" en el explorador de proyectos:

 

Tendremos ahora nuestra página de código:

 

En la primera línea pone "Public Class WebFor1". Veremos más adelante que significa pero como adelanto decirte que define que es una página que se puede acceder desde el exterior "public" y que genera un objeto de la clase "WebForm1".

Cuando se crea una página se producen varios eventos internos que podemos tratar uno a uno. El más utilizado es el llamado "Load" que se produce cuando se carga la página en el navegador. (Posiblemente el editor ya te lo habrá creado). Es el sitio perfecto para poner código que queremos que ejecute al carga la página. Si no lo tienes ya en pantalla, seleccionaremos que queremos ver los eventos de la página Web desde el desplegable de la izquierda:

Como la página se llama "Webform1" nos muestra:

 

Los eventos que se pueden producir en la página están en "Webform1 eventos". Como curiosidad podemos ver que tenemos debajo los objetos de nuestra página: un formulario y tres etiquetas. Una vez seleccionado los eventos de la página elegimos "Load" en el cuadro de la derecha:

Esto nos genera un procedimiento (un grupo de instrucciones bajo una nombre) donde podemos escribir el código que queremos que se ejecute al cargar la página. Todos estos conceptos los veremos con detalle más adelante, pero necesitamos ejecutar este ejemplo para hacer pruebas con el código de los ejemplos. Al seleccionar "Load" nos mostrará unas instrucciones en las que escribiremos dentro:

 

Le estamos indicando que cuando cargue la página asigne a la propiedad "Text" de cada uno de los controles el texto que le estoy indicando. Así que sustituirá el que hemos puesto en el diseño por este nuevo texto. Vamos a ejecutarlo. Pulsamos en el botón de depurar, que indica además con que navegador lo ejecutará:

Y al cabo de unos segundos tendremos la página:

 

Pulsa para ver cómo ejecutar la página

 

Paramos la ejecución de la página con el botón:

 

Ya hemos preparado un ejemplo completo. Sobre este vamos a realizar algún ejercicio para ver el funcionamiento de las variables.

Inscríbete ahora y accede a 2 unidades gratisUna vez inscrito, te enviamos un email con los datos de acceso y puedes comenzar el curso de ASP.NET 2012 realizando 2 unidades. Podrás acceder a videotuoriales, actividades multimedia, ejercicios prácticos, consultar al tutor, etc..

Ejemplo

1. Creamos una nueva página que se llame "variables.aspx" similar al anterior con tres controles label . Primero creamos un nuevo "Web Form" o formulario Web desde la opción de "Agregar nuevo elemento". Esta vez le ponemos un nombre más descriptivo: "variables.aspx"

Vemos que nuestro proyecto ahora tiene ya más de una página Web:

 

Editamos la página y ponemos los tres controles de tipo "Label":

2. En la parte de la carga de la página ponemos este código:

 

Es decir, declaramos tres variables de tres tipos distintos, le asignamos unos valores y se lo asignamos a los controles label. Pondremos la vista de "código" de esta página, así que la seleccionamos y pulsamos en "Ver código":

 

Por defecto suele poner ya el procedimiento "Load" pero si no lo tuviera selecciona los eventos en el desplegable de la izquierda y luego el "Load" en el de la derecha, tal y como hicimos en el ejemplo anterior.

2. Ejecutamos la página:

 

3. Detenemos la ejecución, vamos al código y añadimos esta asignación:

El editor ya nos está proporcionando mucha ayuda al escribir el código, lo iremos viendo poco a poco. Lo que hemos hecho es utilizar una variable "direccion" sin declararla. Vamos a ejecutar la página:

 

Nos avisa de que tenemos un error. Le decimos que no la queremos ejecutar y podremos ver en el editor:

:

Cuando estábamos editando el código y justo antes de darle a ejecutar, nuestro editor ya nos avisaba de algo. Normalmente los errores o alertas en el código se marcan subrayadas, en ese caso podemos poner el cursor encima para ver que está pasando:

 

Pulsamos en la admiración de alerta para ver que nos quiere indicar. En este caso dice claramente que no está declarada y nos propone algunas acciones que de momento no haremos caso. Por lo menos ya hemos hecho algo bien y algo mal para ver como se comportaba nuestro editor y ha resultado bastante fácil. Borramos esa asignación que hemos hecho con "direccion" para dejar el ejemplo correcto.