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.