ASP.NET, HTMLControls y WebControls

ASP.NET hereda de su antecesor el nombre porque en lo demás es un cambio radical tanto en la forma de programación como en la de trabajo interno, es una nueva plataforma de desarrollo web. Ya no es un lenguaje interpretado como las ASP sino que es un lenguaje compilado basado en el entorno .NET. El modelo de objetos de ASP.NET es bastante distinto del modelo de ASP, es más estructurado y orientado a objetos. ASP y ASP.NET son diferentes aunque pueden convivir juntas porque la dll que ejecuta las ASP (asp.dll) no interviene en .NET. ASP puede trabajar perfectamente en un entorno .NET, ambos no son del todo compatibles, aunque su sintaxis sea muy parecida, por ejemplo un paso directo de parámetros desde páginas asp a páginas aspx no es posible, pero si es posible tener un proyecto que este desarrollado en ASP y ASP.NET.

También ha cambiado el acceso a datos, en ASP.NET tenemos ADO.NET un nuevo modelo de objetos para acceso a datos, no disponible para asp. Por supuesto desde ASP.NET podemos utilizar el antiguo modelo de objetos de ADO (versión 2.7) pero seria desaprovechar el potencial del nuevo lenguaje. De hecho pueden utilizarse los componentes COM dentro de .NET y así poder utilizar dll que ya tenemos desarrolladas con los nuevos desarrollos en .NET.

Crear un proyecto con Visual Studio .NET

Antes de empezar a trabajar con los nuevos controles de ASP.NET tenemos que crear un proyecto donde desarrollar las páginas ASP.NET, para esto abrimos Visual Studio .NET, también podemos utilizar el nuevo entorno de desarrollo que Microsoft a puesto a disposición de los usuarios, ASP .NET Web Matrix, este entorno es gratuito y se pueden desarrollar aplicaciones ASP.NET en VB.NET o C# con conexiones a bases de datos y múltiples opciones aunque es más limitado que Visual Studio .NET. En este artículo siempre haré referencia a Visual Studio .NET y no a ASP.NET Web Matrix que requeriría otro artículo para explicar todo lo que puede llegar hacer. Si queréis más información o bajaros el entorno de desarrollo de ASP .NET Web Matrix podéis hacerlo gratuitamente en el web asp.net (al final de la página esta el enlace).

Desde Visual Studio .NET seleccionamos la opción del menú Archivo -> Nuevo -> Proyecto y seleccionamos Tipos de proyecto (opción de la izquierda) proyectos de Visual C# y una plantilla (opciones de la derecha) Aplicación Web ASP.NET (Imagen 1), como podemos ver hay múltiples plantillas para desarrollar diferentes clases de aplicaciones. Otra de las opciones que podemos elegir en esta pantalla es si queremos agregar el nuevo proyecto a una solución existente, con esta opción seleccionada podemos tener en nuestra solución varios proyectos, o cerrar la solución existente al abrir el nuevo proyecto. Una solución no es más que uno o un conjunto de proyectos agrupados en el explorador de soluciones. Seleccionamos también el nombre del servidor o la IP donde lo alojaremos y el nombre del directorio (es mejor poner el nombre del servidor si trabajáis en local para poder depurar). Una vez creado el proyecto aparece el entorno de desarrollo de Visual Studio .NET (imagen 2).

A través del “Explorador de soluciones”, imagen 3, vemos los archivos que nos ha creado Visual Studio .NET. Nuestro archivo de trabajo será “WebFrom1.aspx”, que podemos cambiarle el nombre, también utilizaremos otro archivo que no aparece en el explorador pero que si hacemos doble clic con el botón izquierdo del ratón encima de éste archivo, aparecerá uno nuevo llamado “WebForm1.aspx.cs”, éste es el archivo de código c# (imagen 4). Para que aparezcan todos los archivos en el explorador de soluciones pulsaremos el segundo botón que hay sobre el explorador de soluciones empezando por la derecha, si nos posamos sobre el vemos la etiqueta “Mostrar todos los archivos”.

Otra de las herramientas que incorpora Visual Studio .NET es el cuadro de propiedades al estilo Visual Basic. A través de él o si lo preferimos mediante código deberemos dar valores a los atributos de las etiquetas HTML o de los controles WebForms.

Ahora que ya tenemos el entorno de desarrollo preparado lo que nos queda por hacer es ir codificando nuestras ASP.NET.

Controles HTML (HTMLControls)

Los controles HTML pertenecen a la jerarquía del namespace System.Web.UI.HTMLControls (imagen 1), éstos de forma predeterminada no se pueden utilizar como controles de servidor mediante programación, pero esto podemos arreglarlo incluyendo el atributo: runat=”server”, además debemos incorporar si no lo tiene el atributo id, único para cada control. Este atributo id permite hacer referencia al control mediante programación. Pero mejor veamos un ejemplo de la sintaxis de estos controles, utilizando el proyecto que hemos creado en la página anterior (si no lo tenéis creado lo podéis crear ahora).

Una vez creado el proyecto aparece en el editor por defecto la pagina “WebForm1.aspx” en modo diseño, esta página será donde se escriba y coloquen los controles HTML, si se pulsa el botón “HTML” en la parte inferior de la página aparece el código fuente HTML. Cuando creamos una página .aspx a través de una plantilla, Visual Studio .NET siempre crea un esqueleto HTML (imagen 2). Ahora si volvemos al modo diseño, pulsando sobre el botón diseño en la parte inferior de la página podremos arrastrar controles HTML, para el ejemplo y en sucesivos ejemplos seleccionaremos los controles “HTML” desde el “cuadro de propiedades” (Imagen 3).
Seleccionamos la etiqueta “label” y lo arrastramos a la página, si miramos el modo HTML vemos que Visual Studio .NET ha generado el siguiente código:

<DIV style=”DISPLAY: inline; Z-INDEX: 101; LEFT: 156px; WIDTH: 70px; POSITION: absolute; TOP: 99px; HEIGHT: 15px” ms_positioning=”FlowLayout”>Label</DIV>

Como podemos ver Visual Studio .NET ya ha colocado el control dentro de la etiqueta <form> que incluye el atributo runat=”server”. Nuestra etiqueta “Label” no incluye este atributo, así que para que se ejecute en el servidor debemos ponerla al igual que debemos poner el atributo id para hacer referencia desde código. Podemos incluir estos dos atributos desde código o pulsando con el botón derecho del ratón sobre la etiqueta y seleccionando “Ejecutar como control de servidor” (imagen 4). Una vez hecho esto ya podemos codificar la etiqueta desde código c#, para incluir código en el control HTML pulsamos doble clic sobre el control y aparece la página donde escribiremos el código “WebForm1.aspx.cs” (imagen 5), recordad que esto que acabamos de hacer para la etiqueta label debemos hacerlo para todos los controles HTML que utilicemos del lado servidor. Como ejemplo podemos cambiarle el nombre a la etiqueta incluyendo la siguiente linea dentro de la función Page_Load:

DIV1.InnerText = “Etiqueta de pruebas”;

Una vez hecho esto pulsamos ctrl. + F5 para compilar y ejecutar el navegador y ver el resultado de la prueba.

Los controles HTML que disponemos para trabajar se corresponden en su mayoría a los campos de un formulario, es decir, button, submit, reset, text, textarea, radio, checkbox, listbox, etc.
Cada uno de los controles cuando los seleccionamos y lo utilizamos desde el servidor tienen un evento por defecto que se ejecutará con una acción del ratón, por ejemplo si utilizamos un control Button y pulsamos doble click sobre él veremos que en el fichero de código nos aparece las siguientes lineas:

private void Button1_ServerClick(object sender, System.EventArgs e)
{
}

o si utilizamos un checkbox su evento asociado será:

private void Checkbox1_ServerChange(object sender, System.EventArgs e)
{
}

Dentro de estos métodos pondremos nuestro código asociado al control.

Pero los HTMLControls son un poco limitados, los WebControls son más flexibles, tienen más opciones (métodos y propiedades) de programación.

Controles Web Controls.

Los controles WebControls pertenecen a la jerarquía del namespace System.Web.UI.WebControls (imagen 1), éstos a diferencia de los HTMLControls son más flexibles a la hora de programar, disponen de más opciones y son más completos para desarrollar aplicaciones web. Los WebControls cuando se seleccionan y se utilizan en páginas aspx ya están disponibles para ser utilizados desde el lado del servidor y se pueden programar directamente a diferencia de los HTMLControls que por defecto no lo están.

Veamos un ejemplo de la utilización y funcionamiento de los WebControls. Para utilizar los WebControls debemos seleccionarlos (seleccionamos el control que queremos utilizar) desde el “cuadro de herramientas” dentro de la ficha Web Forms (imagen 2). Seleccionamos para el ejemplo dos etiqueta (Label), una caja de texto (TextBox), un radioButtonList y un botón (button) como muestra la imagen 3.

Si miramos el código HTML (pulsando el botón HTML en la parte inferior de la página) vemos que el editor de Visual Studio .NET ya nos ha colocado código asociado a los controles que hemos seleccionado.

Código generado para el TextBox:

<asp:TextBox id=”TextBox1″
style=”Z-INDEX: 102; LEFT: 118px; POSITION: absolute; TOP: 89px”
runat=”server”>
</asp:TextBox>

Código generado para el Button:
<asp:Button id=”Button1″
style=”Z-INDEX: 103; LEFT: 21px; POSITION: absolute; TOP: 169px”
runat=”server” Text=”Button”>
</asp:Button>

Igual que los HTMLControls, los WebControls van incluidos dentro de la etiqueta <form> y todos empiezan por <asp: …, esta etiqueta identifica al control como un WebControl. Como podemos ver, en estos controles, los atributos “runat=server” e “id=Nombre_del_control” ya están colocados por defecto por el propio editor, nosotros podemos cambiar el nombre del “id” si queremos que en lugar de llamarse “TexBox1” se llame “EntradaDeDatos”, ésto lo podemos hacer desde el cuadro de propiedades de Visual Studio .NET o desde código HTML. Visual Studio .NET siempre pone un nombre a estos controles acabados en un numero, por ejemplo, tenemos dos botones el “Id” del primero será Button1 y el del segundo Button2.

Lo primero que haremos al empezar a codificar nuestro formulario será darle más opciones a nuestra lista de selección de radio buttons, para añadir opciones en un radioButtonList lo haremos desde el cuadro de propiedades seleccionando la opción “Ítems” (imagen 4) con el control seleccionado en la página aspx, una vez pulsado este botón (ítems) aparece la imagen 5 donde daremos de alta mas “ListItems”. Este cuadro está dividido en dos parte, la izquierda donde está los Ítems que vamos creando y en la derecha las propiedades de cada Item, que constan de tres elementos: Selected, Text y Value, estos elementos corresponden a las mismas propiedades del formulario en HTML.

Selected (true/false) -> Indica si el texto será el seleccionado por defecto.
Text -> Texto que se muestra por pantalla.
Value -> Valor que se envía al enviar el formulario.

Todas estas propiedades del cuadro de propiedades (imagen 4), no solo las del RadioButtonList sino todos los controles WebControls, son accesibles desde código. A nivel de programación y se pueden modificar u obtener a medida que el programa se ejecuta.

Si pulsamos el botón “agregar” vemos que se añade un nuevo Item (ListItem) y podemos asignarle las propiedades que deseemos, podemos agregar tantos ListItems como necesitemos en nuestro formulario.

Este mismo cuadro de diálogo que aparece para añadir Ítems al RadiButtonsList es el mismo que usaremos si queremos utiliza un ListBox, un CheckBoxList o un DropDownList (que es una lista de selección simple).

Ahora pasamos a trabajar desde código C#, el trabajo en HTML ya lo tenemos todo realizado y nos queda codificar el formulario, enviarlo y obtener unos resultados.

Podemos codificar las páginas aspx de dos formas, la primera y como lo hariamos en asp utilizamos el editor HTML para incluir nuestro código en la página entre las etiquetas <script>:

<script language=”C#” runat=”server”>
Codigo C#
</script>

La segunda y la más recomendada porque de esta forma encapsularemos el código y lo separaremos del código HTML es utilizar el fichero .cs que cada página apsx incorpora, en el ejemplo si la página se llama “WebForm1.aspx”, pulsando con el ratón sobre el editor aparecerá el fichero “WebForm1.aspx.cs”, donde codificaremos nuestro código.

Lo primero que codificamos es el evento Page_Load que es el evento que primero se ejecuta cada vez que cargamos una página aspx, aquí inicializaremos las variables de la página, en este caso los controles etiqueta y radio button:

private void Page_Load(object sender, System.EventArgs e)
{
// Inicializamos los valores de las etiquetas
Label1.Text = “Introducir un nombre:”;
Label2.Visible = false;

// Seleccionamos a la mujer por defecto en el
// RadioButtonList
RadioButtonList1.Items[0].Selected = true;
}

Después codificamos el envió del formulario, para ésto, creamos un evento Button_Onclick, la forma de crearlo es muy sencilla, no hay que escribir nada de código, basta con pulsar con el ratón doble click sobre el control Button en la página aspx (en modo diseño) y nos aparecerá el evento el la página aspx.cs:

private void Button1_Click(object sender, System.EventArgs e)
{
// Creamos un string para poner el texto que mostraremos
// por pantalla
string TextoVisualizar = “”;

// Rellenamos el string con el texto y con el valor
// que han introducido en el TextBox
TextoVisualizar = “El nombre introducido es : ”
+ TextBox1.Text + ” y es : “;
//
// Obtenemos el valor seleccionado del radio button
// y lo añadimos al texto
if (RadioButtonList1.Items[0].Selected == true &&
RadioButtonList1.Items[1].Selected == false)
TextoVisualizar += RadioButtonList1.Items[0].Text;
else
TextoVisualizar += RadioButtonList1.Items[1].Text;

// Hacemos visible la segunda etiqueta y mostramos el texto
Label2.Visible = true;
Label2.Text = TextoVisualizar;
}

y con ésto tenemos hecha nuestra primera página en ASP.NET con Web Controls (imagen 6), solo hay que pulsar Ctrl + F5 para ejecutarla, que compile y verla en el explorador.

Enlaces relacionadas:

Migración a ASP .NET: consideraciones clave 
Cinco pasos para iniciarse con ASP.NET 
Introducción a Web Forms 
www.asp.net