Académique Documents
Professionnel Documents
Culture Documents
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.
1 de 21
Programacin II Ing. Ren Alberto Castro Velsquez
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.
2 de 21
Programacin II Ing. Ren Alberto Castro Velsquez
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";
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).
Valor por defecto. Define una caja de texto de una sola lnea (la longitud por defecto
text
es de 20 caracteres).
3 de 21
Programacin II Ing. Ren Alberto Castro Velsquez
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" />
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>
4 de 21
Programacin II Ing. Ren Alberto Castro Velsquez
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:
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
Programacin II Ing. Ren Alberto Castro Velsquez
</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.
6 de 21
Programacin II Ing. Ren Alberto Castro Velsquez
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:
(ID) lblTitulo
Calculadora de ndice de
Text
Masa Corporal
(ID) lblAltura
(ID) lblPeso
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
Programacin II Ing. Ren Alberto Castro Velsquez
(ID) lblInfo
Text
(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
Programacin II Ing. Ren Alberto Castro Velsquez
</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
Programacin II Ing. Ren Alberto Castro Velsquez
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;
10 de 21
Programacin II Ing. Ren Alberto Castro Velsquez
Ejecute el cdigo anterior utilizando la combinacin de teclas CTRL + F5. Debera obtener una
pantalla similar a la siguiente:
11 de 21
Programacin II Ing. Ren Alberto Castro Velsquez
<!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 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>
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.
12 de 21
Programacin II Ing. Ren Alberto Castro Velsquez
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
ForeColor Especifica el color del texto introducido por el usuario en la caja de texto.
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
Programacin II Ing. Ren Alberto Castro Velsquez
14 de 21
Programacin II Ing. Ren Alberto Castro Velsquez
(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
Text
15 de 21
Programacin II Ing. Ren Alberto Castro Velsquez
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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<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: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 21
Programacin II Ing. Ren Alberto Castro Velsquez
1 2
4
3
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
Programacin II Ing. Ren Alberto Castro Velsquez
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<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: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>
18 de 21
Programacin II Ing. Ren Alberto Castro Velsquez
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<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:TableCell runat="server">
<asp:CheckBoxList ID="chbPaises" runat="server">
<asp:ListItem>Belice</asp:ListItem>
<asp:ListItem>Guatemala</asp:ListItem>
<asp:ListItem Selected="True">El
19 de 21
Programacin II Ing. Ren Alberto Castro Velsquez
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>
20 de 21
Programacin II Ing. Ren Alberto Castro Velsquez
21 de 21