在.ascx页面的帖子中向客户端传递数据（javascript）。

Question

ascx页面中有devExpress dxchart。

asp:UpdatePanel ID="UpdatePanel1" runat="server"  UpdateMode="Conditional">
   <ContentTemplate>
    <br />
        <div id="trendChart" style="height: 500px;   width: 100%;"> </div>
    <br />
   </ContentTemplate>
</asp:UpdatePanel>

在Page_Load方法中数据加载正常。但是当点击按钮时，图表数据没有得到更新，而是显示出Page_Load中的旧值。在点击按钮时，使用了以下代码。

    NewData = jsonData

 System.Web.UI.ScriptManager.RegisterStartupScript(Me.Page, Me.GetType(), "ANY_KEY" + 
 Guid.NewGuid.ToString, "UpdateChart();", True)

NewData'是公共属性。下面是javascript中的UpdateChart。

function UpdateChart()
{
  myData = '<%= NewData%>';
  alert('tesing');
  var parseObj = JSON.parse(myData);
  $(function () {
    $("#trendChart").dxChart({
        dataSource: parseObj,
        series: {
            argumentField: "Month",
            valueField: "Value",
            name: "Value",
            type: "bar",
            color: '#ffaa66'
        }
    });
  });
}

点击按钮后，在UpdateChart()(javascript)中，'NewData'什么都没有，图表仍然显示旧的值。

Answer 1

你可以将数据作为一个属性传递给 UpdateChart-函数，然后对你的代码进行一些其他调整。首先创建一个init-dxChart-function。这个函数可以在第一次加载页面和更新数据时被调用。

function InitChart(dataForChart) {
    $("#trendChart").dxChart({
        dataSource: dataForChart,
        series: {
            argumentField: "Month",
            valueField: "Value",
            name: "Value",
            type: "bar",
            color: '#ffaa66'
        }
    });
}

第二，修改你的 UpdateChart-函数，这样它就会得到一个参数。

function UpdateChart(myData) {
  var parsedData = JSON.parse(myData);
  // Call Init Chart function here
  InitChart(parsedData);
}

第三： 改变你的服务器端javascript 这样数据就会被传递给函数

 System.Web.UI.ScriptManager.RegisterStartupScript(Me.Page, Me.GetType(), "ANY_KEY" + 
 Guid.NewGuid.ToString, "UpdateChart(" + jsonData + ");", True)