Archivo categoría Ajax

Utilizando múltiples controles UpdateProgress en una sola página

Si tienes dos o más controles UpdatePanel que quieres que se actualicen por separado, quizás también quieras tener diferentes indicadores “un momento por favor…” para cada uno de ellos, con la finalidad de que se muestren en diferentes posiciones.

Antes de darte la solución considera este código:

ASP:
  1. <asp:ScriptManager ID="ScriptManager1" runat="server" />
  2.     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  3.         <Triggers>
  4.             <asp:AsyncPostBackTrigger ControlID="Boton1" EventName="Click" />
  5.         </Triggers>
  6.         <ContentTemplate>
  7.             <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0">
  8.                 <ProgressTemplate>
  9.                     Un momento por favor...
  10.                 </ProgressTemplate>
  11.             </asp:UpdateProgress>
  12.             <asp:Button ID="Boton1" runat="server" Text="Botón 1" />
  13.             <asp:Label ID="Hora1" runat="server" Text="<br />"></asp:Label>
  14.         </ContentTemplate>
  15.     </asp:UpdatePanel>
  16.     <br />
  17.     <br />
  18.     <asp:UpdatePanel ID="UpdatePanel2" runat="server">
  19.         <Triggers>
  20.             <asp:AsyncPostBackTrigger ControlID="Boton2" EventName="Click" />
  21.         </Triggers>
  22.         <ContentTemplate>
  23.             <asp:UpdateProgress ID="UpdateProgress2" runat="server" DisplayAfter="0">
  24.                 <ProgressTemplate>
  25.                     Un momento por favor...
  26.                 </ProgressTemplate>
  27.             </asp:UpdateProgress>
  28.             <asp:Button ID="Boton2" runat="server" Text="Botón 2" />
  29.             <asp:Label ID="Hora2" runat="server" Text=""></asp:Label>
  30.         </ContentTemplate>
  31.     </asp:UpdatePanel>

VB.NET:
  1. Protected Sub Boton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Boton1.Click
  2.         Threading.Thread.Sleep(1000)
  3.         Hora1.Text = "La hora es " & Now.ToString
  4.     End Sub
  5.  
  6.     Protected Sub Boton2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Boton2.Click
  7.         Threading.Thread.Sleep(1000)
  8.         Hora2.Text = "La hora es " & Now.ToString
  9.     End Sub

El cual genera lo siguiente:

image

Y al hacer clic en el botón 1 (o en el 2) ocurre lo siguiente:

image

Los dos controles UpdateProgress aparecieron porque es su comportamiento natural cuando se hace un postBack. Obviamente queremos que cada uno aparezca únicamente cuando se haga clic en su botón correspondiente.

Para hacerlo, utiliza la propiedad AssociatedUpdatePanelID del control UpdateProgress, de tal forma que tu código quede así:

ASP:
  1. <asp:ScriptManager ID="ScriptManager1" runat="server" />
  2.     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  3.         <Triggers>
  4.             <asp:AsyncPostBackTrigger ControlID="Boton1" EventName="Click" />
  5.         </Triggers>
  6.         <ContentTemplate>
  7.             <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel1">
  8.                 <ProgressTemplate>
  9.                     Un momento por favor...
  10.                 </ProgressTemplate>
  11.             </asp:UpdateProgress>
  12.             <asp:Button ID="Boton1" runat="server" Text="Botón 1" />
  13.             <asp:Label ID="Hora1" runat="server" Text="<br />"></asp:Label>
  14.         </ContentTemplate>
  15.     </asp:UpdatePanel>
  16.     <br />
  17.     <br />
  18.     <asp:UpdatePanel ID="UpdatePanel2" runat="server">
  19.         <Triggers>
  20.             <asp:AsyncPostBackTrigger ControlID="Boton2" EventName="Click" />
  21.         </Triggers>
  22.         <ContentTemplate>
  23.             <asp:UpdateProgress ID="UpdateProgress2" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel2">
  24.                 <ProgressTemplate>
  25.                     Un momento por favor...
  26.                 </ProgressTemplate>
  27.             </asp:UpdateProgress>
  28.             <asp:Button ID="Boton2" runat="server" Text="Botón 2" />
  29.             <asp:Label ID="Hora2" runat="server" Text=""></asp:Label>
  30.         </ContentTemplate>
  31.     </asp:UpdatePanel>

El código VB quedaría igual

De esta forma al oprimir el primer botón ocurrirá esto:

image

Y al oprimir el segundo botón verás esto:

image

De esta forma puedes colocar varios indicadores para cada una de las partes en las que dividas visualmente tu página.

No hay Comentarios

Cómo agregar el salto de línea a los caracteres válidos de un FilteredTextBoxExtender

En el Ajax Control Toolkit de ASP.NET, hay un control llamado FilteredTextBoxExtender que sirve para filtrar los caracteres que se pueden ingresar en un TextBox. Esto es útil, por ejemplo, para permitir únicamente el ingreso de números si estamos capturando un código postal mexicano.

Bueno, estaba usándolo en un TextBox con la propiedad TextMode establecida en MultiLine, lo que en HTML se despliega como un textArea, una caja de texto con múltiples líneas.

Esta es la definición de mi caja de texto y el control de filtrado:

ASP:
  1. <asp:TextBox ID="Tags" runat="server" TextMode="MultiLine" Width="200px"
  2.             Height="150px"></asp:TextBox>
  3.         <cc1:FilteredTextBoxExtender ID="Tags_FilteredTextBoxExtender" runat="server"
  4.             Enabled="True" TargetControlID="Tags"
  5.             ValidChars="abcdefghijklmnopqrstuvwxyz1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ">
  6.         </cc1:FilteredTextBoxExtender>

Como puedes ver, estoy permitiendo la entrada de letras mayúsculas, minúsculas, números y espacios. Pero como se trata de una caja de texto con múltiples líneas, obviamente quiero que se permita teclear saltos de línea cuando el individuo presione la tecla enter o intro.

Este caso es truculento, porque no puedes hacerlo en la página aspx, lo tienes que hacer en el código de servidor, de esta forma:

VB.NET:
  1. Tags_FilteredTextBoxExtender.ValidChars = Tags_FilteredTextBoxExtender.ValidChars & vbCrLf

Como sabrás, vbCrLf significa un salto de línea en Visual Basic, y lo que hace esa línea es añadirlo a los caracteres válidos.

Medio truculento pero funciona!

No hay Comentarios

Genera un delay en una aplicación ASP.NET

En ocasiones (muy raras tal vez) necesitarás generar un delay. Un tiempo de espera. Simplemente unos segundos en los que la aplicación duerma.

Te preguntarás para qué querría alguien esto. Bueno, uno de los casos en los que puede ser útil es si necesitas simular un tiempo de respuesta lento de la conexión a internet. Por ejemplo, si tienes un UpdateProgress de Ajax que estás probando en un servidor local, el procesamiento puede ser tan rápido que quizás nunca veas tu gif animado girar. En estos casos, puedes colocar un delay que te permita simular que el servidor y/o la conexión tardan un rato en reaccionar.

Para hacerlo, utiliza este código:

VB.NET:
  1. Threading.Thread.Sleep(3000)

Donde el 3000 que pongo son milisegundos, en este caso el tiempo de espera sería de 3 segundos.

2 Comentarios

Librería de JavaScript jQuery

Existen varios productos desarrollados en JavaScript que puedes comprar por separado para incluir en tus sitios web, como tabs (pestañas), acordeones, pop-ups, etc.

Pero hay una librería muy buena que es de descarga gratuita, se llama jQuery.

A pesar de ser libre está muy bien desarrollada, incluso tiene distintos temas de diseño de cuáles escoger. Cada componente tiene varias opciones de configuración que te permiten personalizarlos.

Esta librería contiene:

Interacciones

  • Arrastrar
  • Soltar
  • Dar tamaño
  • Seleccionar
  • Ordenar

Widgets

  • Acordeón
  • Seleccionador de fecha
  • Ventana emergente
  • Barra de progreso
  • Deslizador (slider)
  • Pestañas (tabs)

jquery

Si eres desarrollador también puedes desarrollar tus propios widgets usando esta librería.

Esta es la página donde encuentras los widgets:
http://ui.jquery.com/

No hay Comentarios

Cómo instalar una DLL en el GAC (Global Assembly Cache)

En ocasiones, cuando estás trabajando en Visual Web Developer 2008 con componentes ASP.NET de terceros (third party), notarás que no funciona el Intellisense y además el diseñador marca que tu componente no está definido. Este es un ejemplo de este problema con el componente FreeTextBox:

Component Not Declared

Noté que esto me pasaba por la siguiente razón:
Los archivos de mi aplicación están hosteados en un servidor (no en mi PC de desarrollo), por lo que creé una conexión a una unidad de red, asignándola a una letra. Es decir, había mapeado \\servidor\inetpub\wwwroot\proyecto a w:\proyecto. Al parecer si tienes tu servidor web de desarrollo corriendo en tu misma PC, lo anterior no ocurre, pero me parece que es muy probable que trabajes en una PC de desarrollo y accedas a un servidor de desarrollo mediante la red local donde están (y corren) los archivos de tu aplicación. Al menos es mi caso.

Para corregir esta situación tienes que agregar los DLLs del control en el GAC.

Deberás usar la utilidad gacutil.exe que viene en el SDK del .Net Framework 2. Si no lo tienes, descarga el SDK de aquí:
http://www.asp.net/Downloads/essential/

Coloca el componente (el DLL) en un fólder de la PC en la que usas Visual Web Developer 2008:
explorer.gif

Ahora abre una ventana de MS-DOS, cámbiate a la carpeta en la que tienes instalado el gacutil.exe y corre el comando:

gacutil -i nombredeldll.dll

Algo como esto:
Registrando el DLL en el GAC

Ahora reinicia Visual Web Developer, abre tu aplicación de nueva cuenta y mira como ya funciona el Intellisense y no aparece el error de que tu control no está declarado:
Intellisense funcionando

Espero que te sea de utilidad. :)

Actualización
Si necesitaras desinstalar la libreria del GAC, utiliza esta instrucción:
gacutil -u NombreDeLaLibreria
No escribas .dll
Por ejemplo:
gacutil -u FreeTextBox

2 Comentarios

Cómo evitar el error Sys.WebForms.PageRequestManagerParserErrorException

Utilizando ASP.NET 3.5 y AJAX me encontré con la siguiente excepción:

Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed. common causes for this error are when the response is modified by calls to Response.Write(), response filters, HttpModules, or server trace is enabled.

sys.gif

Para solucionarlo simplemente agrega una sección triggers a tu updatepanel referenciando al botón que envía el formulario. Así:

ASP:
  1. <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  2.    <Triggers>
  3.       <asp:PostBackTrigger ControlID="MiBoton" />
  4.    </Triggers>
  5.    <ContentTemplate>
  6.    ...tu contenido aquí...
  7.    </ContentTemplate>
  8. </asp:UpdatePanel>

Normalmente esto siempre funciona, pero si no, visita esta página que contiene toda la explicación completa y más opciones de resolución.

10 Comentarios

Iconos de espera para Ajax

¿Estás buscando tu propio icono (indicador) de espera para Ajax?

Esta página es muy buena, te permite crear el tuyo personalizado con los colores que desees, tiene una amplia variedad y los diseños están atractivos. La salida es un gif animado que puedes descargar.

http://www.ajaxload.info/

1 Comentario

Los controles de validación no funcionan dentro de un UpdatePanel

Estoy trabajando con:
ASP.NET 2.0.50727
Extensiones Ajax 1.0

Puse un UpdatePanel que contiene campos que el usuario va a llenar. Puse controles de validación para asegurarme de que el usuario llena los campos. Los controles de validación funcionaban de una manera extraña, y además aparecía este error:

Invalid postback or callback argument. Event validation is enabled using in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

Estuve investigando y resulta ser que los controles de validación no funcionan dentro de un UpdatePanel. Encontrarás más información aquí:
http://forums.asp.net/t/1116324.aspx (lee el segundo post).

Lo bueno es que hay una manera de darle la vuelta a este problema.

La razón del problema y la solución se encuentra aquí:
http://blogs.msdn.com/mattgi/archive/2007/01/23/asp-net-ajax-validators.aspx

Pero te la traduzco. :)

Tienes que bajarte estos archivos y ponerlos en el fólder bin de tu aplicación.

Después de eso, abre tu archivoweb.config y dentro de la sección Pages teclea lo siguiente:

XML:
  1. <tagMapping>
  2.         <add tagType="System.Web.UI.WebControls.CompareValidator"
  3.              mappedTagType="Sample.Web.UI.Compatibility.CompareValidator, Validators, Version=1.0.0.0"/>
  4.         <add tagType="System.Web.UI.WebControls.CustomValidator"
  5.              mappedTagType="Sample.Web.UI.Compatibility.CustomValidator, Validators, Version=1.0.0.0"/>
  6.         <add tagType="System.Web.UI.WebControls.RangeValidator"
  7.              mappedTagType="Sample.Web.UI.Compatibility.RangeValidator, Validators, Version=1.0.0.0"/>
  8.         <add tagType="System.Web.UI.WebControls.RegularExpressionValidator"
  9.              mappedTagType="Sample.Web.UI.Compatibility.RegularExpressionValidator, Validators, Version=1.0.0.0"/>
  10.         <add tagType="System.Web.UI.WebControls.RequiredFieldValidator"
  11.              mappedTagType="Sample.Web.UI.Compatibility.RequiredFieldValidator, Validators, Version=1.0.0.0"/>
  12.         <add tagType="System.Web.UI.WebControls.ValidationSummary"
  13.              mappedTagType="Sample.Web.UI.Compatibility.ValidationSummary, Validators, Version=1.0.0.0"/>
  14.       </tagMapping>

Yo lo probé y funciona perfectamente!

Más adelante Microsoft sacará un parche para no tener que hacer este truco, así que si se te presenta este problema, te recomiendo primero bajarte la versión más nueva de ASP.NET y de las Extensiones de Ajax.

1 Comentario

Sys.Debug.isDebug es nulo o no es un objeto

Si cuando intentas ver tu aplicación de Ajax en Internet Explorer te marca un error de JavaScript que dice:

'Sys.Debug.isDebug' es nulo o no es un objeto

En inglés:
'Sys.Debug.isDebug' is null or not an object

lo más probable es que no has instalado las últimas extensiones. Haz lo siguiente:

  1. Desinstala las Extensiones de Ajax
  2. Reinicia el IIS
  3. Descarga e instala las Extensiones de Ajax más nuevas de www.asp.net
  4. Reinicia el IIS

Todo debe funcionar después de estos pasos.

Si no es así, quizás debas revisar tu código ya que han habido algunos cambios a lo largo de la historia de Ajax.

No hay Comentarios

Usando UpdatePanel con Triggers

Si estás usando en Ajax un UpdatePanel, es sencillo hacer que éste se actualize si colocas un botón dentro de él mismo, algo como:

ASP:
  1. <asp:UpdatePanel id="UpdatePanel1" runat="server">
  2.    <contenttemplate>
  3.       <asp:Button id="Buscar" runat="server" Text="Buscar"></asp:Button>
  4.       <asp:Label runat="server" Text="Label"></asp:Label>
  5.    </contenttemplate>
  6. </asp:UpdatePanel>

Sin embargo, ¿qué ocurre si el botón que debe desencadenar la actualización del UpdatePanel se encuentra fuera del mismo?

Entonces debes añadir un trigger al UpdatePanel para indicarle cuál o cuáles controles deben desencadenar su actualización. Hazlo así:

ASP:
  1. <asp:Button id="Buscar" runat="server" Text="Buscar"></asp:Button>
  2. <asp:UpdatePanel id="UpdatePanel1" runat="server">
  3.    <contenttemplate>
  4.       <asp:Label runat="server" Text="Label"></asp:Label>
  5.    </contenttemplate>
  6.    <triggers>
  7.       <asp:AsyncPostBackTrigger ControlID="Buscar" EventName="Click"></asp:AsyncPostBackTrigger>
  8.    </triggers>
  9. </asp:UpdatePanel>

2 Comentarios