Utilizando JavaScript desde código ASP.NET

Actualmente es difícil construir una aplicación ASP.NET que no haga uso de las capacidades de JavaScript para realizar operaciones del lado del cliente o browser, operaciones que si fueran desarrolladas en su totalidad con la arquitectura ASP.NET serian demasiado costosas, basta recordar que ASP.NET es una arquitectura totalmente hecha para su uso del lado del servidor, por lo que hace uso de un mecanismo de Postback o de ida y vuelta entre los datos de la página solicitada por el cliente y por el servidor que proporciono la página, por lo que el mecanismo de Postback hace uso de uno de los recursos más valiosos de una red: el ancho de banda.

Durante ese viaje pueden ocurrir eventos que retarden o interrumpan la respuesta del servidor, causando una pérdida o una retrasmisión de los datos por parte del usuario resultando en una forma ineficiente de comunicación ya que ASP.NET reconstruye la página completa con todo su contenido en cada solicitud.

Para ayudar a no utilizar con frecuencia este mecanismo, hay que utilizar JavaScript en el cliente o browser como un complemento a las operaciones ASP.NET. Para utilizar JavaScript junto a ASP .NET, existe la clase ClientScriptManager la cual se programa mediante la propiedad ClientScript de la clase Page, la cual expone métodos que permiten incrustar código JavaScript dentro de la página ASP.NET.

Los métodos más comunes usados de esta clase son:

  1. RegisterClientScriptBlock: Incrusta el código JavaScript al inicio del formulario después de la etiqueta
    , genera dinámicamente el código JavaScript desde una cadena.
  2. RegisterStartupScript: Incrusta el código JavaScript en el final de la página, antes del cierre del formulario o sea antes del cierre de la etiqueta

    , por lo que se recomienda para operaciones con controles HTML o ASP.NET, ya que hace referencia a ellos una vez cargados.

  3. RegisterClientScriptInclude: sirve para ejecutar el código JavaScript que se guarda en un archivo externo (comúnmente con extensión .js) tiene dos cadenas como argumentos un nombre para identificar el script y el archivo que contiene el código JavaScript.

Como ejemplo mostraremos una página ASP.NET que utiliza dos listas de usuarios (ListBox) y dos botones (HTML input) que se utilizan para mover los usuarios de una lista hacia otra.
Los eventos son controlados mediante código JavaScript, esto sin utilizar código JavaScript incrustado en la página HTML, sino que el código JavaScript se genera desde código ASP.NET.
A continuación, el código Default.aspx:



El código ASPX/HTML de este ejemplo no crea funcionalidad alguna por lo que explicaremos la funcionalidad contenida en el código C#, en el código Default.aspx.cs.



Primero creamos el código JavaScript que tendra la funcionalidad para agregar los elementos de una lista hacia la otra, esto se logra con la función FuncCopyItem(string name, string source, string destiny) esta función recibe tres argumentos el nombre de la función JavaScript que se creará en el código HTML al solicitar la página y con la cuál se identificaran los eventos de los controles , el control ListBox fuente de donde inicialmente se tomarán los items y por último el control ListBox destino a donde se pondrán los items.
Con la siguiente línea de código:

    ClientScriptManager cs = Page.ClientScript;

Obtenemos el objeto ClientScriptManager de la página, con él cual utilizaremos el metódo cs.RegisterStartupScript con sus parámetros correspondientes, algo importante por lo cuál usamos este metódo es por que para construir el código JavaScript utilizamos la propiedad ClientID del control ListBox, es decir el control debe existir obligatoriamente de lo contrario, cuando ASP .NET contruya la página contruirá el código JavaScript con estos parámetros nulos lo que causará un error no en la página ASP.NET sino en el código JavaScript cuando se llame para ejecutarse.

Fig 1 La vista del proyecto en Monodevelop.

Fig 2 Ejecutando la aplicación ASP.NET en Internet Explorer 9.0

Fig 3 Ejecutando la aplicación ASP.NET en Firefox.

Fig 4 Mostrado el código JavaScript en la página generada por ASP.NET.

Descarga el proyecto para MonoDevelop

Usando los controles de validación ASP .NET III (RegularExpressionValidator)

Este control es verdaderamente útil, si necesitamos comparar el valor de un campo con una expresión regular , este control aplica esencialmente si queremos comparar el formato de una dirección de correo electrónico,una fecha o un código postal entre o bien para buscar un patrón dentro del texto.


Veamos el siguiente formulario como ejemplo:

<%@Page Language="C#" AutoEventWireup="false" 
CodeBehind="RegularExpression.aspx.cs"
Inherits="blog.listings.RegularExpression"
%>
<html>
<head>
<title>Expresiones Regulares</title>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>Fecha (dd/mm/yyyy)</td>
<td><asp:TextBox ID="txtDate" runat="server"></asp:TextBox></td>
<td>
<asp:RequiredFieldValidator ID="reqvtxtDate" runat="server"
ErrorMessage="* Obligatorio" ControlToValidate="txtDate">

</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rexpvtxtDate" runat="server"
ErrorMessage="* Invalida"
ValidationExpression="(0[1-9]|[12][0-9]|3[01])[- /.]
(0[1-9]|1[012])[- /.](19|20)\d\d" ControlToValidate="txtDate">

</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>Teclea un URL</td>
<td><asp:TextBox ID="txtUrl" runat="server"></asp:TextBox></td>
<td>
<asp:RequiredFieldValidator ID="reqvtxtUrl" runat="server"
ErrorMessage="* Obligatorio" ControlToValidate="txtUrl">

</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rexpvtxtUrl" runat="server"
ErrorMessage="* Invalida"
ValidationExpression="http://([\w-]+\.)+[\w-]+(/[\w- ./?%&amp;=]*)?"
ControlToValidate="txtUrl">

</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>Teclea un código postal</td>
<td><asp:TextBox ID="txtCp" runat="server"></asp:TextBox></td>
<td>
<asp:RequiredFieldValidator ID="reqvtxtCp" runat="server"
ErrorMessage="*Obligatorio" ControlToValidate="txtCp">

</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rexptxtCp" runat="server"
ErrorMessage="* Invalido"
ValidationExpression="\d{5}(-\d{4})?"
ControlToValidate="txtCp">

</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>Correo Electrónico</td>
<td><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>
<td>
<asp:RequiredFieldValidator ID="reqvtxtEmail" runat="server"
ControlToValidate="txtEmail" ErrorMessage="* Obligatorio">

</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rexptxtEmail" runat="server"
ErrorMessage="* Invalido" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">

</asp:RegularExpressionValidator>
</td>
</tr>
</table>
<p><asp:Button ID="btnSubmit" runat="server" Text="Enviar"></asp:Button></p>
<asp:Label ID="lbMsg" runat="server"></asp:Label>
</form>
</body>
</html>

y su correspondiente código de clase:

Lo compilamos:

  • (.NET)csc /t:library -r:System.Web RegularExpression.aspx.cs
  • (mono) mcs /t:library -r:System.Web RegularExpression.aspx.cs

Lo instalamos: copiamos el ensamblado a la carpeta bin, ejecutamos xsp y abrimos el navegador con la dirección http://localhost:8080/RegularExpression.aspx.
Al ejecutar el programa se mostrará como en la siguiente imagen.

Propiedades del control RegularExpressionValidator


  1. display Esta propiedad puede tener 3 valores: Static es la propiedad predeterminada, reserva un espacio suficiente en la página para mostrar el mensaje de error.Dynamic el espacio para mostrar el mensaje no se reserva, cuando el mensaje se despliega se desplaza el contenido existente en la página. None el mensaje no será desplegado en el lugar del control sino en el control ValidationSummary si se localiza en la misma página.


  2. ValidatorExpression El valor de la expresión regular con la que se compara el valor del control a validar.


  3. controlToValidate El identificador del control donde obtenemos el valor para validar.


  4. ErrorMessage El texto del mensaje de error a desplegar

 Descarga el código fuente

Usando los controles de validación ASP .NET II (RangeValidator)

Si necesitamos asegurarnos que el valor de un campo se encuentre dentro de unos limites es decir dentro de un rango especifico, el control RangeValidator se asegura que el valor de un campo sea del tipo que necesitemos y se encuentre dentro de los valores iniciales y finales que necesitemos, el código del formulario es el siguiente:

<%@Page language="C#" AutoEventWireUp="false" 
CodeBehind="ValidarRango"
Inherits="blog.listings.ValidarRango"
%>
<html>
<head><title>Validar Rango</title></head>
<body>
<p>Fecha de nacimiento</p>
<form id="frmRange" runat="server">
<table>
<tr>
<td>Dia</td>
<td>
<asp:TextBox id="txtDay" Runat="server" Maxlength="2"
Columns="3"></asp:TextBox>

<asp:RangeValidator id="rngvtxtDay" Runat="server"
Display="Dynamic" ErrorMessage="* Fuera de rango"
ControlToValidate="txtDay" Type="Integer" MinimumValue="1"
MaximumValue="31"></asp:RangeValidator>

<asp:RequiredFieldValidator id="reqvtxtDay" Runat="server"
ControlToValidate="txtDay" ErrorMessage="* Obligatorio">

</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>Mes</td>
<td>
<asp:TextBox id="txtMonth" Runat="server" Maxlength="2"
Columns="3"></asp:TextBox>

<asp:RangeValidator id="rngvtxtMonth" Runat="server"
Display="Dynamic" ErrorMessage="* Fuera de rango"
ControlToValidate="txtMonth" Type="Integer" MinimumValue="1"
MaximumValue="12"></asp:RangeValidator>

<asp:RequiredFieldValidator id="reqvtxtMonth" Runat="server"
ControlToValidate="txtMonth" ErrorMessage="* Obligatorio">

</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>Año (entre 1950 y 1989)</td>
<td>
<asp:TextBox id="txtYear" Runat="server" MaxLength="4"
Columns="6"></asp:TextBox>

<asp:RangeValidator id="rngvtxtYear" Runat="server" Display="Dynamic"
ErrorMessage="* Fuera de rango" ControlToValidate="txtYear" Type="Integer"
MinimumValue="1950" MaximumValue="1989"></asp:RangeValidator>

<asp:RequiredFieldValidator id="reqvtxtYear" Runat="server"
ControlToValidate="txtYear" ErrorMessage="* Obligatorio">

</asp:RequiredFieldValidator>
</td>
</tr>
</table>
<br>
<asp:Button id="btnSubmit" Runat="server" Text="Validar"></asp:Button>
<br>
<asp:Label id="lbMsg" Runat="server"></asp:Label>
</form>
</body></html>

y el código de la clase es:

Lo compilamos:

  • (.NET)csc /t:library -r:System.Web ValidarRango.aspx.cs
  • (mono) mcs /t:library -r:System.Web ValidarRango.aspx.cs

Lo instalamos: copiamos el ensamblado a la carpeta bin ejecutamos xsp y abrimos el navegador con la dirección http://localhost:8080/ValidarRango.aspx.
Si todo es correcto se mostrará la ejecucción como en la siguiente imagen:

Propiedades del control RangeValidator



  1. display Esta propiedad puede tener 3 valores: Static es la propiedad predeterminada, reserva un espacio suficiente en la página para mostrar el mensaje de error.Dynamic el espacio para mostrar el mensaje no se reserva, cuando el mensaje se despliega se desplaza el contenido existente en la página. None el mensaje no será desplegado en el lugar del control sino en el control ValidationSummary si se localiza en la misma página.


  2. type El tipo de datos de los valores a comparar, los tipos de datos disponibles para este control son: Currency (moneda), Date (fecha), Double (valor de punto flotante), Integer (Entero sin punto decimal), String (Cadena).

  3. controlToValidate El identificador del control donde obtenemos el valor para validar.

  4. minimumValue El valor mínimo del rango.


  5. maximumValue El valor máximo del rango.



 Descarga el código fuente

Usando los controles de validación ASP .NET (RequiredFieldValidator)

Verificando la información de los formularios con los controles de validación

Algo indispensable en el desarrollo de formularios que trabajan con bases de datos, es la validación de los datos que solicitamos, acciones que son repetitivas e importantes ya que están relacionadas con la integridad y la seguridad de nuestra aplicación, una mala validación de los formularios puede convertirse en un problema que va desde un formato inadecuado o ataques con sentencias SQL (SQL Injection).
NET provee de controles web (Web Controls) de validación que nos ayudan a realizar este tipo de tareas, tareas como: verificar que los datos que necesitemos estén completos en el formulario, comparar que el tipo de datos que solicitemos coincida con el tipo de datos donde se va a almacenar en la base de datos, que los datos se encuentren en el formato que necesitamos, etc, estos controles no solo nos ahorran tiempo de codificación sino que también están diseñados para detectar la versión del navegador (browser) y así presentar el mejor HTML para ese navegador.

Validando los campos obligatorios con RequiredFieldValidator

Una de las primeras tareas que se necesitan cuando se desarrolla una aplicación es verificar que antes de que la información sea devuelta con los cambios hacie el servidor la información cumpla con los
criterios obligatorios para continuar, incluso antes de la tarea de validar el formato de los campos, debemos asegurarnos que eses campos tienen información y los campos necesarios no estan sin información, el control RequiredFieldValidator nos ayuda a esa tarea, el código del formulario es el siguiente:

y el código de la clase es:

Lo compilamos:

(.NET) csc /t:library CampoRequerido.aspx.cs
(mono) mcs /t:library CampoRequerido.aspx.cs

Lo instalamos: copiamos el ensamblado a la carpeta bin
ejecutamos xsp y abrimos el navegador con la dirección http://localhost:8080/CampoRequerido.aspx

Al presionar el botón para enviar los datos al servidor se verifica que el atributo de la página Page.IsValid regrese un valor verdadero, si es falso desplegará el mensaje de error de lo contrario desplegará el texto en el control etiqueta Label. En la siguiente imagen se muestra la ejecucción del programa.

Propiedades del control RequiredFieldValidator


  1. controlToValidate El control de donde obtendremos el valor para evaluar

  2. errorMessage El texto del mensaje que se desplegara si no se cumplen las condiciones

  3. display Esta propiedad puede tener 3 valores: Static es la propiedad predeterminada, reserva un espacio suficiente en la página para mostrar el mensaje de error.Dynamic el espacio para mostrar el mensaje no se reserva, cuando el mensaje se despliega se desplaza el contenido existente en la página. None el mensaje no será desplegado en el lugar del control sino en el control ValidationSummary si se localiza en la misma página.

 Descarga el código fuente