Marcos de Desarrollo. Diseño e implementación de aplicaciones Web con.net

Transcripción

1 Marcos de Desarrollo Diseño e implementación de aplicaciones Web con.net

2 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

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

4 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

5 Propiedades y eventos de un control propiedades eventos (sólo Web Controls)

6 Tipos de controles de servidor Jerarquía de controles de servidor (Extraído de: MacDonald, 2010)

7 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

8 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

9 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

10 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

11 HTML Controls <input type="text"/> pagina.html (o.aspx) <input type="text" id="txtname" runat="server"/> pagina.aspx Transformamos el elemento HTML en control de servidor HTML txtname.backcolor = System.Drawing.Color.Grey; String username = txtname.value; pagina.aspx.cs Ahora, es posible acceder a las propiedades del control desde CB

12 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

13 Web Controls Tipos de WebControls Standard De acceso a datos De validación De navegación

14 Web Controls Ejemplo: <asp:textbox ID="TextBox1" runat="server"> </asp:textbox> pagina.aspx this.textbox1.text = "Texto establecido en Code-Behind"; pagina.aspx.cs

15 Principales Web controls (1 de 2) Web Control HTML generado Principales props. y events. <asp:button> <asp:checkbox> <input type="submit"> o <input type="button"/> <input type="checkbox"> Text, CausesValidation, PostBackUrl, ValidationGroup, evento Click 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> <asp:panel> <a><img/></a> <div> </div> Text, CausesValidation, ValidationGroup, evento Click BackImageUrl, DefaultButton, GroupingText, HorizontalAlign, Scrollbars, Wrap

16 Principales Web controls (2 de 2) Web Control HTML generado Principales props. y events. <asp:radiobutton> <asp:table> <asp:tablecell> <asp:tablerow> <asp:textbox> <input type="radio"> <table> </table> <td>...</td> <tr>...</tr> <input type="text"/> o <textarea>...</textarea> AutoPostBack, Checked, GroupName, Text, TextAlign, evento CheckedChanged BackImageUrl, CellPadding, CellSpacing, GridLines, HorizontalAlign, Rows (collection) ColumnSpan, HorizontalAlign, RowSpan, Text, VerticalAlign, Wrap Cells (collection), HorizontalAlign, VerticalAlign AutoPostBack, Columns, MaxLength, ReadOnly, Rows, Text, TextMode, Wrap, evento TextChanged

17 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

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

19 Web Controls de validación Diseño e implementación de aplicaciones Web con.net

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

21 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

22 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

23 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".

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

25 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... } }

26 Bibliografía Recomendada: M. MacDonald, A. Freeman, M. Szpuszta. Pro ASP.Net 4 in C# th Ed. Apress