如何将 C# 中的 List<string[]> 转换为 Javascript 数组？

Question

我有一个数据表，我正在将其转换为列表，对其进行序列化并使用视图模型将其传递到我的视图。

我的视图模型看起来像这样：

public class AddressModel
{
    public string Addresses { get; set; }
}

我的控制器动作看起来像下面这样：

AddressModel lAddressGeocodeModel = new AddressGeocodeModel();
List<string[]> lAddresses = new List<string[]>();

string lSQL = " select Address1, CityName, StateCode, ZipCode " +
                      " from AddressTable  ";

// Convert the data to a List to be serialized into a Javascript array.
//{
...data retrieval code goes here...
//}
foreach (DataRow row in AddressTable.Rows)
{
    string[] lAddress = new string[5];
    lAddress[1] = row["Address1"].ToString();
    lAddress[2] = row["CityName"].ToString();
    lAddress[3] = row["StateCode"].ToString();
    lAddress[4] = row["ZipCode"].ToString();
    lAddresses.Add(lAddress);
}

lAddressGeocodeModel.UnitCount = lAddresses.Count().ToString();
// Here I'm using the Newtonsoft JSON library to serialize my List
lAddressGeocodeModel.Addresses = JsonConvert.SerializeObject(lAddresses);

return View(lAddressModel);

那么在我的视图中，我会得到以下一系列地址字符串：

[["123 Street St.","City","CA","12345"],["456 Street St.","City","UT","12345"],["789 Street St.","City","OR","12345"]]

我该如何将 Razor 模型中的序列化字符串传递给 JavaScript 数组？

- bynary

Answer 1

您可以直接将值注入到JavaScript中：

//View.cshtml
<script type="text/javascript">
    var arrayOfArrays = JSON.parse('@Html.Raw(Model.Addresses)');
</script>

请参考JSON.parse和Html.Raw。或者您可以通过Ajax获取值：

public ActionResult GetValues()
{
    // logic
    // Edit you don't need to serialize it just return the object

    return Json(new { Addresses: lAddressGeocodeModel });
}

<script type="text/javascript">
$(function() {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("GetValues")',
        success: function(result) {
            // do something with result
        }
    });
});
</script>

请参见jQuery.ajax。

- Dustin Kingen

---

我认为你需要将模型编码为Json格式：@Html.Raw(Json.Encode(Model.Addresses)) - Nate-Wilkins

当我在控制器中检查字符串时，它是这样的：[["123 Street St.","City","CA","12345"],...]这是一个正确的JSON字符串。当我在Chrome中将字符串打印到控制台时，它看起来像这样：[["123 Street St.","City","CA","12345"],...]当我使用Json.Encode重新编码它，然后尝试使用JSON.parse解析它（如此 - JSON.parse('@Html.Raw(Json.Encode(Model.Addresses))');我在控制台中得到以下错误：“Uncaught SyntaxError：Unexpected number” - bynary

我想尝试一种不同的方法，使用一个正确的JsonResult控制器操作来返回一个Json() C#对象。我不确定为什么我在Javascript和Razor语法方面遇到了这么多麻烦，但它就是不起作用。 - bynary

查看页面源代码并查看正在打印的内容。 - Dustin Kingen

当您可以在CSHTML上打印字符串时，您不需要执行JSON.parse，您只需将JSON字符串分配给变量即可。JSON本身就是一个有效的JavaScript对象。 - Akash Kava

如果你现在（2019年）想要将C#数组注入到JavaScript中，正确的方式非常简单，只需要使用var data = @Json.Serialize(Model.Tags)，其中Tags是一个List<string>。 - barnacle.m

Answer 2

有许多方法可以解析Json，但我发现最有效的方法是

 @model  List<string[]>

     <script>

         function DataParse() {
             var model = '@Html.Raw(Json.Encode(Model))';
             var data = JSON.parse(model);  

            for (i = 0; i < data.length; i++) {
            ......
             }
         }
     </script>

- Mehul Bhalala

---

我不知道为什么这不是答案。 - BoundForGlory

因为这个帖子是在原问题发布三年后才发表的。 - bynary

顺便提一下，在 for () 后面缺少一个闭合大括号。 - Leo

因为这里的模型对象是一个List，但在问题中它是一个逗号分隔的字符串。然而，我会直接将列表发送到视图，并让视图通过执行Mehul发布的操作来处理它，但只需一行即可。 - Andrew

Answer 3

这对我在ASP.NET Core MVC中起作用。

<script type="text/javascript">
    var ar = @Html.Raw(Json.Serialize(Model.Addresses));
</script>

- John81

---

完美。在ASP.NET Core 2.0上使用。 - gregoryp

Answer 4

这些答案中有很多是可行的，但我发现迄今为止最简单的方法是通过ViewData或ViewBag发送数据，并让JSON.Net对其进行序列化。

当需要在页面加载前使用Javascript生成HTML或需要避免AJAX开销时，我使用这种技术：

在控制器中：

public ActionResult MyController()
{
    var addresses = myAddressesGetter();
    ViewData["addresses"] = addresses ;
    return View();
}

在视图中：

@section scripts {
<script type="text/javascript">
    var MyjavascriptAddresses: @Html.Raw(JsonConvert.SerializeObject(ViewData["addresses"])),
</script>
}

当一些浏览器对JSON反序列化支持不佳时，您可以始终依靠JSON.NET。

与某些方法相比，另一个优点是您可以在浏览器的 View --> Source 中看到使用Javascript，因为它只是在服务器端生成的文本。

请注意，在大多数情况下，Web API是将JSON传递到客户端的更优雅的方式。

- Charles Burns

---

ViewBag正是我正在寻找的东西。谢谢！ - krillgar

Answer 5

对于那些不想使用JSON的人，以下是我如何做到的：

<script>
    var originalLabels = [ '@Html.Raw(string.Join("', '", Model.labels))'];
</script>

- Hashim Akhtar

Answer 6

我认为这更像是数据建模方式的问题。与其使用字符串数组来表示地址，使用以下方式会更加干净和简便：

创建一个类来表示你的地址，就像这样：

public class Address
{
    public string Address1 { get; set; }
    public string CityName { get; set; }
    public string StateCode { get; set; }
    public string ZipCode { get; set; }
}

然后在您的视图模型中，您可以像这样填充那些地址：

public class ViewModel
{
    public IList<Address> Addresses = new List<Address>();

    public void PopulateAddresses()
    {
        foreach(DataRow row in AddressTable.Rows)
        {
            Address address = new Address
                {
                    Address1 = row["Address1"].ToString(),
                    CityName = row["CityName"].ToString(),
                    StateCode = row["StateCode"].ToString(),
                    ZipCode = row["ZipCode"].ToString()
                };
            Addresses.Add(address);
        }

        lAddressGeocodeModel.Addresses = JsonConvert.SerializeObject(Addresses);
    }
}

这将会给你类似于以下的 JSON 数据：

[{"Address1" : "123 Easy Street", "CityName": "New York", "StateCode": "NY", "ZipCode": "12345"}]

- Jedediah

---

我相信你是对的。唯一的问题是我的原始代码在非MVC ASP.NET中运行得非常好。在我尝试在MVC中实现相同的解决方案之前，没有任何问题。我将坚持使用$.getJSON()获取JsonResult操作的结果的“新”解决方案。如果这不起作用，我会更仔细地看待你的解决方案。谢谢！ - bynary

Answer 7

这是如何实现的：

//View.cshtml
<script type="text/javascript">
    var arrayOfArrays = JSON.parse('@Html.Raw(Json.Encode(Model.Addresses))');
</script>

- Ahmed Elbendary

Answer 8

对于一维数组

控制器：

using Newtonsoft.Json;
var listOfIds = _dbContext.Countries.Where(x => x.Id == Country.USA).First().Cities.Where(x => x.IsCoveredByCompany).Select(x => x.Id).ToList();
string strArrayForJS = JsonConvert.SerializeObject(listOfIds); //  [1,2,6,7,8,18,25,61,129]
//Now pass it to the view through the model or ViewBag 

视图：

<script>
    $(function () {
        var myArray = @HTML.Raw(Model.strArrayForJS);
        console.log(myArray); // [1, 2, 6, 7, 8, 18, 25, 61, 129]
        console.log(typeof (myArray)); //object
    });
</script>

- Adel Mourad

Answer 9

您可以直接使用C#的Json.Serialize

<script type="text/javascript">
    var addresses = @Json.Serialize(Model.Addresses);
</script>

- Simon Gurung

Answer 10

JSON 本质上是有效的 JavaScript 对象，因此，在打印 JavaScript 本身时，一旦将其转换为 JSON，您就不需要进一步编码/解码 JSON。

<script type="text/javascript">
    var addresses = @Html.Raw(Model.Addresses);
</script>

以下内容将被打印出来，而且是合法的 JavaScript 表达式。

<script type="text/javascript">
    var addresses = [["123 Street St.","City","CA","12345"],["456 Street St.","City","UT","12345"],["789 Street St.","City","OR","12345"]];
</script>

- Akash Kava