javascript - 通过后端c#在javascript文件中设置数据

Question

我有以下情况。我想在我的网页中显示一个带有数据的( donut )图。我从网页后端的数据库中获取数据 (ASP.NET/C#)。

我正在为图表使用独立的 javascript 文件(“graph.js”):

//Donut Chart
var donut = new Morris.Donut({
element: 'sales-chart',
resize: true,
colors: ["#3c8dbc", "#f56954", "#00a65a"],
data: [
  { label: "**DATA**", value: **10** },
  {label: "**DATA**", value: **30**},
  {label: "**DATA**", value: **20**}
],
hideHover: 'auto'
});

有没有什么好的方法可以将数据放入 javascript 文件中？ (改变DATA变量)

我知道可以将 javascript 放在我的 aspx 页面上的脚本元素中，并在那里获取我的数据:

var DataNumber = <%=DataNumber%>;   

并在后端提供这些数据:

 private String _dataNumber = String.Empty;
 protected string DataNumber {
     get {
         return this._dataNumber ;
     }
     set {
         this._dataNumber = value;
     }
 }

但这不是我要找的。我真的很想为此使用一个独立的文件。

Answer 1

我更喜欢 cshtml 文件，但您可以在 ASPX 文件的隐藏 div 中呈现包含变量的序列化列表:

<div class="hidden" id="myData" data-data="<%= JsonConvert.SerializeObject(myData)%>"></div>

然后，您可以从 javascript 代码中获取此数据:

$(function() {
  var data = $("#myData").data('data');
  var donut = new Morris.Donut( /* do something with data */);
})

我正在使用 newtonsoft JSON.NET 进行序列化，并使用 JQuery 来解析 json 数据。

另一种解决方案是调用 Ajax 来获取数据。

编辑:

这是我在 ASP.NET 中完成的类似内容的示例:

文件donut.aspx.cs:

// ...
protected void Page_Load(object sender, EventArgs e)
{
    // edit the following line to suit your needs
    var list = new List<Data>(your_data_as_list);
    donut.Attributes.Add("data-donut", list)
}
// ...

文件donut.aspx:

<script type="text/javascript" src="lib/morris.js"></script>

<!-- create a component that will be managed by C#
<div runat="server" id="donut"></div>

<!-- this will execute once the page is loaded -->
<script type="text/javascript">
    jQuery(function () {
        // use <%= donut.ClientID %> to get the generated Id from ASP.NET
        var donutData= $("#<%= donut.ClientID %>").data("donut");
        var donut = new Morris.Donut( /* do something with donutData*/);
    });
</script>