如何从Viewdata列表中填充JavaScript数组的简单示例

Question

如果有更简单的方法，我非常乐意听取建议。我的情况是，在表单上有一个下拉列表，我已经成功地用文本和值填充了它。同时，我还需要从数据库表中同一行获得其他相关的字符串值，在客户端上可用，以便当用户从下拉列表中进行选择时，相关数据会在表单上的文本框中自动填充。我只需要处理4个记录，所以在客户端存储并不困难。我考虑将这些数据作为列表通过ViewData传递，并加载到JavaScript数组中。当用户从下拉列表中进行选择时，我将确定所选索引，并从数组中获取所需的相关数据。我已经使用下拉列表项的值来获取其他必需的数据，因此我需要一种方法来获取这些相关数据，而不必返回到服务器。如果我走对了路，请问是否可以发布一个简单的示例，演示如何将返回的List作为js数组填充。

谢谢,

Mike

- MikeD

Answer 1

var myArray = [
<% foreach (string item in ViewData["list"] as List<string>) { %>
"<%= item %>",
<% } %>
];

据报道，在IE浏览器中，末尾有逗号会导致代码出错，因此我建议使用视图扩展辅助方法来使代码更易于管理：

<%= Html.JavaScriptArray(ViewData["list"] as List<string>, "myArray") %>

将这个帮助方法放在你的解决方案中的某个地方：

public static string JavaScriptArray(this HtmlHelper htmlHelper, IList<string> values, string varName) {
    StringBuilder sb = new StringBuilder("var ");
    sb.append(varName);
    sb.append(" = [");
    for (int i = 0; i < values.Count; i++) {
        sb.append("'");
        sb.append(values[i]);
        sb.append("'");
        sb.append(i == values.Count - 1 ? "\n" : ",\n"); // Not the prettiest but it works...
    }
    sb.append("];");
    return sb.toString();
}

从技术上讲，扩展方法可以放在任何地方，你只需要在.aspx文件中包含命名空间即可。实际上，最好将它们放在逻辑上分离的类中，例如MyApp.Mvc.Extensions.JavaScriptExtensions、MyApp.Mvc.Extensions.LinkExtensions。

- Rory Fitzpatrick

---

谢谢 - 看起来这就是我需要的。在我的解决方案中，辅助方法应该放在哪里？ - MikeD

从技术上讲，它可以放在任何地方，你只需要在.aspx文件中包含命名空间即可。实际上，最好将它们放在逻辑上分离的类中，例如MyApp.Mvc.Extensions.JavaScriptExtensions、MyApp.Mvc.Extensions.LinkExtensions。 - roryf

Answer 2

怎么样？

<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(ViewData["list"]) %>

- jayrdub

---

我喜欢这个想法，只是它不会输出“var myArray =”，但它可以很容易地与我的Html扩展助手结合使用。 - roryf

是的，这不是一个完整的例子，我想你可以填写空白处。 - JeremyWeir