在 post 返回 .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.In 按钮单击使用以下代码。

    NewData = jsonData

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

'NewData' 是 public 属性。 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'
        }
    });
  });
}

单击按钮后 'NewData' 在 UpdateChart() 中没有任何内容（javascript）并且图表仍然显示旧值。

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);
}

第三：改变你的server-side-javascript，所以数据传递给函数：

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

在 post 返回 .ascx 页面中将数据传递给客户端 (javascript)

Passing Data to client side (javascript) in post back in .ascx page

javascript

asp.net

ascx