【问题标题】:Need simple example of how to populate javascript array from Viewdata list需要如何从 Viewdata 列表填充 javascript 数组的简单示例
【发布时间】:2010-10-14 07:40:21
【问题描述】:

可能有一种更简单的方法可以做到这一点,如果有的话,我会全力以赴。我的情况是我在表单上有一个下拉列表,我成功地填充了文本和值。我还需要从客户端上可用的 db 表中的同一表行中获取其他相关字符串值,因此当用户从下拉列表中选择时,此相关数据将填充到表单上的文本框中。我正在处理的只有 4 条记录,因此存储在客户端上没什么大不了的。我考虑过通过 ViewData 将这些数据作为列表传递并加载到 javascript 数组中。当用户从下拉列表中选择时 - 我将确定所选索引并从数组中获取我需要的相关数据。我已经将下拉项的值用于其他所需数据,因此我需要一种方法来获取这些相关数据,而无需返回服务器。如果我走在正确的轨道上,有人可以发布一个简单的示例,使用在 ViewData 中作为列表返回的 sting 值填充 js 数组。

谢谢,

迈克

【问题讨论】:

    标签: javascript asp.net-mvc arrays viewdata


    【解决方案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.JavaScriptExtensionsMyApp.Mvc.Extensions.LinkExtensions

    【讨论】:

    • 谢谢 - 这看起来像我需要的。辅助方法在我的解决方案中具体放在哪里?
    • 技术上它可以去任何地方,你只需要在你的 .aspx 文件中包含命名空间。实际上最好将它们保存在逻辑分离的类中,例如 MyApp.Mvc.Extensions.JavaScriptExtensions、MyApp.Mvc.Extensions.LinkExtensions
    【解决方案2】:

    怎么样...

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

    【讨论】:

    • 我喜欢这个想法,只是它不会输出 'var myArray =',但它可以很容易地与我的 Html 扩展助手结合使用。
    • 是的,这不是一个完整的例子,我想你可以填补空白
    猜你喜欢
    • 1970-01-01
    • 2014-07-23
    • 1970-01-01
    • 1970-01-01
    • 2013-05-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多