C＃數組到javascript數組

Question

我有兩個方法在我的代碼後面一個返回一個int數組，另一個返回字符串數組。 我想使用這兩個數組來填充谷歌圖表數據表。

我對Json或AJAX沒有任何經驗，但是我發現了一個相對簡單的解決方案，使用string.Join和eval將字符串轉換爲數組。

我已經設法做到這一點與INT數組，但是我發現字符串數組的問題。我知道問題是我需要爲數組中的每個元素添加''。

function drawChart() { 

    var locality = ['Loc_A', 'Loc_B', 'Loc_C', 'Loc_D', 'Loc_E']; 
    //var locality = eval('[<% =string.Join(", ", locations)%>]'); 
    var frequency = eval('[<% =string.Join(", ", numbers) %>]'); 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'locality'); 
    data.addColumn('number', 'frequency'); 

    for (i = 0; i < locality.length; i++) 
     data.addRow([locality[i], frequency[i]]); 

    var options = { 
     title: 'Test' 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
    chart.draw(data, options); 
} 

我需要通過每個單詞添加''來調整註釋行，以便我可以將字符串轉換爲javascript數組。

任何想法或任何其他提示如何將C＃數組從代碼behing轉換爲Java腳本數組。代碼示例會很有幫助。

Answer 1

方法1：圖表數據drawChart formatiing（）

使用System.Web.Script。序列化;

1）構建jsonobj

public string GetLocality() 
    { 
     string[] locality = new string[] { "Loc_A", "Loc_B", "Loc_C", "Loc_D", }; 
     //long[] frequency = new long[] { 10, 20, 10, 80 }; 
     JavaScriptSerializer jsSerializer = new JavaScriptSerializer(); 
     string jsonobj = jsSerializer.Serialize(locality); 
     return jsonobj;  
    } 

2）無論是在HTML數據屬性添加這個或使用AJAX調用拉。

<div id="piechart" data-piechart-localityary='<ServerSide call/var Getlocality()'> 
    <div> 

3）從HTML數據破折號拉數據在你的JavaScript作爲

var locality = $('#piechart').data('piechart-localityary'); 

---

方法2：在代碼圖表數據格式化背後

我會建議保持DrawChart（）函數簡單。你提到你在後面的代碼中提供了數組。

1）在後面的代碼中構建JavaScript字符串字面值對象。 Format
2）將jSonData作爲數據屬性附加到html頁面中，或者使用ajax將其拉入。如果不是至關重要的話，我會建議保存服務器往返。
3）從HTML數據劃線
4）工作實例JSFIDDLE與源代碼

function drawChart() { 

//var jsonData = $('#piechart').data('piechar-jsonobj'); 
var jsonData = 
{ 
"cols":[ 
    {"label":"Locality","type":"string"}, 
    {"label":"Frequency","type":"number"} 
     ], 
"rows":[ 
    {"c":[{"v":"Loc_A","f":null},{"v":10.00,"f":null}]}, 
    {"c":[{"v":"Loc_B","f":null},{"v":20.00,"f":null}]}, 
    {"c":[{"v":"Loc_C","f":null},{"v":10.00,"f":null}]}, 
    {"c":[{"v":"Loc_D","f":null},{"v":80.00,"f":null}]} 
     ] 
} ; 

var data = new google.visualization.DataTable(jsonData); 


var options = { 
    title: 'MyPieChart', 
    backgroundColor: { fill: 'transparent' }, 
    is3D: true 
}; 

var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
chart.draw(data, options); 
} 
google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 

代碼來構建JavaScript字符串文字對象

public class Graph 
{ 
    public List<ColInfo> cols { get; set; } 
    public List<DataPointSet> rows { get; set; }  
} 

public class ColInfo 
{ 

    public string label { get; set; } 
    public string type { get; set; } 
} 

public class DataPointSet 
{ 
    public List<DataPoint> c { get; set; } 
} 

public class DataPoint 
{ 
    public string v { get; set; } // value  
    public string f { get; set; } // format 
} 

public string DemoPieChart() 
    { 
     Graph ChartData = new Graph(); 
     ChartData.cols = new List<ColInfo>(); 
     ChartData.rows = new List<DataPointSet>(); 
     ColInfo Col1 = new ColInfo(); 
     Col1.label = "Locality"; 
     Col1.type = "string"; 
     ColInfo Col2 = new ColInfo(); 
     Col2.label = "Frequency"; 
     Col2.type = "number"; 
     ChartData.cols.Add(Col1); 
     ChartData.cols.Add(Col2); 

     //Loop your data entry from both array 
     string[] locality = new string[] { "Loc_A", "Loc_B", "Loc_C", "Loc_D", }; 
     long[] frequency = new long[] { 10, 20, 10, 80 }; 

     for (int i = 0; i < locality.Length; i++) 
     { 
      DataPointSet Row = new DataPointSet(); 
      Row.c = new List<DataPoint>(); 
      DataPoint p1 = new DataPoint(); 
      p1.v = locality[i]; 
      p1.f = null; 

      DataPoint p2 = new DataPoint(); 
      p2.v = frequency[i].ToString("F") ;   
      p2.f = null; 
      Row.c.Add(p1); 
      Row.c.Add(p2); 
      ChartData.rows.Add(Row);   
     } 
     JavaScriptSerializer jsSerializer = new JavaScriptSerializer(); 
     string jsonobj = jsSerializer.Serialize(ChartData);   
     return jsonobj; 
     } 

希望這獲取此數據到drawChart（）可以幫助您構建解決方案。如果您需要澄清或特定的代碼添加評論。我使用剃刀（MVC）構建html來填充數據屬性。

---

可能的問題：JavaScriptSerializer在數字附加引號。

{"c":[{"v":"Loc_A","f":null},{"v": "10.00" ,"f":null}]} 

注意「10.00」而不是10.00。 GoogleCharts不喜歡它。它可能不繪製圖表或繪製不正確的圖表。

Answer 2

這應做到：

using System.Web.Script.Serialization; 

    public static string SerializeListAsJsonData<T>(List<T> list) 
    { 
     JavaScriptSerializer jsSerializer = new JavaScriptSerializer() 
     { 
      //MaxJsonLength = _maxJsonLength, <-- This is optional (used for large lists) 
     }; 

     return jsSerializer.Serialize(list); 
    } 

該方法採用對象的列表和序列化JSON字符串爲您服務。這個字符串你可以做一個JSON.parse（），然後你可以自由地訪問JavaScript中的對象。您特別請求了C＃數組，但我建議堅持列表（如果您需要一個字符串數組，然後只是創建一個字符串列表）。

List<string> list = new List<string>(); 
list.add("A"); 
list.add("B"); 
list.add("C"); 
list.add("D"); 
list.add("E"); 

string jsonString = SerializeListAsJsonData(list); // <-- jsonString is what you send to your JavaScript. 

還是喜歡這個，如果你以某種方式需要保持你的字符串數組：

string[] stringArray = { "A", "B", "C", "D", "E" }; 
string jsonString = SerializeListAsJsonData(stringArray.ToList<string>()); // <-- jsonString is what you send to your JavaScript