Question

我在网页上使用的饼图必须每4秒更新一次，所以我使用了这个

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

我的饼图位于页面底部。每次页面刷新时页面都会显示在顶部。当我向下滚动以查看饼图时，它会再次刷新。

    //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>

我必须更新表格和饼图

什么是解决方案，只刷新网站的必要部分，使网页保持在准确的位置而不是顶部

Answer 1

只刷新所需部分的解决方案是什么

AJAX

tools你use取决于你，但概念是一样的。基本上你需要拥有的是页面上的一些JavaScript，它偶尔会向服务器资源发出请求以获取更新的数据并更新页面上的相关元素。

以下是a simple example在浏览器中的行为方式以及客户端代码和服务器端代码的交互方式。

Answer 2

我需要更多地了解您的设计以明确说出任何内容，但您可以使用UpdatePanel以特定间隔更新图表。只有UpdatePanel内部才会更新。

以下是每秒更新内容的示例：

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

Answer 3

通常，执行此操作的方法是编写一个小页面，该页面可以输出JSON片段或表示已更改部分的原始HTML。然后将通过XMLHttpRequest定期从Javascript调用此页面，捕获其输出，然后直接插入页面以替换现有内容，或者，如果是JSON，则使用其值来更新内容。

具体如何做到这一点因您的情况，代码库，风格等而异。

如何仅刷新网站的几个部分

3 个答案: