(AJAX) charger une page aspx dans un div

Bonjour,

Je vous explique ce que je souhaite faire.

j'ai un menu qui est constitue de "asp:linkbutton".

j'ai un "div" qui me sert de corps du site.

Je souhaite charger une page aspx dans ce corps via les linkbutton SANS recharger la totalité de la page (d'où l'utilité d'ajax)...

Dans un premier temps, est ce possible? Si oui, quelle est la démarche à suivre s'il vous plait ???

J'espère avoir été assez clair.

Merci d'avance pour vos réponses.

ASP.NET AJAX? Ou juste AJAX fait à la main?

Si ASP.NET AJAX, tu as la possibilité d'utiliser une master page avec une content page qui est inclue dans un UpdatePanel et donc là tu arrives à quelque chose d'équivalent mais de bien plus propre que ce que tu proposes.

c'est exactement comme ça que je fait, enfin je pense... :?

voici les extraits de code concernés :

le menu (tres simple):

Code:

1
2
3
4
5
6
7
8
9
10
11
 
                        <div id="menu">
 
                            <div id="TitreMenu">
                                Menu
                            </div>
 
                            <asp:LinkButton ID="lb1" runat="server" 
                                            Text="Rafraichir via Ajax"  
                                            onclick="lb1_Click"  />       
                        </div>

le corps (attention il y UpdateProgress avec...):

Code:

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
 
 <!--  utilisation de la lib AJAXTOOLKIT,  UpdatePanelAnimationExtender & UpdateProgress--> 
                            <asp:UpdatePanel ID="corps" runat="server" UpdateMode="Conditional" RenderMode="Block">
                                <ContentTemplate>
                                     <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"  Visible="false">  
                                     </asp:ContentPlaceHolder>
                                </ContentTemplate>
 
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="lb1" />
                                </Triggers>
                            </asp:UpdatePanel>
 
                            <ajaxToolkit:UpdatePanelAnimationExtender ID="monUpdatePanelAnimationExtender"
                                  runat="server" TargetControlID="corps">
                                     <Animations>
                                        <OnUpdating>
                                            <sequence> 
                                                <Parallel duration=".80" Fps="40">
                                                        <Resize Height="0" />
                                                </Parallel>
                                                <ScriptAction Script="envoieRequete('./unepage.aspx' , 'corps');" />
                                            </sequence>
                                        </OnUpdating>
                                        <OnUpdated>  
                                            <sequence>
                                                <Parallel duration=".80" Fps="30">   
                                                        <Resize HeightScript="500" />
                                                </Parallel>    
                                            </sequence>
                                        </OnUpdated>
                                    </Animations> 
                            </ajaxToolkit:UpdatePanelAnimationExtender>      
 
                            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                                <ProgressTemplate>
                                  <img src="./images/chargement.gif"  alt="attente" />
                                </ProgressTemplate>
                            </asp:UpdateProgress>

voici ma fonction ajax pour charger une page:

Code:

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
 
envoieRequete = function (url,id)
{
var xhr_object = null;
var position = id;
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else
if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
 
// On ouvre la requete vers la page désirée
xhr_object.open("GET", url, true);
 
xhr_object.onreadystatechange = function()
{
    if ( xhr_object.readyState == 4 )
    {
    // j'affiche dans la DIV spécifiées le contenu retourné par le fichier
    document.getElementById(position).innerHTML = xhr_object.responseText;
    }
}
 
// dans le cas du get
xhr_object.send(null);
 
}

Les animations se déclenchent bien, mais voici l'erreur que j'obtiens:

"document.getElementById(position) has no properties
http://localhost:1239/AjaxControlToolkitWebSite1/
Line 27"

C'est à croire que lors de l'exécution le div 'corps' n'existe pas !!! 8O

Quelqu'un pourrait-il m'expliquer pourquoi ?

Merci d'avance pour vos réponses...