Ajax « Pablo Viale Page 1 of 12

Consejos para diseño y desarrollo de aplicaciones web

Pablo Viale
Home Blog Contacto Home Responsabilidad

Archivo categoría Ajax

Utilizando múltiples controles UpdateProgress en una sola página
Por Pablo Viale - ASP.NET 2.0 / 3.5, Ajax - 12 Noviembre 2010

Sitienesdoso m áscontrolesUpdatePanelque quieresque se actualicen porseparado,quizástam bién

quierastenerdiferentesindicadores“un m om ento porfavor… ”para cada uno de ellos,con la finalidad de que
se m uestren en diferentesposiciones.

Antesde darte la solució n considera este có digo:

Clic para mostrar texto plano

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>

http://www.viale.mx/category/ajax/ 26/1/2011
Ajax « Pablo Viale Page 2 of 12
31. </asp:UpdatePanel>

Clic para mostrar texto plano

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

Elcualgenera lo siguiente:

Y alhacerclic en elbotó n 1 (o en el2)ocurre lo siguiente:

LosdoscontrolesUpdateProgress aparecieron porque essu com portam iento naturalcuando se hace un

postBack.Obviam ente querem osque cada uno aparezca únicam ente cuando se haga clic en su botó n
correspondiente.

Para hacerlo,utiliza la propiedad AssociatedUpdatePanelID delcontrolUpdateProgress,de talform a que tu

có digo quede así:

Clic para mostrar texto plano

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>

http://www.viale.mx/category/ajax/ 26/1/2011
Ajax « Pablo Viale Page 3 of 12
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>

Elcó digo VB quedaría igual

De esta form a aloprim irelprim erbotó n ocurrirá esto:

Y aloprim irelsegundo botó n verásesto:

De esta form a puedescolocarvariosindicadorespara cada una de laspartesen lasque dividasvisualm ente tu

página.

No hay Comentarios

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

FilteredTextBoxExtender
Por Pablo Viale - ASP.NET 2.0 / 3.5, Ajax - 20 Agosto 2009

En elAjax ControlToolkitde ASP.NET,hay un controlllam ado FilteredTextBoxExtender que sirve para

filtrarloscaracteresque se pueden ingresaren un TextBox.Esto esútil,porejem plo,para perm itir
únicam ente elingreso de núm erossiestam oscapturando un có digo postalm exicano.

Bueno,estaba usándolo en un TextBox con la propiedad TextMode establecida en MultiLine,lo que en

HTML se despliega com o un textArea,una caja de texto con m últipleslíneas.

http://www.viale.mx/category/ajax/ 26/1/2011
Ajax « Pablo Viale Page 4 of 12

Esta esla definició n de m icaja de texto y elcontrolde filtrado:

Clic para mostrar texto plano

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>

Com o puedesver,estoy perm itiendo la entrada de letrasm ayúsculas,m inúsculas,núm erosy espacios.Pero
com o se trata de una caja de texto con m últipleslíneas,obviam ente quiero que se perm ita teclearsaltosde
línea cuando elindividuo presione la tecla entero intro.

Este caso estruculento,porque no puedeshacerlo en la página aspx,lo tienesque haceren elcó digo de
servidor,de esta form a:

Clic para mostrar texto plano

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

Com o sabrás,vbCrLf significa un salto de línea en VisualBasic,y lo que hace esa línea esañ adirlo a los
caracteresválidos.

M edio truculento pero funciona!

No hay Comentarios

Genera un delay en una aplicación ASP.NET

Por Pablo Viale - ASP.NET 2.0 / 3.5, Ajax - 25 Febrero 2009

En ocasiones(m uy rarastalvez)necesitarásgenerarun delay.Un tiem po de espera.Sim plem ente unos

segundosen losque la aplicació n duerm a.

Te preguntaráspara qué querría alguien esto.Bueno,uno de loscasosen losque puede serútilessinecesitas

sim ularun tiem po de respuesta lento de la conexió n a internet.Porejem plo,sitienesun UpdateProgress
de Ajax que estásprobando en un servidorlocal,elprocesam iento puede sertan rápido que quizásnunca veas
tu gifanim ado girar.En estoscasos,puedescolocarun delay que te perm ita sim ularque elservidory/o la
conexió n tardan un rato en reaccionar.

Para hacerlo,utiliza este có digo:

Clic para mostrar texto plano

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

Donde el3000 que pongo son m ilisegundos,en este caso eltiem po de espera sería de 3 segundos.

No hay Comentarios

http://www.viale.mx/category/ajax/ 26/1/2011
Ajax « Pablo Viale Page 5 of 12

Librería de JavaScript jQuery

Por Pablo Viale - Ajax, Herramientas, Web - 8 Enero 2009

Existen variosproductosdesarrolladosen JavaScriptque puedescom prarporseparado para incluiren tus

sitiosw eb,com o tabs(pestañ as),acordeones,pop-ups,etc.

Pero hay una librería m uy buena que esde descarga gratuita,se llam a jQuery.

A pesarde serlibre está m uy bien desarrollada,incluso tiene distintostem asde diseñ o de cuálesescoger.Cada
com ponente tiene variasopcionesde configuració n que te perm iten personalizarlos.

Esta librería contiene:

Interacciones

• Arrastrar
• Soltar
• Dartam añ o
• Seleccionar
• Ordenar

W idgets

• Acordeó n
• Seleccionadorde fecha
• Ventana em ergente
• Barra de progreso
• Deslizador(slider)
• Pestañ as(tabs)

http://www.viale.mx/category/ajax/ 26/1/2011
Ajax « Pablo Viale Page 6 of 12

Sieresdesarrolladortam bién puedesdesarrollartuspropiosw idgetsusando esta librería.

Esta esla página donde encuentraslosw idgets:

http://ui.jquery.com /

No hay Comentarios

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

Por Pablo Viale - ASP.NET 2.0 / 3.5, Ajax, IIS, Windows - 7 Julio 2008

En ocasiones,cuando estástrabajando en Visual Web Developer 2008 con com ponentesASP.NET de

terceros(third party),notarásque no funciona elIntellisense y adem áseldiseñ adorm arca que tu
com ponente no está definido.Este esun ejem plo de este problem a con elcom ponente FreeTextBox:

http://www.viale.mx/category/ajax/ 26/1/2011
Ajax « Pablo Viale Page 7 of 12

Noté que esto m e pasaba porla siguiente razó n:

Losarchivosde m iaplicació n están hosteadosen un servidor(no en m iPC de desarrollo),porlo que creé una
conexió n a una unidad de red,asignándola a una letra.Esdecir,había m apeado
\\servidor\inetpub\wwwroot\proyecto a w:\proyecto.Alparecersitienestu servidorw eb de
desarrollo corriendo en tu m ism a PC,lo anteriorno ocurre,pero m e parece que esm uy probable que trabajes
en una PC de desarrollo y accedasa un servidorde desarrollo m ediante la red localdonde están (y corren)los
archivosde tu aplicació n.Alm enosesm icaso.

Para corregiresta situació n tienesque agregarlosDLLs delcontrolen elGAC.

Deberásusarla utilidad gacutil.exe que viene en elSDK del.Net Framework 2.Sino lo tienes,
descarga elSDK de aquí:
http://w w w .asp.net/Dow nloads/essential/

Coloca elcom ponente (elDLL)en un fó lderde la PC en la que usasVisual Web Developer 2008:

Ahora abre una ventana de MS-DOS,cám biate a la carpeta en la que tienesinstalado elgacutil.exe y corre
elcom ando:

gacutil -i nombredeldll.dll

http://www.viale.mx/category/ajax/ 26/1/2011
Ajax « Pablo Viale Page 8 of 12

Algo com o esto:

Ahora reinicia Visual Web Developer,abre tu aplicació n de nueva cuenta y m ira com o ya funciona el
Intellisense y no aparece elerrorde que tu controlno está declarado:

Espero que te sea de utilidad.

Actualizació n
Sinecesitarasdesinstalarla libreria delGAC,utiliza esta instrucció n:
gacutil -u NombreDeLaLibreria
No escribas.dll
Porejem plo:
gacutil -u FreeTextBox

2 Comentarios

Cómo evitar el error Sys.WebForms.PageRequestManagerParserErrorException

Por Pablo Viale - ASP.NET 2.0 / 3.5, Ajax - 22 Mayo 2008

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

http://www.viale.mx/category/ajax/ 26/1/2011
Ajax « Pablo Viale Page 9 of 12

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.

Para solucionarlo sim plem ente agrega una secció n triggers a tu updatepanel referenciando albotó n
que envía elform ulario.Así:

Clic para mostrar texto plano

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>

Norm alm ente esto siem pre funciona,pero sino,visita esta página que contiene toda la explicació n com pleta y
m ásopcionesde resolució n.

4 Comentarios

Iconos de espera para Ajax

Por Pablo Viale - ASP.NET 2.0 / 3.5, Ajax - 28 Enero 2008

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

Esta página esm uy buena,te perm ite creareltuyo personalizado con loscoloresque desees,tiene una am plia
variedad y losdiseñ osestán atractivos.La salida esun gifanim ado que puedesdescargar.

http://w w w .ajaxload.info/

1 Comentario

http://www.viale.mx/category/ajax/ 26/1/2011
Ajax « Pablo Viale Page 10 of 12

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

Por Pablo Viale - ASP.NET 2.0 / 3.5, Ajax - 7 Junio 2007

Estoy trabajando con:

ASP.NET 2.0.50727
ExtensionesAjax 1.0

Puse un UpdatePanelque contiene cam posque elusuario va a llenar.Puse controlesde validació n para
asegurarm e de que elusuario llena loscam pos.Loscontrolesde validació n funcionaban de una m anera
extrañ a,y adem ásaparecía este error:

Invalid postback or callback argument. Event validation is enabled using in

configuration or 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 serque loscontrolesde validació n no funcionan dentro de un UpdatePanel.

Encontrarásm ásinform ació n aquí:
http://forum s.asp.net/t/1116324.aspx (lee elsegundo post).

Lo bueno esque hay una m anera de darle la vuelta a este problem a.

La razó n delproblem a y la solució n se encuentra aquí:

http://blogs.m sdn.com /m attgi/archive/2007/01/23/asp-net-ajax-validators.aspx

Pero te la traduzco.

Tienesque bajarte estosarchivosy ponerlosen elfó lderbin de tu aplicació n.

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

Clic para mostrar texto plano

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

Yo lo probé y funciona perfectam ente!

http://www.viale.mx/category/ajax/ 26/1/2011
Ajax « Pablo Viale Page 11 of 12

M ásadelante M icrosoftsacará un parche para no tenerque hacereste truco,asíque sise te presenta este
problem a,te recom iendo prim ero bajarte la versió n m ásnueva de ASP.NET y de lasExtensionesde Ajax.

1 Comentario

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

Por Pablo Viale - ASP.NET 2.0 / 3.5, Ajax - 7 Junio 2007

Sicuando intentasvertu aplicació n de Ajax en InternetExplorerte m arca un errorde JavaScriptque 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 ásprobable esque no hasinstalado lasúltim asextensiones.Haz lo siguiente:

1. Desinstala lasExtensionesde Ajax

2. Reinicia elIIS
3. Descarga e instala lasExtensionesde Ajax m ásnuevasde w w w .asp.net
4. Reinicia elIIS

Todo debe funcionardespuésde estospasos.

Sino esasí,quizásdebasrevisartu có digo ya que han habido algunoscam biosa lo largo de la historia de Ajax.

No hay Comentarios

Usando UpdatePanel con Triggers

Por Pablo Viale - Ajax - 31 Mayo 2007

Siestásusando en Ajax un UpdatePanel,essencillo hacerque éste se actualize sicolocasun botó n dentro de él

m ism o,algo com o:

Clic para mostrar texto plano

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 em bargo,¿qué ocurre sielbotó n que debe desencadenarla actualizació n delUpdatePanel se encuentra
fuera delm ism o?

Entoncesdebesañ adirun trigger alUpdatePanel para indicarle cuálo cuálescontrolesdeben

desencadenarsu actualizació n.Hazlo así:

Clic para mostrar texto plano

ASP:
1. <asp:Button id="Buscar" runat="server" Text="Buscar"></asp:Button>
2. <asp:UpdatePanel id="UpdatePanel1" runat="server">

http://www.viale.mx/category/ajax/ 26/1/2011
Ajax « Pablo Viale Page 12 of 12
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>

1 Comentario

http://www.viale.mx/category/ajax/ 26/1/2011