Controles Web ASP

Ing. Carlos Roberto Monroy Alfaro

carlos.monroy@utec.edu.sv

Introducción
Crearemos un sitio web utilizando algunos controles web
en tecnología ASP .NET, con esto se busca comprender el
funcionamiento de los controles web en ASP y las
propiedades de los mismos.

Objetivo General
Comprender y manipular controles web para la creación de sitios Web dinámicos
haciendo uso de las tecnologías que ofrece ASP .NET.

Objetivos Específicos
Comprender la funcionalidad de los controles web y sus características.

Aplicar diferentes controles web para la manipulación de información.

Resumen
“Los controles de servidor Web ASP.NET son objetos de páginas Web ASP.NET que se
ejecutan cuando se solicita la página y representan el formato en un explorador.
Muchos controles de servidor Web son similares a elementos HTML conocidos, como
botones y cuadros de texto. Sin embargo, otros controles abarcan un
comportamiento complejo, por ejemplo, un control de calendario o los controles que
administran conexiones de datos”1.

ASP nos permite incorporar codificación y manipulación de los elementos contenidos

en cada archivo de esta tecnología, manipular la información adecuadamente se
vuelve complejo hasta cierto punto si hablamos de las capacidades que HTML posee,
sin embargo, la manipulación de datos por medio de controles web dedicados a
tareas específicas, permiten ser lo suficientemente flexibles, como para ser
personalizadas desde la parte visual hasta la obtención o muestra de información.

1Párrafo extraído de la dirección https://msdn.microsoft.com/es-

es/library/bs302eat(v=vs.80).aspx
 Ejercicios de Controles Web | Ing. Carlos Roberto Monroy Alfaro

Ejercicio de Controles Web

Trabajaremos con Visual Studio 2013, iniciando un Nuevo sitio web vacío.

Ilustración 1 - Crear nuevo sitio Web

Nos debemos asegurar que sea con lenguaje C#, y que la opción sea sitio web vacío,
de ser necesario se puede cambiar el FRAMEWORK con el cual se compila el código.

Ilustración 2 - seleccionar tipo de sitio web

Página | 2
 Ejercicios de Controles Web | Ing. Carlos Roberto Monroy Alfaro

En el explorador de soluciones podremos encontrar los archivos que contiene nuestro

sitio web, todo lo que vayamos creando o incorporando a nuestro sitio se verán
reflejados en este menú de árbol.

Ilustración 3 - Vista del explorador de soluciones

Agregaremos un archivo de tipo ASPX, el cual, dando clic derecho sobre el icono con
el nombre del sitio web, buscaremos la opción agregar, el cual al posicionarnos sobre
ella abrirá un submenú con todas las variantes que podemos agregar a nuestro sitio,
por lo que buscaremos la opción Formularios Web Forms, y daremos clic izquierdo
para generarlo.

Ilustración 4 - agregar un formulario web

Página | 3
 Ejercicios de Controles Web | Ing. Carlos Roberto Monroy Alfaro

La ventana que emerge al seleccionar crear un formulario web, nos pide definir el
nombre del archivo ASP, para este primer formulario por defecto sugiere el nombre
Default, el cual por el momento no cambiaremospara efectos de esta practica.

Ilustración 5 - Nombrar el formulario Web

Obtendremos el código HTML en conjunto al código ASP que corresponden al código

del diseño del formulario creado, obtendremos lo siguiente.

A dicho código HTML le realizaremos algunas adiciones de código para obtener un

diseño personalizado.

Ilustración 6 - personalizar HTML

Página | 4
 Ejercicios de Controles Web | Ing. Carlos Roberto Monroy Alfaro

Ahora procedemos a agregar a nuestro diseño los controles correspondientes,

primero la sección de código ASP la cambiaremos y nos quedaremos en la vista de
diseño, para ello utilizaremos el panel inferir. Luego ubicamos en el cuadro de
herramientas el grupo de controles Estándar, y buscamos el control Label,
arrastraremos y colocaremos el control dentro del recuadro que marca la ubicación
del div que tenemos definido en la página ASP.

Ilustración 7 - agregar control label

Debemos agregar tres label uno por línea para lo cual debe presionar enter después
del label para crear una nueva línea, con las siguientes propiedades:

Propiedad Valor Propiedad Valor Propiedad Valor

ID lblOp1 ID lblOp2 ID lblSigno
Text Operador1: Text Operador2: Text Seleccionar

Los tres label anteriores son para indicar la información que se solicita, ahora
agregaremos un cuarto label y en este le pondremos de ID: lblResultado, y la
propiedad Text debe ir vacía quedandode la siguiente forma:

Ilustración 8 - Muestra de diseño con label

Página | 5
 Ejercicios de Controles Web | Ing. Carlos Roberto Monroy Alfaro

Ahora agregaremos dos controles textbox arrastrando y colocando

Ilustración 9 - colocar texbox

Para los textbox solamente cambiaremos los ID con los datos siguientes:

Propiedad Valor Propiedad Valor

ID txtOp1 ID txtOp2
Obtendremos lo siguiente:

Ilustración 10 - Muestra de controles Textbox

Ahora agregaremos junto al label de “Seleccionar” un control DropDownList

Ilustración 11 - Insertar DropDownList

Propiedad Valor
Solo cambiaremos la propiedad ID de la siguiente forma: ID ddlSignos

Página | 6
 Ejercicios de Controles Web | Ing. Carlos Roberto Monroy Alfaro

Ahora crearemos manualmente los Items que este control muestra ubicando el
botón a la derecha de la propiedad que se muestra a continuación:

Ilustración 12 - Agregar colección de Items

En el cuadro de dialogo que nos habilita seleccionamos agregar, y personalizamos

en el panel derecho del mismo cuadro dos propiedades, la primera es el Text o texto
a mostrar empezaremos colocando “-Seleccionar- “, este será el primero de la lista y
le daremos un Value de “0”, tal y como se muestra a continuación:

Ilustración 13 - agregando Items

Página | 7
 Ejercicios de Controles Web | Ing. Carlos Roberto Monroy Alfaro

Los ítems a agregar son los siguientes:

Text Value
-Seleccionar- 0
Sumar 1
Restar 2
Multiplicar 3
El ASP que se genera es el siguiente:

Ilustración 14 - Asp del control dropdownlist

El formulario recibirá dos valores y deberá calcular lo que se seleccione en la lista sin
necesidad de usar un botón, para ello crearemos el evento SelectedIndexChanged
el cual se activa al seleccionar un elemento diferente del que está activo en la lista,
para crear el evento solo debe dar doble clic sobre el DropDownList y nos enviará al
código subyacente:

Ilustración 15 - código subyacente del DropDownList

Ahora codificaremos con una estructura de control para selección multiple(Switch)

pero primero debemos capturar los valores de los dos textbox y el elemento
seleccionado del DropDownList, los cuales almacenaremos en variables distintas de

Página | 8
 Ejercicios de Controles Web | Ing. Carlos Roberto Monroy Alfaro

tipo entero (Int), además debemos aplicar una conversión explicita ya que son
valores String los que me devuelven, realizaremos lo dicho de la siguiente forma:

Ilustración 16 - conversiones explicitas en C#

Para el operador1 estamos viendo una forma de convertir explícitamente a entero, ya

que del textbox recuperamos el valor contenido en la propiedad Text, la cual
devuelve un tipo String, para las otras dos líneas usamos otra forma de conversión
explicita, destacaremos que del control DropDownList rescatamos del ítem
seleccionado la propiedad Value, que es a la que le colocamos un valor numérico al
crear cada item, es decir con la propiedad SelectedValue tomamos el valor numérico
de cada elemento de la lista que haya sido seleccionado.

Ahora usaremos el valor seleccionado para calcular tomando la decisión con el

Switch, tomando en cuenta que 1 es para sumar, 2 es para restar y 3 es para multiplicar;
esta operación será directamente asignada al control lblResultado a su propiedad
Text, sin embargo no hay que olvidar que esa propiedad recibe valores String, por
tanto debemos hacer una conversión implícita encerrando en paréntesis la operación
aritmética y a dicho paréntesis usar el método .ToString(). Las demás operaciones son
iguales solo cambia el signo de operación aritmética, al final agregamos un caso
default para cuando deje activa la opción “-Seleccionar- “ de la lista no haga
ninguna operación, tal y como se muestra a continuación:

Ilustración 17 - codigo para operar cada elemento de la lista

Página | 9
 Ejercicios de Controles Web | Ing. Carlos Roberto Monroy Alfaro

Antes de probarlo en el navegador debemos recordar que no estamos usando ningún

botón los cuales el evento postback es activo siempre, debemos activar esta
propiedad en el DropdownList si queremos que cada vez que se cambie la selección
de la lista actue el evento que hemos codificado, a continuación, ubicamos el control
DropdownList y notaremos una flecha pequeña, la cual pulsamos y luego activamos
el cheque de Habilitar el AutopostBack para que nuestro sitio funcione.

Ilustración 18 - AutoPostBack activado

Ahora procedemos a probar nuestra aplicación:

Página | 10