Marcos de DesarrolloDiseñ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 tagsy atributos

Propiedades y eventos de un controlpropiedades 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 nombredeterminado, 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"/>

<input type="text" id="txtName" runat="server"/>

txtName.BackColor = System.Drawing.Color.Grey;

String userName = txtName.Value;

Transformamos el elemento

HTML en control de servidor

HTML

Ahora, es posible acceder a las

propiedades del control desde CB

pagina.html (o .aspx)

pagina.aspx

pagina.aspx.cs

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

<asp:Panel> <div> </div>BackImageUrl, DefaultButton, GroupingText, HorizontalAlign, Scrollbars, Wrap

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

Cada control puede incluir adicionalmente propiedades específicas

Generan HTML acorde al navegador que llama a la página. Para el CheckBox

definido, se genera el HTML:

<asp:RadioButton ID="rbtRadioButton" runat="server" BackColor="red"

Text= "..." />

<asp:CheckBox ID="chkCheckBox" runat="server" BackColor="red"

Text= "..." />

<asp:CheckBox ... Checked="true"/>

<span style="background-color:Red;">

<input id="chkCheckBox" type="checkbox" name="chkCheckBox"

checked="checked" />

</span>

Web Controls de validaciónDiseñ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:

NOTA: los controles de validación pueden configurarse de forma sencilla a través de la ventana "Properties" del VS.

<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>

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.Net4 in C# 2010. 4th Ed. Apress. 2010.