Comment rafraîchir seulement quelques parties du site

Question

J'utilise un graphique circulaire dans ma page Web qui doivent être mis à jour toutes les 4 secondes, donc je l'ai utilisé cette

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server"> 
    <meta http-equiv="refresh" content="4" /> 

Mon diagramme circulaire est en bas de la page . Chaque fois que la page se rafraîchit, la page va en haut. Au moment où je fais défiler vers le bas pour voir le graphique circulaire, il rafraîchit à nouveau.

//Passing values to draw pie chart 

    var pie1 = new RGraph.Pie('pie1', <%= Session["uStats"] %>); 
// Create the pie object 
      pie1.Set('chart.key', ['Read', 'Received', 'Not Received']); 
      pie1.Set('chart.key.align', 'right'); 
      pie1.Set('chart.key.position.x', 200); 
      pie1.Set('chart.key.position.y', 100); 
      //pie1.Set('chart.gutter.right', 100); 
      pie1.Set('chart.colors',['#86cf21', '#eaa600', '#e01600']); 
      pie1.Set('chart.title', "Message Status"); 
      pie1.Set('chart.align', 'left'); 
      pie1.Set('chart.shadow', true); 
      pie1.Set('chart.radius', 70); 
      pie1.Set('chart.labels.sticks', false); 
      pie1.Set('chart.tooltips.effect', 'fade'); 
      pie1.Set('chart.tooltips.event', 'onmousemove'); 
      pie1.Set('chart.highlight.style', '3d'); // Defaults to 3d anyway; can be 2d or 3d 


      if (!RGraph.isIE8()) 
      { 
       pie1.Set('chart.zoom.hdir', 'center'); 
       pie1.Set('chart.zoom.vdir', 'up'); 
       pie1.Set('chart.labels.sticks', false); 
       pie1.Set('chart.labels.sticks.color', '#aaa'); 
      } 
      pie1.Draw(); 
     } 
//I add the values to the session. 
Session.Add("uStats", "[" + read + "," + received2 + "," + NotReceived + "]"); 


<div id="pie" "top: 165px; left: 536px; width: 74px; position: absolute; height: 529px;"> 
     <canvas id="pie1" width="400" height="400">[No canvas support]</canvas>   
     </div> 

<asp:Panel runat="server" ID="Panel_Users" ScrollBars="Auto" Style="z-index: 1; left: 748px; 
       top: 621px; position: absolute; height: 250px; width: 287px"> 
       <asp:GridView ID="Grid_UserTable" runat="server" Style="z-index: 1; left: 2px; top: 5px; 
        position: absolute; height: 152px; width: 243px" BorderColor="#666666" AutoGenerateColumns="False" 
        OnRowDataBound="MyGrid_RowDataBound"> 
        <Columns> 
         <asp:TemplateField HeaderText="Status"> 
          <ItemTemplate> 
           <asp:Image ID="Status" runat="server" /> 
          </ItemTemplate> 
         </asp:TemplateField> 
         <asp:BoundField DataField="TimeReceived" HeaderText="TimeReceived" InsertVisible="False" 
          ReadOnly="True" SortExpression="TimeReceived" /> 
         <asp:BoundField DataField="TimeRead" HeaderText="TimeRead" SortExpression="TimeRead" /> 
         <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /> 
        </Columns> 
       </asp:GridView> 

     </asp:Panel> 

Je dois mettre à jour le tableau et le graphique circulaire

Quelle est la solution pour rafraîchir uniquement les parties requises du site et de faire la page Web pour rester sur l'endroit exact au lieu d'aller au sommet

Answer 1

je besoin de savoir plus sur votre conception de dire quoi que ce soit définitivement, mais vous pouvez probablement utiliser un UpdatePanel pour mettre à jour votre carte à certains intervalles. Seul ce qui est à l'intérieur de UpdatePanel sera mis à jour.

Voici un exemple de la façon de mettre à jour le contenu à chaque seconde:

http://jquery-howto.blogspot.com/2009/04/ajax-update-content-every-x-seconds.html

Answer 2

Quelle est la solution pour rafraîchir uniquement les pièces nécessaires

AJAX.

Les toolsuse sont à vous, mais le concept est le même. Essentiellement ce que vous avez besoin est un peu de JavaScript sur la page qui fait de temps en temps une demande à une ressource de serveur pour obtenir des données mises à jour et de mettre à jour les éléments pertinents sur la page.

Voici a simple example comment cela se comporte dans un navigateur et comment le code côté client et le code côté serveur interagissent.

Answer 3

En général, la façon de le faire est d'écrire une petite page qui peut produire soit un extrait de JSON ou HTML brut qui représente la partie qui a changé. Cette page sera alors appelé périodiquement Javascript via XMLHttpRequest, sa sortie capturé puis soit inséré directement dans la page pour remplacer le contenu existant ou, si JSON, ses valeurs utilisées pour mettre à jour le contenu en place.

Exactement comment faire cela varie en fonction de votre situation, codebase, le style, etc ..