Controles de Servidor

Marcos de Desarrollo
Diseño e implementación de aplicaciones Web con .NET
Objetivos
 Conocer los tipos de controles de servidor existentes
en ASP.NET
 Conocer los controles de tipo Web Controls y sus
propiedades y eventos
 Saber realizar validación de la entrada usando
controles de validación de ASP.NET
Controles de servidor
 Son clases en el .NET Framework que representan
elementos visuales en un Web Form (un botón, un
campo de texto, un checkbox, etc.)
 Se ejecutan en el lado del servidor
 Poseen el atributo runat="server"
 Pueden mantener su “estado” entre “PostBacks”

Para esto hacen uso del atributo ViewState
 Se distinguen dos tipos de controles de
servidor
 HTML Controls
 Web Controls
Caja de herramientas de
controles (Ctrl+Alt+X)
¿Cómo se definen los controles?
 Dos opciones:
a) Pueden ser arrastrados directamente de la barra de
herramientas a la vista de diseño o a la vista de código
(de una página .aspx)
b) Pueden definirse directamente en la vista de código

IntelliSense y Code Snippets ayudan con los diferentes tags
y atributos
Propiedades y eventos de un control
propiedades
eventos (sólo Web Controls)
Tipos de controles de servidor
Jerarquía de controles de servidor
(Extraído de: MacDonald, 2010)
Propiedades de System.Object.Control
 ClientID: Identificador único, creado por ASP.NET cuando se instancia la
página
 Controls: Colección de controles
 EnableViewState: indica si el control debería mantener su estado entre
peticiones (true por defecto)
 ID: identificador del control. Es el nombre a través del cual se puede acceder al
control desde código.
 Page: referencia a la página que contiene el control
 Parent: referencia al "padre" del control (puede ser la página u otro control)
 Visible: indica si el control debe renderizarse
Métodos de System.Object.Control
 DataBind(): enlaza el control con un DataSource
 FindControl(): busca un control con un nombre
determinado, en el control actual y en sus "hijos"
 HasControls(): indica si el control tiene controles "hijo"
 RenderControl(): genera HTML de salida para el control
(no se puede llamar directamente, lo hace ASP.NET
HTML Controls
 Se corresponden con elementos
HTML estándar
 Por defecto, los elementos HTML
no son accesibles desde código del
lado del servidor
 Desde CodeBehind no es posible
acceder a sus propiedades
(modificar el texto de un botón,
leer el estado de las casillas de un
Checkbox, …)
Pestaña HTML en la
Caja de herramientas
HTML Controls
 ASP.NET permite "convertir" elementos existentes en
HTML (e.g. button, radio, checkbox, text, …) en "controles
de servidor", simplemente añadiendo los atributos:
 runat="server"
 id
 A partir de ese momento, es posible acceder al control
desde el lado del servidor
 Se encuentran definidos como objetos dentro del
Namespace
 System.Web.UI.HtmlControls
HTML Controls
<input type="text"/>
pagina.html (o .aspx)
<input type="text" id="txtName" runat="server"/>
Transformamos
el elemento
HTML en control
de servidor
HTML
pagina.aspx
txtName.BackColor = System.Drawing.Color.Grey;
String userName = txtName.Value;
pagina.aspx.cs
Ahora, es posible
acceder a las
propiedades del
control desde CB
Web Controls
 Accesibles del lado del servidor
 Poseen mayor funcionalidad
 Son del tipo <asp:nombre_control>
 No tienen relación 1:1 con elementos HTML
 Un Web Control puede generar varios elementos HTML al
"renderizarse"
 Se encuentran definidos como objetos dentro del Namespace
 System.Web.UI.WebControls
Web Controls
 Tipos de WebControls
 Standard
 De acceso a datos
 De validación
 De navegación
…
Web Controls
 Ejemplo:
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
pagina.aspx
this.TextBox1.Text = "Texto establecido en
Code-Behind";
pagina.aspx.cs
Principales Web controls (1 de 2)
Web Control
HTML generado
Principales props. y events.
<asp:Button>
<input type="submit"> o
<input type="button"/>
Text, CausesValidation,
PostBackUrl, ValidationGroup,
evento Click
<asp:CheckBox>
<input type="checkbox">
AutoPostBack, Checked, Text,
TextAlign, evento CheckedChanged
<asp:HyperLink>
<a href="…"> </a>
ImageUrl, NavigateUrl, Target, Text
<asp:Image>
<img src="…" />
AlternateText, ImageAlign, ImageUrl
<asp:ImageButton>
<input type="image">
CausesValidation, ValidationGroup,
evento Click
<asp:Label>
<span> </span>
Text, AssociatedControlID
<asp:LinkButton>
<a><img/></a>
Text, CausesValidation,
ValidationGroup, evento Click
<div> </div>
BackImageUrl, DefaultButton,
GroupingText, HorizontalAlign,
Scrollbars, Wrap
<asp:Panel>
Principales Web controls (2 de 2)
Web Control
HTML generado
Principales props. y events.
<asp:RadioButton>
<input type="radio">
AutoPostBack, Checked, GroupName,
Text, TextAlign,
evento CheckedChanged
<asp:Table>
<table> </table>
BackImageUrl, CellPadding,
CellSpacing, GridLines,
HorizontalAlign, Rows (collection)
<asp:TableCell>
<td>...</td>
ColumnSpan, HorizontalAlign,
RowSpan, Text, VerticalAlign, Wrap
<asp:TableRow>
<tr>...</tr>
Cells (collection),
HorizontalAlign, VerticalAlign
<asp:TextBox>
<input type="text"/> o
<textarea>...</textarea>
AutoPostBack, Columns, MaxLength,
ReadOnly, Rows, Text, TextMode,
Wrap, evento TextChanged
Propiedades comunes a todos los Web Controls

Además de los atributos ID y runat, otras propiedades comunes son

CssClass: define el atributo HTML class. Este nombre apunta a una clase CSS definida en la página o
en un archivo externo

Enabled: determina si el usuario puede interactuar con el control en el navegador. Por ejemplo, en un
TextBox desabilitado no se puede modificar el texto

TabIndex: fija el atributo HTML tabindex que determina el orden en el que los usuarios pueden
moverse a través de los controles en la página pulsando la tecla Tab

Tooltip: permite fijar un tooltip para el control, que se renderiza como un atributo title en el HTML

Visible: determina si el control se envía o no al navegador (no sólo no se muestra, si no que ni siquiera
se envía)

Otras propiedades comunes son BackColor, BorderColor , BorderStyle, BorderWidth, Font ,
ForeColor, Height, Width, relacionadas con el estilo

El HTML resultante contiene atributo style (resulta fácil de portar a CSS)

Es recomendable utilizar CSS en una hoja externa
Web Controls
 Las propiedades comunes facilitan la programación
<asp:RadioButton ID="rbtRadioButton" runat="server" BackColor="red"
Text= "..." />
<asp:CheckBox ID="chkCheckBox" runat="server" BackColor="red"
Text= "..." />
 Cada control puede incluir adicionalmente propiedades específicas
<asp:CheckBox ... Checked="true"/>
 Generan HTML acorde al navegador que llama a la página. Para el CheckBox
definido, se genera el HTML:
<span style="background-color:Red;">
<input id="chkCheckBox" type="checkbox" name="chkCheckBox"
checked="checked" />
</span>
Web Controls de validación
Diseño e implementación de aplicaciones Web con .NET
Web Controls de Validación
 Son elementos ocultos que validan las entradas de datos contra algún patrón
 Validación en el lado del cliente
 Permite avisar al usuario antes de enviar los datos al servidor. Es más rápido y
ahorra recursos
 Implica generar código del lado del cliente (JavaScript)
 Los controles de validación de ASP.NET lo hacen automáticamente
 Esta validación es opcional, aunque está activada por defecto
 Validación en el lado del servidor
 Independientemente de si los datos han sido validados en el lado del cliente o
no, ASP.NET repite la validación en el lado del servidor por razones de
seguridad (un atacante podría saltar la validación del lado del cliente)
Web Controls de Validación
 ASP.NET proporciona 6 controles
 RequiredFieldValidator. Comprueba que el
control que tiene que validar no está vacío en el
momento de enviar el formulario (submit)
 RangeValidator. Valor dentro de un rango de tipos.
 CompareValidator. Valida contra un valor
constante o contra otro control (mayor qué, menor
qué, …)
 RegularExpressionValidator. Valida contra un
patrón o expresión regular
 CustomValidator. Permite definir una validación
personalizada desde el lado del cliente y su
correspondiente validación del lado del servidor.
 ValidationSummary. No es un validador en sí
mismo. Muestra de forma agrupada los mensajes de
error generados por otros controles
Pestaña "Validation" en la
caja de herramientas
La clase BaseValidator
 Los controles de validación se encuentran en System.Web.UI.Controls
 Extienden la clase BaseValidator. Esta clase define la funcionalidad básica
de un control de validación:
 ControlToValidate: indica el control a validar
 Display: indica cómo se muestra el mensaje de error
Static, el espacio para mostrar el mensaje se reserva
 Dynamic, la página cambiará dinámicamente para mostrar el mensaje de error
 EnableClientScript: propiedad booleana que especifica si se realizará
validación del lado del cliente o no
 Enabled. Propiedad booleana que permite habilitar o deshabilitar el validador

La clase BaseValidator
 Extienden la clase BaseValidator. Esta clase define la funcionalidad básica
de un control de validación (cont.):
 ErrorMessage: cadena que se muestra en el resumen de errores utilizado por el





control ValidationSummary
Text: cadena que se muestra en el control de validación si la validación falla
IsValid: determina si el valor del control asociado es válido
SetFocusOnError: si es true, el navegador cambia el foco al control que falló en la
validación (el primero en la secuencia Tab, si hay varios)
ValidationGroup: permite agrupar validadores y realizar la validación por grupo
(útil si hay varias secciones en la página, cada una con opción de submit)
Validate(): este método efectúa nuevamente la validación y actualiza el valor de
la propiedad IsValid. La página web llama a este método cuando una página
realiza un postback debido a un control con CausesValidation="true".
Web Controls de Validación
 Ejemplo:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="Campo Obligatorio (resumen)"
ControlToValidate="TextBox1">Campo Obligatorio
</asp:RequiredFieldValidator>
<asp:CompareValidator ID="CompareValidator1" runat="server"
ControlToValidate="TextBox1" ErrorMessage="CompareValidator"
Operator="GreaterThan" ValueToCompare="0">El número debe ser mayor que 0
</asp:CompareValidator>
 NOTA: los controles de validación pueden configurarse de forma sencilla a
través de la ventana "Properties" del VS.
Web Controls de Validación
 Recordar que la validación tiene lugar después de que se cargue la página
(Page_Load), pero antes de que sucedan otros eventos (e.g. OnClick)
 En el manejador del evento, antes de ejecutar el código, se puede comprobar si la
página es válida con la propiedad Page.IsValid
protected void Button1_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
// codigo a ejecutar...
}
}
Bibliografía
 Recomendada:
 M. MacDonald, A. Freeman, M. Szpuszta. Pro ASP.Net
4 in C# 2010. 4th Ed. Apress. 2010.