Question

我正在aspx page中绘制图表。该图表已放置在<div>中。我需要更新唯一的特定<div>，以便我可以每1秒更新chart而无需刷新整个页面。

以下是我的代码

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

       <div id="chart">
    <asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1" Height="455px" Width="473px" BackColor="DarkGray" BackGradientStyle="Center" BackHatchStyle="BackwardDiagonal" BackImageTransparentColor="0, 192, 192">
        <Series>
            <asp:Series Name="Series1" ChartType="FastPoint" XValueMember="dt" YValueMembers="Id" XValueType="DateTime"></asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
        </ChartAreas>
    </asp:Chart>



<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" SelectCommand="SELECT top(100) [dt], [Id] FROM [Test4] order by Id desc"></asp:SqlDataSource>

    </div>

</asp:Content>

Answer 1

ASP.NET是一种服务器端语言，这意味着sqldatasource控件只会在首次生成页面时执行服务器端。

您可以通过将图表放在<iframe>标记内并每秒刷新该帧来处理此问题，或者您可以尝试复杂化并编写一个响应具有JSON数据的请求的Web api，并使用AJAX更新div。

MVC 4有一个相当强大的web api，但是如果你没有从MVC 4项目模板开始，那么你可能最好只创建一个基于参数来处理JSON输出的aspx页面。 / p>

Answer 2

您应该将图表放在updatepanel内，然后使用timer控件

在特定时间间隔内刷新更新面板

这些链接可以帮助您

http://msdn.microsoft.com/en-us/library/cc295400.aspx

http://forums.asp.net/t/1492639.aspx

修改

更好的方法是使用jquery ajax调用。其实施的总体思路是

创建一个用户控件（.ascx文件），其中包含您的图表和加载它的逻辑。

在任何cs文件中定义一个方法，该文件将创建此用户控件的实例（使用Page.LoadControl方法），然后调用它的一些方法来加载它并返回面板或占位符它，您可以使用RenderControl方法生成html，此html将显示在您的div

可以通过特定间隔

中的jquery调用此方法

更新特定的<div>以更新图表</div>

2 个答案: