1.3. Controles Web - Parte 1

Programacin II Ing.
Ren Alberto Castro Velsquez
UNIDAD I COMPONENTES Y CONTROLES PARA EL DISEO DE UN SITIO WEB.

1.3. CONTROLES WEB PARTE I.
INTRODUCCIN.
Un control web, al igual que los elementos HTML estticos, son colocados en la porcin HTML de
la pgina ASP .NET. Pero, a diferencia de los elementos HTML, los controles web pueden ser
accedidos programticamente desde el cdigo de la pgina. De esta forma, los controles web
sirven como intermediarios entre las porciones del cdigo fuente y cdigo HTML de una pgina
ASP .NET.
Los diferentes controles web de ASP .NET pueden ser divididos en varias categoras: controles web
para mostrar texto, controles web para capturar informacin, controles web para mostrar datos
de una base de datos, etc.
CONTROLES WEB PARA MOSTRAR TEXTO.

Cuando una pgina ASP .NET es visitada por medio de un
navegador, se ejecuta el motor ASP .NET, produciendo cdigo
HTML que luego es enviado de regreso y mostrado en el
navegador web del usuario. El cdigo HMTL producido por una
pgina ASP .NET puede ser de cualquiera de las formas siguientes:
Cdigo HTML esttico en la porcin HTML.
Cdigo HTML que es proporcionado por los controles web
de la pgina.
El cdigo HTML esttico en la porcin HTML es enviado al
navegador exactamente como est digitado. Sin embargo, el
cdigo HTML producido por un control web depende de los
valores de sus propiedades.
Hay dos controles web ASP .NET que estn diseados para
mostrar texto: el control web Literal y el control web Label. Las
diferencias entre Literal y Label consisten en el cdigo HTML
producido por cada control. La marcacin 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 cmo su
propiedad Text debera ser mostrada.
1 de 21
Programacin II Ing. Ren Alberto Castro Velsquez
USANDO EL CONTROL WEB LITERAL.

El control web Literal es uno de los controles web ms simples. El cdigo 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 continuacin:
El control web Literal tiene de seis a ocho
propiedades, dependiendo de la versin 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 porcin
de cdigo fuente de la pgina ASP .NET. La propiedad Text es el valor mostrado cuando el control
web Literal es devuelto.
A nivel de cdigo, el control web Literal se muestra as:
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
Para establecer programticamente el valor de la propiedad web Literal, se usa la siguiente

porcin de cdigo:
Literal1.Text = "valor";
A diferencia del control web Label, el control web Literal no contiene ninguna propiedad que
especifique el formato de su salida: tamao de la letra, negrita o subrayado, por citar algunos.
Para ello se debe hacer uso del cdigo HTML apropiado.
USANDO EL CONTROL WEB LABEL.

El control web Label contiene varias propiedades de formato que, cuando se establecen,
especifican cmo debera 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 continuacin:
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 tamao de la letra.
2. Propiedades de color:
a. BackColor: define el color del fondo.
b. ForeColor: define el color de la letra.
2 de 21
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 miscelneas:
a. ToolTipText: despliega un texto cuando se coloca el ratn sobre el control web.
A nivel de cdigo, el control web Label se muestra as:
<asp:Label ID="Label1" runat="server" Text="Label" Font-Bold="True"></asp:Label>
Para establecer programticamente el valor de la propiedad web Label, se usa la siguiente porcin
de cdigo:
Label1.Text = "valor";
CONTROLES WEB PARA CAPTURAR INFORMACIN.

Cuando HTML fue diseado, 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 pgina ASP
.NET, es importante tener un conocimiento prctico. 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 Descripcin
Define un botn que se pueda presionar (principalmente usado con JavaScript para
button
activar un script).
checkbox Define una casilla de verificacin.
radio Define un botn de seleccin.
Submit Define un botn de envo.
Valor por defecto. Define una caja de texto de una sola lnea (la longitud por defecto
text
es de 20 caracteres).
3 de 21
NOTA: existen ms valores que los mostrados en la tabla anterior. HTML5 ampli grandemente la
cantidad de valores a usar. Puede obtener informacin adicional sobre el elemento <input> en
http://www.w3schools.com/tags/att_input_type.asp
Por ejemplo, para crear una pgina HTML que contiene una caja de texto, se puede usar el cdigo
siguiente:
<input id="Text1" type="text" />
Para mostrar una casilla de verificacin se usara:

<input id="Checkbox1" type="checkbox" />
Como ejemplo se proporciona el cdigo siguiente, donde se crean los controles web necesarios de
captura de informacin para realizar el clculo del ndice de masa corporal1.
<html>
<head>
<title>Calculadora IMC</title>
</head>
<body>
<h1>Calculadora de Masa Corporal </h1>
<p>Su Altura (en centmetros): <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 pgina web, el servidor web devuelve al navegador del usuario la
pgina HTML solicitada para que sea mostrada, finalizando as la comunicacin entre el navegador
y el servidor web.
El punto clave aqu es que una vez el cdigo HTML ha sido devuelto al navegador web, el servidor
web no tiene idea de si el usuario an est viendo la pgina. El servidor web no sabe si el usuario
est introduciendo informacin en las cajas de texto de la pgina o en cualquier otro control web
de entrada de datos, o si ha apagado la computadora.
Despus 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 botn para envo. Cuando se le hace clic al botn enviar del
elemento <form>, se dice que la forma ha sido enviada y el navegador realiza una solicitud de una
pgina especfica donde los datos introducidos con los elementos <input> dentro de <form> son
enviados a esta pgina web.
1 Puede obtener informacin adicional en https://en.wikipedia.org/wiki/Body_mass_index
4 de 21
Esta descripcin del elemento <form> deja dos preguntas sin resolver:
Cuando es enviado <form>, cmo sabe el navegador dnde enviar el contenido de los
elementos <input>?
Cmo 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 enva la forma,
mientras que el atributo method define cmo 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 pgina web donde el navegador enva 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, habra 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 estn separados por un signo ampersand (&).
El atributo method determina cmo 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 aadida al final del URL de una pgina web. Si el URL del sitio web tiene un
signo de interrogacin (?) en l, todo lo que se encuentra despus 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 aadida al final del
URL. Por tanto, el cdigo original quedara as (usando el mtodo 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 centmetros): <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>
5 de 21
</form>
</body>
</html>
Por ejemplo, supongamos que el cdigo anterior es almacenado en un archivo llamado IMC.htm y
es ejecutado. La cadena generada sera:
IMC.htm?altura=179&peso=216
Cada vez que un navegador solicita una pgina web, enva una solicitud HTTP al servidor web que
incluye la URL solicitada y otra informacin importante. Esta solicitud HTTP sucede detrs de
escenarios y no es mostrada por el navegador.
USANDO CONTROLES WEB EN FORMULARIOS WEB ASP .NET.

La recoleccin de entradas de usuario es mucho ms simple en pginas ASP .NET que en pginas
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 aplicacin bsica 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 aplicacin
bsica en ASP .NET, no se muestra ningn cdigo 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 21
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 tambin
aparece el cdigo respectivo en centro de la pantalla.
NOTA: Recuerde que debe seleccionar la opcin Web Form para poder hacer uso de los controles
web que ofrece Visual Studio (el archivo generado tiene extensin .aspx). Si selecciona la opcin
HTML Page (ltima opcin del listado mostrado) entonces insertar una pgina de extensin .html
donde slo 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 centmetros):
(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 21
(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 configuracin desde la opcin Code. Cambie a esa opcin y
agregue el cdigo coloreado en color celeste. El cdigo completo debera 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 21
</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
centmetros):"></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"> </td>
<td>
<asp:Button ID="btnCalcular" runat="server" Text="Calcular IMC" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
El cdigo resaltado en color celeste que agreg permite mostrar un ttulo en la pestaa del
navegador. En caso de no usarlo se mostrarn 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 21
Ahora agregue cdigo al botn haciendo doble clic sobre l. El cdigo 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)

{
// Declaracin de variables
double alturaCm = 0.0;
double alturaPulg = 0.0;
double pesoLb = 0.0;
double masa;
// Validar que la altura sea un valor numrico

if (!(double.TryParse(txtAltura.Text, out alturaCm)))
{
lblInfo.Text = "Altura equivocada!";
return;
}
// Validar que el peso sea un valor numrico

if (!(double.TryParse(txtPeso.Text, out pesoLb)))
{
lblInfo.Text = "Peso equivocado!";
return;
}
// Convertir centmetros 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 21
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 mrbida";
}
}
Ejecute el cdigo anterior utilizando la combinacin de teclas CTRL + F5. Debera obtener una
pantalla similar a la siguiente:
CREANDO CAJAS DE TEXTO MULTILNEAS Y CONTRASEAS.

Las dos variantes de una caja de texto son texto multilnea y contrasea.
Una caja de texto multilnea contiene ms de una lnea de texto y es comnmente 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. Tpicamente, cajas multitexto son usadas en
situaciones como esta porque el usuario puede introducir un comentario extenso.
Las cajas de texto contrasea enmascaran la entrada del usuario y son tiles para recoger
informacin sensible del usuario, tales como su contrasea o su nmero de identificacin
personal. La entrada enmascarada evita que otras personas vean la informacin sensible. El
control web TextBox contiene una propiedad TextMode que especifica cmo el TextBox resultante
ser mostrado: como una caja de texto de una sola lnea o multilnea o como caja de texto
contrasea.
El crear una caja de texto multilnea involucra los siguientes pasos:
1. Agregue un control web TextBox a la pgina ASP .NET.
2. Establezca la propiedad TextMode en MultiLine.
3. Establezca las propiedades Columns y Rows para especificar el nmero de filas y columnas
de la caja de texto multilnea.
A continuacin se muestra el cdigo de una pgina ASP .NET que contiene una caja de texto
multilnea (el cdigo a insertar se resalta con color celeste):
11 de 21
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"

Inherits="_Default" %>
<!DOCTYPE html>
<title></title>
</head>
<body>
<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 cdigo anterior. Debera obtener una pantalla similar a la
mostrada:
Para crear una caja de contrasea, basta con colocar en su propiedad TextMode el valor Password,
tal como se muestra a continuacin:
<asp:Label ID="lblContrasena" runat="server" Text="Contrasea:"
AssociatedControlID="txtContrasena"></asp:Label>
<asp:TextBox ID="txtContrasena" runat="server" TextMode="Password">
</asp:TextBox>
La caja de contrasea debera comportarse de la manera siguiente si digita dentro de ella:
Es importante mencionar que cuando una caja de texto contrasea es enviada, la propiedad Text
no es mostrada en el cdigo HTML resultante, por razones de seguridad.
NOTA: representa un espacio en blanco en HTML (nbsp = non-breaking space).
12 de 21
Para limitar la cantidad de caracteres que un usuario puede introducir en una caja de texto, se usa
la propiedad MaxLength.
La caja de texto tiene varias propiedades de formato, de las cuales se muestran algunas en la tabla
siguiente:
Propiedad Descripcin
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 cdigo 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 vera as (asumiendo que en la primera casilla digita "prueba 1" y en la
segunda casilla digita "prueba 2"):
13 de 21
EXAMINANDO LOS DIFERENTES TIPOS DE CLASIFICACIN DE ENTRADAS DE USUARIO.

Existen otros tipos de controles web para recoger entradas de usuario, tales como la lista
desplegable (DropDownList), la casilla de marcacin (CheckBox) y el botn de seleccin (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 ms opciones de una lista de posibilidades. El control web
RadioButton presenta al usuario una sola opcin seleccionable. Tpicamente, un conjunto de este
control es usado, con cada RadioButton representando una sola opcin 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 trminos de restrictividad, desde el ms 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 nmbrelo 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 21
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 configuracin de controles.
(ID) lblPais
1 Label
Text Pas de residencia
(ID) cbxPaises
2 DropDownList
Nombre de los 7 pases del
Items
itsmo centroamericano
(ID) btnSeleccionar
3 Button
Text Seleccionar
(ID) lblSeleccion
Font, Bold True

4 Label
ForeColor #000099
Text
15 de 21
NOTA: El control web Table se manipula programticamente, por lo que deber insertar y
configurar los controles en la vista Source. Puede obtener informacin 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

<!DOCTYPE html>
<title></title>
</head>
<body>
<p> </p>
<p>
<asp:Table ID="Table1" runat="server">
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:Label ID="lblPais" runat="server" Text="Pas de
residencia"></asp:Label>
</asp:TableCell>
<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: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 21
El diseo debera verse de forma similar a la figura siguiente:
1 2
4
3
5. Presione la tecla F7 y escriba el cdigo resaltado en color celeste:

using System;
using System.Linq;
using System.Web;

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

{
lblSeleccion.Text = "Usted seleccion: " +
cbxPaises.SelectedItem;
}
}
6. Ejecute el cdigo en un navegador web presionando la combinacin de teclas CTRL + F5.

Debera ver una pantalla similar a la siguiente:
Antes de usa el botn Seleccionar. Despus de usar el botn Seleccionar.
Si desea que aparezca un valor especfico al ejecutar la pgina, regrese al cdigo y agregue el
cdigo resaltado en color celeste a la opcin deseada.
<asp:ListItem Selected="True">El Salvador</asp:ListItem>
17 de 21
CONTROL WEB RADIOBUTTONLIST.

Para hacer una breve demostracin de este control vamos a reutilizar el cdigo anterior, para lo
cual se le pide que realice las modificaciones resaltadas en color celeste en el cdigo mostrado.
<!DOCTYPE html>
<title></title>
</head>
<body>
<p> </p>
<p>
residencia">
</asp:Label>
</asp:TableCell>
<asp:RadioButtonList ID="rbtPaises" runat="server">
<asp:ListItem Selected="True">El
Salvador</asp:ListItem>
</asp:RadioButtonList>
</asp:TableCell>
</asp:TableRow>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</p>
<p>
</p>
</form>
</body>
</html>
18 de 21
En el archivo de cdigo adyacente efecte los cambios resaltados en color celeste.

using System;
using System.Linq;
using System.Web;

{
{

{
lblSeleccion.Text = "Usted seleccion: " + rbtPaises.SelectedItem;
}
}
Finalmente visualice la pgina en un navegador web.
CONTROL WEB CHECKBOXLIST.

Para hacer una breve demostracin de este control vamos a reutilizar el cdigo anterior, para lo
cual se le pide que realice las modificaciones resaltadas en color celeste en el cdigo mostrado.
<!DOCTYPE html>
<title></title>
</head>
<body>
<p> </p>
<p>
residencia">
</asp:Label>
</asp:TableCell>
<asp:CheckBoxList ID="chbPaises" runat="server">
<asp:ListItem Selected="True">El
19 de 21
Salvador</asp:ListItem>
</asp:CheckBoxList>
</asp:TableCell>
</asp:TableRow>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</p>
<p>
</p>
</form>
</body>
</html>
En el archivo de cdigo adyacente efecte los cambios mostrados.

using System;
using System.Linq;
using System.Web;

{
{

{
string selecciones = "Selecciones efectuadas: ";
foreach (ListItem item in chbPaises.Items)
{
if (item.Selected)
{
selecciones += "<br>* " + item.Value;
}
}
lblSeleccion.Text = selecciones;
}
}
20 de 21
Finalmente visualice la pgina en un navegador web.
PERSONALIZAR DISEO DE UN FORMULARIO WEB.

Puede aplicar un diseo personalizado a un formulario web usando archivos CSS (Cascading Style
Sheet), para lo cual deber efectuar los pasos descritos a continuacin:
1. Agregue un nuevo elemento (plantilla Style Sheet) y asgnele un nombre.
2. Haga doble clic en el archivo recin creado para escribir el cdigo CSS (o copiarlo de algn
archivo existente para pegarlo en el archivo recin creado).
3. En el formulario web cambie a vista Design.
4. Seleccione el archivo CSS y arrstrelo 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 informacin 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
es/library/system.web.ui.webcontrols.radiobuttonlist(v=vs.110).aspx
es/library/system.web.ui.webcontrols.checkboxlist(v=vs.110).aspx
OBTENER VENTANAS EMERGENTES.

Para generar una ventana emergente (pop up window) en la pgina ASP .NET agregue un botn y
al formulario web y codifquelo usando cualquiera de estos dos mtodos:
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>");
}
21 de 21

1.3. Controles Web - Parte 1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1.3. Controles Web - Parte 1

Uploaded by

Copyright:

Available Formats

Programacin II Ing.

Ren Alberto Castro Velsquez

UNIDAD I COMPONENTES Y CONTROLES PARA EL DISEO DE UN SITIO WEB.

CONTROLES WEB PARA MOSTRAR TEXTO.

USANDO EL CONTROL WEB LITERAL.

Para establecer programticamente el valor de la propiedad web Literal, se usa la siguiente

USANDO EL CONTROL WEB LABEL.

CONTROLES WEB PARA CAPTURAR INFORMACIN.

EXAMINANDO EL ELEMENTO HTML <INPUT>

checkbox Define una casilla de verificacin.

radio Define un botn de seleccin.

Submit Define un botn de envo.

Para mostrar una casilla de verificacin se usara:

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

1 Puede obtener informacin adicional en https://en.wikipedia.org/wiki/Body_mass_index

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

USANDO CONTROLES WEB EN FORMULARIOS WEB ASP .NET.

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

No. Control Propiedad Valor

Font, Bold True

2 Label2 AssociatedControlID txtAltura

Text Su altura (en centmetros):

3 Label3 AssociatedControlID txtPeso

Text Su peso (en libras):

No. Control Propiedad Valor

4 Label4 ForeColor Red

5 TextBox1 (ID) txtAltura

6 TextBox2 (ID) txtPeso

public partial class _Default : Page

protected void enviar_Click(object sender, EventArgs e)

// Validar que la altura sea un valor numrico

// Validar que el peso sea un valor numrico

// Convertir centmetros a pulgadas

// Calcular el ndice de masa corporal

// Mostrar el valor IMC

else if (masa < 35)

CREANDO CAJAS DE TEXTO MULTILNEAS Y CONTRASEAS.

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

La caja de contrasea debera comportarse de la manera siguiente si digita dentro de ella:

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

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

Como ejemplo, se presenta el cdigo siguiente:

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

EXAMINANDO LOS DIFERENTES TIPOS DE CLASIFICACIN DE ENTRADAS DE USUARIO.

CONTROL WEB DROPDOWNLIST

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

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

4. Agregue y configure los controles mostrados en la tabla de configuracin de controles.

No. Control Propiedad Valor

Font, Bold True

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

El diseo debera verse de forma similar a la figura siguiente:

5. Presione la tecla F7 y escriba el cdigo resaltado en color celeste:

public partial class _Default : Page

protected void Seleccionar_Click(object sender, EventArgs e)

6. Ejecute el cdigo en un navegador web presionando la combinacin de teclas CTRL + F5.

Antes de usa el botn Seleccionar. Despus de usar el botn Seleccionar.

CONTROL WEB RADIOBUTTONLIST.

En el archivo de cdigo adyacente efecte los cambios resaltados en color celeste.

public partial class _Default : Page

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