バックエンド経由でjavascriptファイルにデータを設定する＃

Question

私は以下のような状況に陥っています。 ウェブページにデータを含む（ドーナツ）グラフを表示したい。 自分のWebページ（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変数を変更する）

私はそれが私のaspxページのスクリプト要素でJavaScriptを置くことが可能です知っている、そしてそこに私のデータを取得：

var DataNumber = <%=DataNumber%>; 

そしてバックエンドでこのデータを与える：

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

しかし、それは私が探しているものではありません。 これは本当にスタンドアロンファイルを使用したいと思っています。

Answer 1

確かに。あなたは構文を剃刀であなたのスタンドアロンスクリプトは、次のように実行される前に、あなたはページがAJAXを使用してロードされた後、後にデータを取得したくないと仮定すると、あなたはグローバルオブジェクトにデータを置くことができます。

window.mydata = <%=DataNumber%>; 

は、単に数を保ちますのグローバルオブジェクトを最小限に抑えます。すべてのグローバルに単一ルートを使用します。このように：

window.myGlobals.mydata = <%=DataNumber%>; 

その後、どこからでもアクセスできます。

グローバルを完全に避けたい場合は、いくつかの方法がありますが、それらはすべてページへのデータのレンダリングを含みます。

たとえば、スクリプトタグにデータ属性を入れることができます。

<script type="text/javascript" data-mydata="<%=DataNumber%>" src="mymodule"></script> 

、スクリプトで、ちょうどそれはあなたが同梱処理中にそれを失うしていないことを注意し、$(document.currentScript).data("mydata)...

谷でもアクセス...

Answer 2

私はもっと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 */); 
}) 

私はJSONデータを解析するためにシリアライズするnewtonsoft JSON.NETを使用して、そしてJQueryです。

別の解決策は、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>