列表<T>到Javascript數組

Question

我有以下類中定義

public ReportsViewmodel 
{ 
    public GeographicData GeographicData { get; set; } 
    ... 
} 

public class GeographicData 
{ 
    public List<ZipcodeData> Regions { get; set; } 
    ... 
} 

public class ZipcodeData 
{ 
    //TupleList is defined as public class TupleList<T1, T2> : List<Tuple<T1, T2>> 
    public TupleList<double, double> Boundries { get; set; }//Contains list of Lat/Long values for plotting on a map.   
} 

我的觀點裏，我需要做的是這樣的：

foreach (region in GeographicData.Regions) 
    foreach (boundry in region.Boundries) 
     add item1 & item2 to a 2 dimensional Javascript array 

最後，我想我的javascript數組看起來像：

var vmBoundries= [[34.1, -85.4], [34.8, -85.234], [34.347, -85.345], [34.541, -85.434], [34.2341, -85.4]]; 

我無法弄清楚如何從我的視圖訪問數據。我一直遇到範圍問題。例如，如果我嘗試使用JavaScript for循環，我不能索引到我的ViewModel列表中，因爲當我調用@ Model.GeographicData.Regions [i]時，循環變量未定義...

那麼，我該如何從我的ViewModel的數據拉入JavaScript數組？

Answer 1

通常你最好：

1. 變換數據到格式要
2. 變換後的數據序列化爲JSON
3. 分配JavaScript變量序列化的值。

所以，這樣的事情：

@{ 
    IEnumerable<double[]> flattened = vm.GeographicData.Regions 
     .SelectMany(region => region.Boundries 
      .Select(tpl => new double[] { tpl.Item1, tpl.Item2 })); 

    string json = new JavaScriptSerializer().Serialize(flattened); 
} 

<script type="text/javascript"> 
    var arr = @json; 
    // do something with arr. 
</script> 

Answer 2

喜歡的東西：

var array = (from region in GeographicData.Regions 
      select from boundry in region.Boundries 
       select new object[] { boundry.Item1, boundry.Item2 }).ToArray(); 

這會給你一個二維數組，然後可以只序列化。

實施例：https://dotnetfiddle.net/Y9KOaq

Answer 3

我會使用JavaScript序列化，使其更容易：

using System.Web.Script.Serialization; 

，並添加輔助方法ReportsViewmodel：

public string GetBoundriesJs() 
{ 
    var pairs = 
     from r in GeographicData.Regions 
     from b in r.Boundries 
     select new[] { b.Item1, b.Item2 }; 

    return new JavaScriptSerializer().Serialize(pairs); 
} 

然後你可以把它叫做你需要的地方我t在你看來：

var vmBoundries = @Model.GetBoundriesJs();