Masquer UpdatePanel pendant UpdateProgress

Question

Je cherche le moyen le plus simple possible de masquer un UpdatePanel en attendant que la réponse de soumission revienne. Stuff like described here - en utilisant Ajax Control Toolkit et le UpdatePanelAnimationExtender est à la fois surpuissant et causer des problèmes, à savoir:

• Parce qu'il ya deux ou trois panneaux cachés dans la page, il obtient tout foiré et cache les panneaux mal. Je n'ai aucune idée de pourquoi cela se passe;
• Je ne trouve pas un moyen de spécifier qu'un seul bouton est censé déclencher l'animation. J'ai spécifié un dans le UpdatePanel, mais il semble qu'il soit ignoré et tous les contrôles dans le panneau déclenchent l'animation.

Une solution javascript simple serait idéale. Le problème ici est qu'ASP.NET aime générer des ID bizarres pour les contrôles au moment de l'exécution. Des solutions pour ça?

Merci d'avance.

Answer 1

I suggérerait d'utiliser jQuery. Cela rendra les choses plus faciles pour vous. Donc, pour contourner le problème, vous pouvez faire quelques jQuery comme ça « bizarre ID »:

$('#<%= someASPControl.ClientID %>').hide(); 

et montrer:

$('#<%= someASPControl.ClientID %>').show(); 

Ce utilise jQuery pour saisir un élément par id et vous pouvez fais ce que tu veux avec. L'astuce est le ".ClientID" qui va récupérer l'identifiant que .net envoie.

Answer 2

Vous pouvez utilise des balises de code dans votre page html et utiliser la propriété ClientId d'un contrôle de cracher le asp.net id génère:

$('#<%= elementName.ClientID %>').hide(); 

EDIT: Cet exemple utilise jQuery BTW

Answer 3

Poignée PageRequestManager beginRequest et endRequest événements pour contrôler la visibilité de UpdatePanel pendant postbacks:

var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_beginRequest(
     function (sender, args) { 
      $get("<%=someUpdatePanel.ClientID %>").style.display = "none"; 
     } 
    ); 
    prm.add_endRequest(
     function (sender, args) { 
      $get("<%=someUpdatePanel.ClientID %>").style.display = ""; 
     } 
    ); 

ajouter également DisplayAfter = "0" à assotiated UpdateProgress contrôle pour éviter tout retard entre cacher UpdatePanel et UpdateProgress montrant