Comment puis-je afficher une boîte de dialogue modale pendant que la barre de données se produit?

Question

J'ai un formulaire avec gridview qui est lié à une procédure stockée complexe (données financières). Cette requête prend environ 3 minutes pour s'exécuter et charger le gridview. Les utilisateurs s'impatientent et cliquent sur "Recherche" à plusieurs reprises, ce qui ne fait qu'empirer les choses. Comme une solution provisoire, je voudrais montrer une barre de progression, et j'ai trouvé une solution en utilisant le ASP.NET AJAX ModalPopupExtender.

C'est le code que j'ai pour ajouter l'extension à la page:

<ajaxToolkit:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="Button1" 
    PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" /> 
<asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress" style="display: none"> 
    <div align="center" style="margin-top: 13px;"> 
     <img src="../images/progress.gif" alt="Progress" /> 
     <span class="updateProgressMessage">Loading ...</span> 
    </div> 
</asp:Panel> 

Ce code est très simple pour l'événement clic du bouton:

protected void Button1_Click(object sender, EventArgs e) 
{ 
    gvInvoice.DataBind(); 
} 

Le problème est, quand je cliquez sur le bouton Rechercher, la boîte de dialogue modale apparaît mais la méthode Databind() n'est jamais appelée. J'ai essayé d'utiliser mdlPopup.Show() mais cela ne montre pas la boîte de dialogue et exécute à la place le Databind().

Qu'est-ce qui me manque? Comment puis-je m'assurer que la boîte de dialogue modale apparaît, que la zone de données s'exécute et que la boîte de dialogue modale disparaît par la suite?

Answer 1

Il semble que vous essayez d'afficher le panneau de progression (pop-up modale) pour un post-retour de page complète? mdlPopup.Show() fonctionnerait si l'action de recherche est effectuée dans UpdatePanel

Dans votre scénario, essayez cette place - Étape 1, réglez le TargetControlID du ModalPopupExtender à un contrôle caché factice - Étape 2, javascript ajouté call qui montre le modalpopup $ find ('mdlPopup'). show(); avant l'événement onclient de l'appel post-retour du bouton de recherche (tout comme l'ajout d'une validation avant le post-retour)

James

Answer 2

Je pense que ce que vous devez faire ici est de séparer l'affichage de la boîte de dialogue et la liaison de la récupération des données.

Je résoudrait probablement le problème en utilisant une approche comme celle-ci:

1. Afficher dialogue et fil de rotation pour aller chercher les données. (Le thread placerait les données dans le cache de session, ou un cache personnalisé sur une base de données.)
2. Demandez au client d'interroger le serveur si les données sont disponibles (probablement en utilisant les appels AJAX aux méthodes de pages statiques).
3. Lorsque les données sont disponibles, masquez la boîte de dialogue et faites le lien de données.

Vous pouvez placer des vérifications/conditions supplémentaires lorsque le thread est démarré afin de ne pas démarrer trop de threads si l'utilisateur appuie plusieurs fois sur la touche de recherche. C'est à dire. s'ils n'ont pas changé les critères de recherche, ne lancez pas une nouvelle recherche, mais poursuivez simplement l'interrogation.