Sie sind auf Seite 1von 22

Programación II Ing.

Guillermo Rivera

UNIDAD I – COMPONENTES Y CONTROLES PARA EL DISEÑO DE UN SITIO WEB.


1.3. CONTROLES WEB – PARTE I.

INTRODUCCIÓN.
Un control web, al igual que los elementos HTML estáticos, son colocados en la porción HTML de la
página ASP .NET. Pero, a diferencia de los elementos HTML, los controles web pueden ser accedidos
programáticamente desde el código de la página. De esta forma, los controles web sirven como
intermediarios entre las porciones del código fuente y código HTML de una página ASP .NET.
Los diferentes controles web de ASP .NET pueden ser divididos en varias categorías: controles web
para mostrar texto, controles web para capturar información, controles web para mostrar datos de
una base de datos, etc.

CONTROLES WEB PARA MOSTRAR TEXTO.


Cuando una página ASP .NET es visitada por medio de un
navegador, se ejecuta el motor ASP .NET, produciendo código
HTML que luego es enviado de regreso y mostrado en el navegador
web del usuario. El código HMTL producido por una página ASP
.NET puede ser de cualquiera de las formas siguientes:
 Código HTML estático en la porción HTML.
 Código HTML que es proporcionado por los controles web
de la página.
El código HTML estático en la porción HTML es enviado al
navegador exactamente como está digitado. Sin embargo, el código
HTML producido por un control web depende de los valores de sus
propiedades.
Hay dos controles web ASP .NET que están diseñados para mostrar
texto: el control web Literal y el control web Label. Las
diferencias entre Literal y Label consisten en el código HTML
producido por cada control. La marcación del control web Literal
es el valor de su propiedad Text. El control web Label, por otro
lado, tiene una cantidad de propiedades de formato, tales como
BackColor, ForeColor, Font, etc., que especifica cómo su
propiedad Text debería ser mostrada.

1 de 22
Programación II Ing. Guillermo Rivera

USANDO EL CONTROL WEB LITERAL.


El control web Literal es uno de los controles web más simples. El código HTML devuelto por el
control web Literal es precisamente el valor de su propiedad Text. El control web Literal se
encuentra en el Cuadro de herramientas, tal como se muestra a continuación:
El control web Literal tiene de seis a ocho
propiedades, dependiendo de la versión de Visual
Studio .NET instalada.
De momento se trabajará solamente con las propiedades ID y Text. La propiedad ID nombra de
forma única al control web, de modo que sus propiedades puedan ser referenciadas en la porción
de código fuente de la página ASP .NET. La propiedad Text es el valor mostrado cuando el control
web Literal es devuelto.
A nivel de código, el control web Literal se muestra así:
<asp:Literal ID="Literal1" runat="server"></asp:Literal>

Para establecer programáticamente el valor de la propiedad web Literal, se usa la siguiente


porción de código:
Literal1.Text = "valor";

A diferencia del control web Label, el control web Literal no contiene ninguna propiedad que
especifique el formato de su salida: tamaño de la letra, negrita o subrayado, por citar algunos. Para
ello se debe hacer uso del código HTML apropiado.

USANDO EL CONTROL WEB LABEL.


El control web Label contiene varias propiedades de formato que, cuando se establecen, especifican
cómo debería ser mostrado en el navegador del usuario el valor almacenado en su propiedad Text.
El control web Label se encuentra en el Cuadro de herramientas, tal como se muestra a
continuación:
Algunas de sus propiedades son:
1. Propiedades de fuente:
a. Bold: resalta la letra.
b. Italic: convierte la letra en cursiva.
c. Underline: subraya la letra.
d. Size: define el tamaño de la letra.
2. Propiedades de color:
a. BackColor: define el color del fondo.
b. ForeColor: define el color de la letra.

2 de 22
Programación II Ing. Guillermo Rivera

3. Propiedades de borde:
a. BorderColor: define el color del borde.
b. BorderStyle: define el estilo del borde.
c. BorderWidth: define el ancho del borde.
4. Propiedades misceláneas:
a. ToolTipText: despliega un texto cuando se coloca el ratón sobre el control web.
A nivel de código, el control web Label se muestra así:
<asp:Label ID="Label1" runat="server" Text="Label" Font-Bold="True"></asp:Label>

Para establecer programáticamente el valor de la propiedad web Label, se usa la siguiente porción
de código:
Label1.Text = "valor";

CONTROLES WEB PARA CAPTURAR INFORMACIÓN.


Cuando HTML fue diseñado, dos elementos fueron creados para facilitar la captura de las entradas
del usuario. Estos dos elementos son <form> e <input>. A pesar de que no se requiere un
conocimiento profundo de estos elementos para capturar entradas de usuario en una página ASP
.NET, es importante tener un conocimiento práctico. Por tanto, examinemos brevemente los
elementos <form> e <input>.

EXAMINANDO EL ELEMENTO HTML <INPUT>


El elemento <input> permite generar diferentes controles y su sintaxis es:
<input id="Text1" type="text" />

En la tabla siguiente se incluyen algunos valores para el atributo type del elemento <input>.

Valor Descripción

Define un botón que se pueda presionar (principalmente usado con JavaScript para
button
activar un script).

checkbox Define una casilla de verificación.

radio Define un botón de selección.

Submit Define un botón de envío.

Valor por defecto. Define una caja de texto de una sola línea (la longitud por defecto
text
es de 20 caracteres).

3 de 22
Programación II Ing. Guillermo Rivera

NOTA: existen más valores que los mostrados en la tabla anterior. HTML5 amplió grandemente
la cantidad de valores a usar. Puede obtener información adicional sobre el elemento <input> en
http://www.w3schools.com/tags/att_input_type.asp

Por ejemplo, para crear una página HTML que contiene una caja de texto, se puede usar el código
siguiente:
<input id="Text1" type="text" />

Para mostrar una casilla de verificación se usaría:


<input id="Checkbox1" type="checkbox" />

Como ejemplo se proporciona el código siguiente, donde se crean los controles web necesarios de
captura de información para realizar el cálculo del índice de masa corporal1.
<html>
<head>
<title>Calculadora IMC</title>
</head>
<body>
<h1>Calculadora de Masa Corporal </h1>
<p>Su Altura (en centímetros): <input type="text" name="altura" /></p>
<p>Su Peso (en libras): <input type="text" name="peso" /></p>
<p><input type="submit" value="Calcular IMC" /></p>
</body>
</html>

ENVIANDO LA ENTRADA AL SERVIDOR WEB USANDO EL ELEMENTO HTML <FORM>


Cuando un usuario solicita una página web, el servidor web devuelve al navegador del usuario la
página HTML solicitada para que sea mostrada, finalizando así la comunicación entre el navegador
y el servidor web.
El punto clave aquí es que una vez el código HTML ha sido devuelto al navegador web, el servidor
web no tiene idea de si el usuario aún está viendo la página. El servidor web no sabe si el usuario
está introduciendo información en las cajas de texto de la página o en cualquier otro control web
de entrada de datos, o si ha apagado la computadora.
Después que el usuario ha proporcionado sus entradas de datos y está listo para que el servidor web
los procese, el navegador necesita enviar esos valores al servidor web, lo cual es logrado con el
elemento HTML <form>.
El elemento <form> contiene dentro de él a los elementos <input> usados para capturar las entradas
del usuario, así como el botón para envío. Cuando se le hace clic al botón enviar del elemento
<form>, se dice que la forma ha sido enviada y el navegador realiza una solicitud de una página
específica donde los datos introducidos con los elementos <input> dentro de <form> son enviados
a esta página web.

1 Puede obtener información adicional en https://en.wikipedia.org/wiki/Body_mass_index

4 de 22
Programación II Ing. Guillermo Rivera

Esta descripción del elemento <form> deja dos preguntas sin resolver:
 Cuando es enviado <form>, ¿cómo sabe el navegador dónde enviar el contenido de los
elementos <input>?
 ¿Cómo es codificado y enviado el contenido de los elementos <input>?
Las respuestas a estas dos preguntas dependen de los valores de los atributos method y action del
elemento <form>. El atributo action especifica la URL donde el navegador envía la forma, mientras
que el atributo method define cómo el contenido de los elementos <input> dentro de las formas es
devuelto al servidor.
El atributo method puede tener uno de dos valores: get o post. El atributo action especifica el
nombre de la página web donde el navegador envía los valores de los elementos <input>. El
elemento <form> siguiente tiene su atributo method establecido en get y su atributo action
establecido con el valor UnaPagina.htm. Aunque no se muestre aquí, habría elementos <input>
entre las etiquetas <form> de apertura y cierre para cada entrada de usuario que se captura.
<form method="get" action="UnaPagina.htm">
...
</form>

Sin importar el valor del atributo method, cuando <form> es enviado, el contenido de los elementos
<input> es compactado en una sola cadena usando el formato siguiente:

ControlDeEntrada1=Valor1& ControlDeEntrada2= Valor1&...& ControlDeEntradaN= ValorN

Donde ControlDeEntrada1 es el valor del atributo name del primer elemento <input>, y Valor1 es el
valor que el usuario introdujo dentro de este elemento <input>, y así sucesivamente para cada
control de entrada. Observe que el nombre y el valor de cada elemento <input> está separado por
un signo igual (=), y cada par de nombres y valores están separados por un signo ampersand (&).
El atributo method determina cómo esta cadena de nombres y los valores de elementos <input> son
enviados al servidor web. Si method es establecido en get, el contenido de los elementos <input>
es enviado por medio de la cadena de consulta. La cadena de consulta es una cadena opcional que
puede ser añadida al final del URL de una página web. Si el URL del sitio web tiene un signo de
interrogación (?) en él, todo lo que se encuentra después es considerado una cadena de consulta.
Si method es establecido en post, el contenido de los elementos <input> es enviado por medio del
cuerpo de la solicitud HTTP, lo cual significa que no hay cadena de consulta añadida al final del URL.
Por tanto, el código original quedaría así (usando el método get):
<html>
<head>
<title>Calculadora IMC</title>
</head>
<body>
<form method="get" action="IMC.htm">
<h1>Calculadora de Masa Corporal </h1>
<p>Su Altura (en centímetros): <input type="text" name="altura" /></p>
<p>Su Peso (en libras): <input type="text" name="peso" /></p>
<p><input type="submit" value="Calcular IMC" /></p>
</form>

5 de 22
Programación II Ing. Guillermo Rivera

</body>
</html>

Por ejemplo, supongamos que el código anterior es almacenado en un archivo llamado IMC.htm y
es ejecutado. La cadena generada sería:
IMC.htm?altura=179&peso=216

Cada vez que un navegador solicita una página web, envía una solicitud HTTP al servidor web que
incluye la URL solicitada y otra información importante. Esta solicitud HTTP sucede detrás de
escenarios y no es mostrada por el navegador.

USANDO CONTROLES WEB EN FORMULARIOS WEB ASP .NET.


La recolección de entradas de usuario es mucho más simple en páginas ASP .NET que en páginas
HTML puras (como la descrita anteriormente). Para demostrar esto, construya un nuevo sitio web
(siga los pasos descritos en el material 1.2. Componentes de una aplicación básica en ASP .NET pero
ahora utilice la plantilla ASP .NET Empty Web Site (no olvide seleccionar las opciones Visual C# y
FileSystem). Coloque el nombre IMC al proyecto.
A diferencia del primer ejemplo mostrado en el material 1.2. Componentes de una aplicación básica
en ASP .NET, no se muestra ningún código y la ventana Solution Explorer contiene muy pocos
elementos. Agregue un formulario web haciendo clic derecho sobre el nombre del proyecto (IMC)
y seleccionando las opciones Add, Web Form como se muestra en la figura siguiente:

6 de 22
Programación II Ing. Guillermo Rivera

En la ventana que aparece coloque el nombre Calculadora al formulario web.

Observará que en la ventana Solution Explorer aparece el formulario web insertado y también
aparece el código respectivo en centro de la pantalla.

NOTA: Recuerde que debe seleccionar la opción Web Form para poder hacer uso de los controles
web que ofrece Visual Studio (el archivo generado tiene extensión .aspx). Si selecciona la opción
HTML Page (última opción del listado mostrado) entonces insertará una página de extensión .html
donde sólo puede escribir etiquetas HTML y no podrá utilizar controles web ASP .NET.

Cambie la vista a Design y agregue una etiqueta, presione la tecla ENTER y agregue una tabla de tres
filas y dos columnas. Agregue y configure2 los controles siguientes:

No. Control Propiedad Valor

(ID) lblTitulo

Font, Bold True


1 Label1
Font, Size Large

Calculadora de Índice de
Text
Masa Corporal

(ID) lblAltura

2 Label2 AssociatedControlID txtAltura

Text Su altura (en centímetros):

(ID) lblPeso

3 Label3 AssociatedControlID txtPeso

Text Su peso (en libras):

2 En caso de no mostrarse la ventana Properties, puede activarla seleccionando uno de los controles que
ya colocó en la pantalla y presionando la tecla F4.

7 de 22
Programación II Ing. Guillermo Rivera

No. Control Propiedad Valor

(ID) lblInfo

4 Label4 ForeColor Red

Text

5 TextBox1 (ID) txtAltura

6 TextBox2 (ID) txtPeso

(ID) btnCalcular
7 Button1
Text Calcular IMC

Adicionalmente redimensione la tabla para que luzca de forma similar a la figura mostrada:

1
5
2
6
3
7
4

Opcionalmente puede efectuar toda la configuración desde la opción Code. Cambie a esa opción y
agregue el código coloreado en color celeste. El código completo debería verse de forma similar a
la mostrada:
<%@ Page Title="Calculadora IMC" Language="C#" AutoEventWireup="true"
CodeFile="Calculadora.aspx.cs" Inherits="Calculadora" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 39%;
}
.auto-style2 {
width: 177px;
}

8 de 22
Programación II Ing. Guillermo Rivera

</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblTitulo" runat="server" Text="Calculadora de Índice de
Masa Corporal" Font-Bold="True" Font-Size="Large"></asp:Label>
<br />
<br />
<table class="auto-style1">
<tr>
<td class="auto-style2">
<asp:Label ID="lblAltura" runat="server"
AssociatedControlID="txtAltura" Text="Su altura (en
centímetros):"></asp:Label>
</td>

<td>
<asp:TextBox ID="txtAltura" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblPeso" runat="server"
AssociatedControlID="txtPeso" Text="Su peso (en
libras):"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtPeso" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2">&nbsp;</td>
<td>
<asp:Button ID="btnCalcular" runat="server" Text="Calcular IMC" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

El código resaltado en color celeste que agregó permite mostrar un título en la pestaña del
navegador. En caso de no usarlo se mostrarán datos del servidor local.

NOTA: la propiedad AssociatedControlID permite asociar el control Label con otro control en
un formulario web, de forma tal que cuando hace clic sobre el control Label el foco se ubica en
el control asociado.

9 de 22
Programación II Ing. Guillermo Rivera

Ahora agregue código al botón haciendo doble clic sobre él. El código a agregar es el siguiente:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : Page


{
protected void Page_Load(object sender, EventArgs e)
{

protected void enviar_Click(object sender, EventArgs e)


{
// Declaración de variables
double alturaCm = 0.0;
double alturaPulg = 0.0;
double pesoLb = 0.0;
double masa;

// Validar que la altura sea un valor numérico


if (!(double.TryParse(txtAltura.Text, out alturaCm)))
{
lblInfo.Text = "Altura equivocada!";
return;
}

// Validar que el peso sea un valor numérico


if (!(double.TryParse(txtPeso.Text, out pesoLb)))
{
lblInfo.Text = "Peso equivocado!";
return;
}

// Convertir centímetros a pulgadas


alturaPulg = alturaCm * 0.393701;

// Calcular el índice de masa corporal


masa = (pesoLb / (alturaPulg * alturaPulg)) * 703;

// Mostrar el valor IMC


if (masa < 16)
lblInfo.Text = "IMC: " + masa + " Delgadez severa";
else if (masa < 17)
lblInfo.Text = "IMC: " + masa + " Delgadez moderada";
else if (masa < 18.5)
lblInfo.Text = "IMC: " + masa + " Delgadez leve";
else if (masa < 25)
lblInfo.Text = "IMC: " + masa + " Normal";
else if (masa < 30)
lblInfo.Text = "IMC: " + masa + " Pre-obeso";

10 de 22
Programación II Ing. Guillermo Rivera

else if (masa < 35)


lblInfo.Text = "IMC: " + masa + " Obesidad leve";
else if (masa < 40)
lblInfo.Text = "IMC: " + masa + " Obesidad media";
else
lblInfo.Text = "IMC: " + masa + " Obesidad mórbida";
}
}

Ejecute el código anterior utilizando la combinación de teclas CTRL + F5. Debería obtener una
pantalla similar a la siguiente:

CREANDO CAJAS DE TEXTO MULTILÍNEAS Y CONTRASEÑAS.


Las dos variantes de una caja de texto son texto multilínea y contraseña.
Una caja de texto multilínea contiene más de una línea de texto y es comúnmente usada cuando se
necesita guardar una gran cantidad de texto. Piense en un sitio web que permite a sus visitantes
dejar comentarios sobre diferentes temas. Típicamente, cajas multitexto son usadas en situaciones
como esta porque el usuario puede introducir un comentario extenso.
Las cajas de texto contraseña enmascaran la entrada del usuario y son útiles para recoger
información sensible del usuario, tales como su contraseña o su número de identificación personal.
La entrada enmascarada evita que otras personas vean la información sensible. El control web
TextBox contiene una propiedad TextMode que especifica cómo el TextBox resultante será
mostrado: como una caja de texto de una sola línea o multilínea o como caja de texto contraseña.
El crear una caja de texto multilínea involucra los siguientes pasos:
1. Agregue un control web TextBox a la página ASP .NET.
2. Establezca la propiedad TextMode en MultiLine.
3. Establezca las propiedades Columns y Rows para especificar el número de filas y columnas
de la caja de texto multilínea.
A continuación se muestra el código de una página ASP .NET que contiene una caja de texto
multilínea (el código a insertar se resalta con color celeste):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>

11 de 22
Programación II Ing. Guillermo Rivera

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblComentarios" runat="server" Text="Por favor deje sus
comentarios" AssociatedControlID="txtComentarios"></asp:Label><br />
<asp:TextBox ID="txtComentarios" runat="server" Columns="25" Rows="5"
TextMode="MultiLine"></asp:TextBox>
</div>
</form>
</body>
</html>

Presione CRTL + F5 para ejecutar el código anterior. Debería obtener una pantalla similar a la
mostrada:

Para crear una caja de contraseña, basta con colocar en su propiedad TextMode el valor Password,
tal como se muestra a continuación:
<asp:Label ID="lblContrasena" runat="server" Text="Contraseña:"
AssociatedControlID="txtContrasena"></asp:Label>
&nbsp;<asp:TextBox ID="txtContrasena" runat="server" TextMode="Password">
</asp:TextBox>

La caja de contraseña debería comportarse de la manera siguiente si digita dentro de ella:

Es importante mencionar que cuando una caja de texto contraseña es enviada, la propiedad Text
no es mostrada en el código HTML resultante, por razones de seguridad.

NOTA: &nbsp; representa un espacio en blanco en HTML (nbsp = non-breaking space).

Para limitar la cantidad de caracteres que un usuario puede introducir en una caja de texto, se usa
la propiedad MaxLength.

12 de 22
Programación II Ing. Guillermo Rivera

La caja de texto tiene varias propiedades de formato, de las cuales se muestran algunas en la tabla
siguiente:

Propiedad Descripción

BackColor Especifica el color del fondo de la caja de texto.

BorderColor Especifica el color del borde de la caja de texto.

BorderStyle Especifica el estilo del borde de la caja de texto.

BorderWidth Especifica el ancho del borde de la caja de texto.

Font Especifica las propiedades de la letra para el texto introducido por el


usuario en la caja de texto. Por ejemplo, la propiedad Font tiene varias
sub-propiedades, entre ellas Size y Bold.

ForeColor Especifica el color del texto introducido por el usuario en la caja de texto.

Como ejemplo, se presenta el código siguiente:


<%@ Page Title="Demo" Language="C#" MasterPageFile="~/Site.Master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">


<br />
<br />
<asp:TextBox ID="TextBox1" runat="server" BackColor="Yellow"
BorderColor="Black" BorderStyle="Dotted" BorderWidth="5px">
</asp:TextBox>
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server" Font-Bold="True" Font-Names="Comic
Sans MS" Font-Size="Large" ForeColor="Red"></asp:TextBox>
<br />
</asp:Content>

En el navegador web se vería así (asumiendo que en la primera casilla digita "prueba 1" y en la
segunda casilla digita "prueba 2"):

13 de 22
Programación II Ing. Guillermo Rivera

EXAMINANDO LOS DIFERENTES TIPOS DE CLASIFICACIÓN DE ENTRADAS DE USUARIO.


Existen otros tipos de controles web para recoger entradas de usuario, tales como la lista
desplegable (DropDownList), la casilla de marcación (CheckBox) y el botón de selección (Radio
Button). El control web DropDownList presenta al usuario una lista de opciones, de las cuales debe
seleccionar una. El control web CheckBox muestra una casilla que puede ser marcada o no para
indicar una respuesta afirmativa o negativa, y un conjunto de este control puede ser usado para
permitir que el usuario seleccione una o más opciones de una lista de posibilidades. El control web
RadioButton presenta al usuario una sola opción seleccionable. Típicamente, un conjunto de este
control es usado, con cada RadioButton representando una sola opción de la cual el visitante puede
seleccionar solamente una de las opciones disponibles.
El tipo de control web que utilice depende del tipo de entrada que está siendo recibida del usuario,
la cual puede ser clasificada en términos de restrictividad, desde el más restrictivo hasta el menos
restrictivo:
 Entrada booleana.
 Entrada seleccionada de un listado de opciones.
 Entrada de texto en general.

CONTROL WEB DROPDOWNLIST


1. Cree un nuevo sitio web y nómbrelo como EjemploDropDown.
2. Agregue una tabla ASP. Para ello arrastre el contro Table de la ventana Toolbox hacia el
formulario.
3. Configure la tabla para que tenga dos filas y dos columnas. Para ello realice lo siguiente:
a. Seleccione el control Table.
b. Modifique la propiedad Rows para insertar dos filas.

14 de 22
Programación II Ing. Guillermo Rivera

c. Seleccione la primera columna y modifique la propiedad Cells que se muestra a la


derecha del listado de filas insertadas.
d. Agregue dos columnas para la primera fila.

e. Agregue una columna para la segunda fila y coloque el valor 1 a la propiedad


ColumnSpan.

4. Agregue y configure los controles mostrados en la tabla de configuración de controles.

No. Control Propiedad Valor

(ID) lblPais
1 Label
Text País de residencia

(ID) cbxPaises
2 DropDownList
Nombre de los 7 países del
Items
itsmo centroamericano

(ID) btnSeleccionar
3 Button
Text Seleccionar

(ID) lblSeleccion

Font, Bold True


4 Label
ForeColor #000099

Text

15 de 22
Programación II Ing. Guillermo Rivera

NOTA: El control web Table se manipula programáticamente, por lo que deberá insertar
y configurar los controles en la vista Source. Puede obtener información adicional en:
https://msdn.microsoft.com/en-us/library/9f65szta(v=vs.90).aspx
https://msdn.microsoft.com/en-
us/library/system.web.ui.webcontrols.table(v=vs.90).aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"


Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<p>&nbsp;</p>
<p>
<asp:Table ID="Table1" runat="server">
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:Label ID="lblPais" runat="server" Text="País de
residencia"></asp:Label>
</asp:TableCell>
<asp:TableCell runat="server">
<asp:DropDownList ID="cbxPaises" runat="server">
<asp:ListItem>Belice</asp:ListItem>
<asp:ListItem>Guatemala</asp:ListItem>
<asp:ListItem>El Salvador</asp:ListItem>
<asp:ListItem>Honduras</asp:ListItem>
<asp:ListItem>Nicaragua</asp:ListItem>
<asp:ListItem>Costa Rica</asp:ListItem>
<asp:ListItem>Panamá</asp:ListItem>
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow runat="server">
<asp:TableCell runat="server" ColumnSpan="1"
HorizontalAlign="Center">
<asp:Button ID="btnSeleccionar" runat="server"
Text="Seleccionar" OnClick="Seleccionar_Click" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</p>
<p>
<asp:Label ID="lblSeleccion" runat="server" Font-Bold="True"
ForeColor="#000099"></asp:Label>
</p>
</form>
</body>
</html>

16 de 22
Programación II Ing. Guillermo Rivera

17 de 22
Programación II Ing. Guillermo Rivera

El diseño debería verse de forma similar a la figura siguiente:

1 2

4
3

5. Presione la tecla F7 y escriba el código resaltado en color celeste:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : Page


{
protected void Page_Load(object sender, EventArgs e)
{

protected void Seleccionar_Click(object sender, EventArgs e)


{
lblSeleccion.Text = "Usted seleccionó: " +
cbxPaises.SelectedItem;
}
}

6. Ejecute el código en un navegador web presionando la combinación de teclas CTRL + F5.


Debería ver una pantalla similar a la siguiente:

Antes de usa el botón Seleccionar. Después de usar el botón Seleccionar.

Si desea que aparezca un valor específico al ejecutar la página, regrese al código y agregue el código
resaltado en color celeste a la opción deseada.
<asp:ListItem Selected="True">El Salvador</asp:ListItem>

18 de 22
Programación II Ing. Guillermo Rivera

CONTROL WEB RADIOBUTTONLIST.


Para hacer una breve demostración de este control vamos a reutilizar el código anterior, para lo cual
se le pide que realice las modificaciones resaltadas en color celeste en el código mostrado.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<p>&nbsp;</p>
<p>
<asp:Table ID="Table1" runat="server">
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:Label ID="lblPais" runat="server" Text="País de
residencia">
</asp:Label>
</asp:TableCell>
<asp:TableCell runat="server">
<asp:RadioButtonList ID="rbtPaises" runat="server">
<asp:ListItem>Belice</asp:ListItem>
<asp:ListItem>Guatemala</asp:ListItem>
<asp:ListItem Selected="True">El
Salvador</asp:ListItem>
<asp:ListItem>Honduras</asp:ListItem>
<asp:ListItem>Nicaragua</asp:ListItem>
<asp:ListItem>Costa Rica</asp:ListItem>
<asp:ListItem>Panamá</asp:ListItem>
</asp:RadioButtonList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow runat="server">
<asp:TableCell runat="server" ColumnSpan="1"
HorizontalAlign="Center">
<asp:Button ID="btnSeleccionar" runat="server"
Text="Seleccionar" OnClick="Seleccionar_Click" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</p>
<p>
<asp:Label ID="lblSeleccion" runat="server" Font-Bold="True"
ForeColor="#000099"></asp:Label>
</p>
</form>
</body>
</html>

19 de 22
Programación II Ing. Guillermo Rivera

En el archivo de código adyacente efectúe los cambios resaltados en color celeste.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : Page


{
protected void Page_Load(object sender, EventArgs e)
{

protected void Seleccionar_Click(object sender, EventArgs e)


{
lblSeleccion.Text = "Usted seleccionó: " + rbtPaises.SelectedItem;
}
}

Finalmente visualice la página en un navegador web.

CONTROL WEB CHECKBOXLIST.


Para hacer una breve demostración de este control vamos a reutilizar el código anterior, para lo cual
se le pide que realice las modificaciones resaltadas en color celeste en el código mostrado.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<p>&nbsp;</p>
<p>
<asp:Table ID="Table1" runat="server">
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:Label ID="lblPais" runat="server" Text="País de
residencia">
</asp:Label>
</asp:TableCell>
<asp:TableCell runat="server">
<asp:CheckBoxList ID="chbPaises" runat="server">
<asp:ListItem>Belice</asp:ListItem>
<asp:ListItem>Guatemala</asp:ListItem>
<asp:ListItem Selected="True">El

20 de 22
Programación II Ing. Guillermo Rivera

Salvador</asp:ListItem>
<asp:ListItem>Honduras</asp:ListItem>
<asp:ListItem>Nicaragua</asp:ListItem>
<asp:ListItem>Costa Rica</asp:ListItem>
<asp:ListItem>Panamá</asp:ListItem>
</asp:CheckBoxList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow runat="server">
<asp:TableCell runat="server" ColumnSpan="1"
HorizontalAlign="Center">
<asp:Button ID="btnSeleccionar" runat="server"
Text="Seleccionar" OnClick="Seleccionar_Click" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</p>
<p>
<asp:Label ID="lblSeleccion" runat="server" Font-Bold="True"
ForeColor="#000099"></asp:Label>
</p>
</form>
</body>
</html>

En el archivo de código adyacente efectúe los cambios mostrados.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : Page


{
protected void Page_Load(object sender, EventArgs e)
{

protected void Seleccionar_Click(object sender, EventArgs e)


{
string selecciones = "Selecciones efectuadas: ";
foreach (ListItem item in chbPaises.Items)
{
if (item.Selected)
{
selecciones += "<br>* " + item.Value;
}
}
lblSeleccion.Text = selecciones;
}
}

21 de 22
Programación II Ing. Guillermo Rivera

Finalmente visualice la página en un navegador web.

PERSONALIZAR DISEÑO DE UN FORMULARIO WEB.


Puede aplicar un diseño personalizado a un formulario web usando archivos CSS (Cascading Style
Sheet), para lo cual deberá efectuar los pasos descritos a continuación:
1. Agregue un nuevo elemento (plantilla Style Sheet) y asígnele un nombre.
2. Haga doble clic en el archivo recién creado para escribir el código CSS (o copiarlo de algún
archivo existente para pegarlo en el archivo recién creado).
3. En el formulario web cambie a vista Design.
4. Seleccione el archivo CSS y arrástrelo hacia el formulario. El estilo definido en el archivo CSS
se aplicará inmediatamente en los elementos pertinentes del formulario.
5. Cambie a vista Source para comprobar que aparece una nueva etiqueta similar a:
<link href="NombreDeArchivo.css" rel="stylesheet" type="text/css" />

NOTA: Puede obtener información adicional en los enlaces siguientes:


1. http://www.aspnetbook.com/basics/asp-net-external-css.php
2. http://www.wiseowl.co.uk/blog/s253/css-style-sheets.htm
3. http://www.w3schools.com/css/
4. http://www.w3schools.com/css/css3_intro.asp
5. https://msdn.microsoft.com/es-
es/library/system.web.ui.webcontrols.dropdownlist(v=vs.110).aspx
6. https://msdn.microsoft.com/es-
es/library/system.web.ui.webcontrols.radiobuttonlist(v=vs.110).aspx
7. https://msdn.microsoft.com/es-
es/library/system.web.ui.webcontrols.checkboxlist(v=vs.110).aspx

OBTENER VENTANAS EMERGENTES.


Para generar una ventana emergente (pop up window) en la página ASP .NET agregue un botón y al
formulario web y codifíquelo usando cualquiera de estos dos métodos:
protected void btnPopUp_Click(object sender, EventArgs e)
{
1 Page.ClientScript.RegisterStartupScript(this.GetType(),"Scripts",
"<script>alert('Ventana emergente 1');</script>");
}
protected void btnPopUp_Click(object sender, EventArgs e)
{
2 Response.Write("<script>alert('Ventana emergente');</script>");
}

22 de 22