将数组从 MVC 传递到 javascript？

Pass Array from MVC to javascript?

提问人：Banshee 提问时间：10/4/2010 最后编辑：DIFBanshee 更新时间：4/8/2017 访问量：69143

问：

我可以使用这个从 MVC ASP.NET 传递一个变量：

var lastCategoryId = '<%=Model.CS.LastSelectedCategory %>';

这适用于字符串或整数，但是如何处理字符串数组？我尝试以相同的方式传递数组，但变量设置为 System.String[] ？

JavaScript ASP.NET-MVC

评论

答：

2赞 Matthew Manela 10/4/2010 #1

您需要将数组格式化为 JavaScript 数组语法。

var someArray = [<%= Model.SomeArray.Select(x => "'" + x +"'")
                           .Aggregate((x,y) => x + ", " + y);  %>];

这将用单引号将每个条目括起来，然后用方括号之间的逗号将它们连接在一起。

更新：删除了多余的括号。

评论

0赞 Banshee 10/4/2010
对不起，我得到以下异常，这个解决方案=）预期
0赞 Matthew Manela 10/4/2010
我有一个额外的括号。我删除了它。现在就试试。
3赞 Omu 10/4/2010 #2

像这样的东西：

<script type="text/javascript">
var myArr = [<%=string.Join(",", strArr.Select(o => "\"" + o + "\"")) %>];
</script>

评论

0赞 Matthew Manela 10/4/2010
这个问题的问题是它没有将字符串值括在引号中，这会导致 JavaScript 错误。
0赞 Omu 10/4/2010
@Matthew Manela 感谢你告诉我，修复它
0赞 Darin Dimitrov 10/8/2010
如果包含报价怎么办？如果它包含双引号怎么办？如果它包含可能窃取您的身份验证 cookie 的 javascript 和 XSS 代码怎么办？甚至无法想象编写这样的代码会造成多大的灾难。o
0赞 Omu 10/8/2010
@Darin季米特洛夫，好吧，你说得对，这只是一个简单的方法，可能他不需要编码，谁知道呢
16赞 Adrian Grigore 10/4/2010 #3

这应该可以

var someArray=[<%foreach (var s in myStringArray){%>'<%=s%>',<%}%>];

评论

0赞 Omu 10/4/2010
你必须去掉最后一个逗号
1赞 Adrian Grigore 10/4/2010
@Omu：不一定。Javascript 解析器在这方面非常宽容。所有常见的浏览器都不介意在数组中使用尾随逗号。
0赞 Jatin Gadhiya 8/10/2015
@AdrianGrigore，谢谢你的回答..我有同样的问题。但是我从您的答案中找到了一种在 Js 中传递 mvc attary 的方法。但我的问题就像这种类型的数组需要哪种类型的数组或类，请参阅我的问题：stackoverflow.com/questions/31911067/......
43赞 Darin Dimitrov 10/4/2010 #4

您可以对它进行 JSON 序列化。这种方式可以传递更复杂的值，而不必担心转义简单引号、双引号等：

var categoriesList = <%= new JavaScriptSerializer().Serialize(new[] { "value1", "value2" }) %>;

编写一个 HTML 帮助程序来执行此操作会更好：

public static class HtmlExtensions
{
    public static string JsonSerialize(this HtmlHelper htmlHelper, object value)
    {
        return new JavaScriptSerializer().Serialize(value);
    }
}

然后在您看来：

<script type="text/javascript">
    var categoriesList = <%= Html.JsonSerialize(new[] { "value1", "value2" }) %>;
</script>

评论

6赞 Adrian Grigore 10/8/2010
我不得不承认，这比我的答案要干净得多。这应该被选为解决方案，而不是我的帖子。
2赞 Darin Dimitrov 10/8/2010
@Adrian，一切都是主观的。就我个人而言，我讨厌在视图中看到 C#。而且我对视图中的循环特别过敏：-）此外，不对输出的字符串进行编码是非常危险的，并且会受到 XSS 攻击。这就是为什么我宁愿总是依赖框架中内置的东西，这样我就不必担心正确逃脱，......
1赞 Adrian Marinica 5/7/2013
每当我看到达林·季米特洛夫回答一个问题时，我知道我会有一个解决方案。谢谢！
170赞 James Mikesell 8/20/2012 #5

你可以让 .NET 通过这行简单的代码为你处理所有繁重的工作。

这假定你使用的是 MVC Razor 语法。

var yourJavaScriptArray = @Html.Raw(Json.Encode(Model.YourDotNetArray));

对于较新版本的 MVC，请使用：

var yourJavaScriptArray = @Html.Raw(Json.Serialize(Model.YourDotNetArray));

评论

1赞 Hajjat 2/17/2016
这太神奇了！不知道 Razor 支持这一点，真是太好了！
5赞 S.Richmond 4/24/2016
请注意，它不再适用于较新版本的 MVC。请改用。Json.Encode()Json.Serialize(Model.YourDotNetArray)
0赞 goldenratio 4/18/2013 #6

只是想使用 Razor 语法提供答案：

我们有一个我们正在以 “数组数组” 的形式为 jQuery 迷你图渲染的迷你图。Dictionary<int, int>

var usageData = [ @string.Join(",", Model.UsageData.Select(d => string.Format("[{0},{1}]", d.Key, d.Value)).ToArray()) ];

其用法如下：

$('#sparkline').UsageSparkline(usageData, { tooltipFormatter: cachedTooltips });

这是我们在查看源代码时得到的：

var usageData = [ [-13,0],[-12,1],[-11,0],[-10,0],[-9,1],[-8,1],[-7,0],[-6,2],[-5,2],[-4,0],[-3,0],[-2,9],[-1,3],[0,4] ];
$('#sparkline').UsageSparkline(usageData, { tooltipFormatter: cachedTooltips });
3赞 ErwanLent 4/16/2014 #7

一个衬里：

var data = [@Html.Raw(String.Join(",", Model.MyArray.Select(i => "'" + i + "'")))];
3赞 Peyman Mehrabani 8/8/2015 #8

如此简单，如此简单

<script type="text/javascript">
    var array = @Html.Raw(
        Json.Encode(
            (Model).Select(m=> new 
            { 
                id= m.ID, 
                name=m.Name
            })
        )
    );
</script>

输出为：

[{"id":1,"name":"Name of 1"}, {"id":2,"name":"Name of 2"}, ...];
3赞 Mr. Ott 4/8/2017 #9

使用 Json.NET

var yourlist = JSON.parse('@Html.Raw(JsonConvert.SerializeObject(Model.YourList))');

上一个：Visual Studio 不允许我将项目拖放到其中？

下一个：如果在地图返回中如何使用？