Discussion :

[Bono_BX]

Salut !

Venant du monde des clients lourds, je découvre l'AJAX.
Comment faire pour afficher une image d'attente lors des chargements de ma page ?

Merci d'avance.

[Redouane]

Bonjour,

Essaye de voir UpdateProgress de Ajax :

http://www.asp.net/AJAX/Documentatio...sOverview.aspx

Tu peux mettre dedans l'image de chargement que tu préfere, exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Image ID="imgChargement" runat="server" ImageUrl="CheminImageDeChargement" />
                                <br />
                                <strong>Chargement en cours ...</strong>
</ProgressTemplate>
</asp:UpdateProgress>

Bonne courage

[tomny]

Bonjour,
moi j'ai utilisé directement jQuery dans mon dernier projet et du coup pas de composant updateprogress.
Juste une div qui apparait au lancement de la commande ajax et je la re-cache une fois la commande terminée.
C'est à peu près la même chose mais avec du code que je maitrise plus et moins de pollution du fichier html client, le javascript étant dans un fichier à part.

[topolino]

Peux tu nous montrer comment tu fais en jquery ?

[tomny]

Voici le code de la page aspx:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Subversion.Master"
    CodeBehind="Creation.aspx.vb" Inherits="SVN_VB.WebForm1" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
 
    <script type="text/javascript" src="Script/creation.js"></script>
 
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ScriptManager ID="sm1" runat="server">
    </asp:ScriptManager>
    <div class="titrePage">
        Cr&eacute;ation de projet</div>
    <div id="cadrePrincipal">
        <div id="nomProjet">
            <asp:Label ID="lbNomProjet" runat="server">Nom du projet &aacute; cr&eacute;er :</asp:Label>
            <asp:TextBox ID="tbNomProjet" runat="server"></asp:TextBox><br />
            <asp:RegularExpressionValidator ID="revNomProjet" runat="server" ControlToValidate="tbNomProjet"
                ErrorMessage="Merci de saisir un nom de projet valide.<br/>Il doit commencer par une lettre, et ne contenir que des lettres, des chiffres ou un des symboles suivant : - _ ."
                ValidationExpression="^[a-zA-Z]([a-zA-Z0-9][_.-]?){1,}$" /><br />
        </div>
        <fieldset>
            <legend>Options de cr&eacute;ation</legend>
            <asp:CheckBox ID="cbCreerReps" runat="server" Text="Cr&eacute;er les r&eacute;pertoires trunk, branches, tags (cette op&eacute;ration prend environ 40s)"
                Checked="True" /><br />
            <asp:CheckBox ID="cbHookGemini" runat="server" Text="Mettre le hook Gemini en place" /><br />
        </fieldset>
    </div>
    <div id="boutonCreer" class="ADroite">
        <asp:UpdatePanel ID="up1" runat="server">
            <ContentTemplate>
                <asp:Button ID="btCreerProjet" runat="server" Text="Cr&eacute;er le Projet" OnClientClick="bCreerProjetClick()"
                    OnClick="btCreerProjet_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <div id="imageAttente" class="hidden ADroite">
        <img src="Images/attente.gif" id="img_attente" alt="En cours..." />
    </div>
    <div id="messageErreur">
    </div>
    <div id="messageOk">
    </div>
</asp:Content>

Le update panel est utilisé afin de lancer le codebehind et le javascript, mais tout pourrait être lancer par le javascript.

Voici la code behind:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
Public Partial Class WebForm1
    Inherits System.Web.UI.Page
 
    ''' <summary>
    ''' Initialisation de l'objet session informant sur l'etat du processus de creation du depot
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Session("statusProcess") = New StatusProcess()
    End Sub
 
    ''' <summary>
    ''' Appel du controleur afin de créer le depot
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Protected Sub btCreerProjet_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btCreerProjet.Click
        Dim createur As SVN_VB.Controleur.controleurCreation = New SVN_VB.Controleur.controleurCreation(Session("statusProcess"), cbHookGemini.Checked, cbCreerReps.Checked)
        Dim th As Threading.Thread = New Threading.Thread(AddressOf createur.creation)
        th.Start(tbNomProjet.Text)
    End Sub
 
    ''' <summary>
    ''' Méthode accessible directement par url, afin de permettre de faire de l'ajax
    ''' </summary>
    ''' <returns>un objet sotcké en session contenant les infos du processus en cours</returns>
    ''' <remarks></remarks>
    <System.Web.Services.WebMethod(True)> _
    Public Shared Function StatusProces()
        Return System.Web.HttpContext.Current.Session("statusProcess")
    End Function
 
End Class

Et pour finir le javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var id = 0;
 
function appelStatus() {
    $.ajax({
        type: "POST",
        url: "Creation.aspx/StatusProces",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            $("#messageOk").html(msg.d.ok);
            $("#messageErreur").html(msg.d.erreur);
            if (msg.d.fin) {
                clearInterval(id);
                $("#imageAttente").addClass("hidden");
                $("#boutonCreer").removeClass("hidden");
            }
        },
        error: function(msg, status) {
            $("#messageErreur").html(msg.responseText);
        }
    });
}
 
function bCreerProjetClick() {
    //appelStatus();
    id = setInterval(appelStatus, 1000);
    $("#boutonCreer").addClass("hidden");
    $("#imageAttente").removeClass("hidden");
}

Dans la master page on fait l'appel à jQuery.

Voila, si vous voulez des commentaires sur certaines parties n'hésitez pas

[topolino]

merci

[tomny]

De rien, je suis la pour apprendre mais aussi pour aider et partager mon savoir

je répètes qu'il ne faut pas hésiter sur les questions mais aussi sur les remarques et possible coquille...
Ce code est en production et fonctionne, donc tout problème possible détecté est le bienvenue :p