Archive for April 29, 2010

Regresando a lo básico – Javascript en ASP.NET

Hace unos días un amigo me preguntó algo curioso:

Necesito que todo lo que entre mi usuario en una caja de texto en ASP.NET se transforme automáticamente a mayúsculas. Se me había ocurrido usar OnTextChanged pero no se que tan efectivo podría resultarme.

Bien, considero que esta es algo así como una pregunta elemental, así que tomemonos el tiempo para analizarla y ver las opciones. Asumamos que no podemos usar ASP.NET Ajax Library, ni ASP.NET Ajax Toolkit. Tomemos en cuenta que tampoco podemos usar algo así como JQuery.

La implementación en ASP.NET que propone nuestro amigo se vería algo así:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebControls.aspx.cs"
    Inherits="WebApplication7.WebControls" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="nameText" runat="server"
            OnTextChanged="nameText_TextChanged"
            AutoPostBack="true" />
        <br />
        <asp:Label Id="nameLabel" runat="server" />
        <br />
        <asp:Button ID="acceptButton" runat="server" Text="Accept" />
    </div>
    </form>
</body>
</html>

Y el “codebehind” sería algo simple como esto:

using System;
using System.Web.UI;

namespace WebApplication7 {
    public partial class WebControls : Page {
        protected void Page_Load(object sender, EventArgs e) {
        }

        protected void nameText_TextChanged(object sender, EventArgs e) {
            nameText.Text = nameText.Text.ToUpper();
        }
    }
}

Bien, ASP.NET lo que hace al activar el "AutoPostback" es que en cuanto el control pierde su "focus" se envía la página completa de regreso al server, este procesa el evento (en este caso TextChanged) y regresamos el contenido en mayúsculas. Vemos un par de problemas con este caso en particular, el primero es lo poco "práctico" que es enviar toda la página de regreso solamente para hacer una operación "sencilla" como la es transformar el texto en mayúsculas (si, probablemente hay operaciones más "complejas" en las cuales se necesite hacer tal cosa, pero en este caso no se justifica). Tal operación es fácilmente hecha con un simple script de Javascript.

Cuando comenté esto mi amigo me respondió: hey, pero no estoy usando MVC, puedo usar fácilmente Javascript con ASP.NET?, pues, ¡claro que si!, hay varias maneras. Primero, veamos como sería la función de Javascript en cuestión:

function textToUppercase(sender) {
    if (sender && sender.value) {
        sender.value = sender.value.toUpperCase();
     }
}

Una función simple, nada del otro mundo. Bien, ahora solamente modificamos el TextBox para que luzca algo así:

<asp:TextBox ID="nameText" runat="server" onblur="textToUppercase(this);" />

Listo, con esto podemos elminar el codigo que hacía la misma operación en el server, ya no más postbacks :)

Recuerden, no hay problema si agregamos atributos extras de HTMl a nuestros controles de ASP.NET.

Moraleja: Aprovechen el proceso del lado del browser cliente, no abusen del codebehind. Javascript es su amigo, aprovechenlo. No en vano Microsoft esta invirtiendo tiempo para mejorar el soporte de Javascript y la programación al browser cliente para esta y las próximas versiones de ASP.NET.

String – IsNullOrWhiteSpace

Algo sumamente común en el chequeo de contracts y en la verificación de inputs o entradas es revisar si la entrada es nula o esta vacía. Algo que me topé hace unos días fue ver esta muestra de alguien que preguntaba algo

' Aquí va más código
If cmbEmpresa.Text = "" Then
    MessageBox.Show("Seleccione una empresa")
End If
' Aquí continua más código

La primera línea asume varias opciones que pueden no ser ciertas, ¿y si la cadena es nula?, ¿qué tal si la cadena contiene solamente espacios en blanco?. Probablemente para validar tales casos terminaremos con algo como esto

If String.IsNullOrEmpty(cmbEmpresa.Text) _
  OrAlso cmbEmpresa.Text.Trim().Length = 0 Then
    MessageBox.Show("Seleccione una empresa")
End If

Algo "verbose" a mi parecer, podríamos escribir un método de extensión que nos ayude y simplifique tal comparación (se los dejo de tarea). En la Framework 4 ahora existe un método nuevo, IsNullOrWhiteSpace, que nos simplifica la tarea

If String.IsNullOrWhiteSpace(cmbEmpresa.Text) Then
    MessageBox.Show("Seleccione una empresa")
End If

Enumeradores – Bit Flags

Todos recordamos que podemos usar los enumeradores como flags y luego recuperar la selección con operaciones de bit, por ejemplo, tomemos el siguiente enumerador (tomado de la documentación de MSDN):

[Flags]
public enum MultiHue {
    Black = 0,
    Red = 1,
    Green = 2,
    Blue = 4
}

Podemos pedirle al usuario de la API que seleccione un set de colores o tonalidades y luego obtener su selección mediante bit operations:

var hue = MultiHue.Black | MultiHue.Red;
var isRed = ((hue & MultiHue.Red) == MultiHue.Red);
var isGreen = ((hue & MultiHue.Green) == MultiHue.Green);

Bien, ahora en la .Net Framework 4.0 tenemos un nuevo método que nos hace mas “claro” la lectura de la bit flag:

var hue = MultiHue.Black | MultiHue.Red;
var isRed = hue.HasFlag(MultiHue.Red);
var isGreen = hue.HasFlag(MultiHue.Green);

No se ustedes pero este último es de mejor lectura para mi.

¡Saludos!

Lo nuevo en ASP.NET 4.0: Proyectos

Una de las primeras cosas que nos encontraremos diferentes (o ligeramente diferentes) al crear un proyecto web nuevo en ASP.NET 4.0 con Visual Studio 2010, es las ligeras variaciones con respecto a los proyectos web existentes, una vista rápida a los templates existentes en Visual Studio 2008 SP1 (tengan en cuenta que tengo un par de templates de usuario agregados)

New_Project-2010-04-10_22.11.42

Y el mismo cuadro mostrado en el nuevo cuadro de diálogo de Visual Studio 2010

New_Project-2010-04-10_22.15.26

Algo que notamos a simple vista es la existencia de un tipo “nuevo” de template de web application: Empty Web Application, realmente la Empty Web Application es algo muy similar al template de Web Application que encontrábamos en ASP.NET 3.5 pero sin Default.aspx ni Global.asax, es un template simple, excelente para crear aplicaciones web que simplemente seran repositorios de servicios o que luego tendran nuestro propio layout específico.

WebApplication4_-_Microsoft_Visual_Studio-2010-04-10_22.17.19

El contraparte de la Empty Web Application es la Web Application ejemplo, esta incluye scripts de javascript (la librería JQuery ahora es incluída junto con ASP.NET, si, javascript ahora es al fin considerado ciudadano de primer tipo en ASP.NET) junto con páginas para el manejo de las cuentas típicas del Membership y Role Providers de ASP.NET.

WebApplication5_-_Microsoft_Visual_Studio-2010-04-10_22.18.02

El sitio por defecto incluye estilos y una master page que para serles sincero no se ve nada mal (le recordaran mucho al template que venía con ASP.NET MVC)

SS-2010-04-10_22.23.09

Otros cambios notables que podemos notar en los templates de ASP.NET 4.0 son:

  • Se eliminó el proyecto de ASP.NET Web Service Application (si, los proyectos con asmx), recuerden que desde hace ratos existe WCF y los proyectos de servicio de WCF son la forma recomendada, ASMX es cosa del pasado.
  • El proyecto de servicio de WCF se movió a la categoría de WCF
  • Los dos proyectos de Dynamic Data fueron renombrados, probablemente por branding.

NOTA: Eso no implica que no pueden hacer ASMX’s en ASP.NET 4.0, simplemente ya no hay un proyecto para hacerlo.

El cuadro de diálogo para crear websites cambió también:

New_Web_Site-2010-04-10_22.31.45

Personalmente hubiera preferido que eliminaran el concepto de Website, pero creo que mucha gente en ese sentido diferirá grandemente conmigo :)

Por último, el landscape actual de ASP.NET 4.0 y su relación con los diferentes componentes puede ilustrarse de la siguiente manera (incluyendo su relación con librerías como JQuery):

image_2

¡Hasta la próxima pronta entrega!

Lo nuevo en ASP.NET 4.0: El reducido Web.config