如何将列表从 aspx 传递到 javascript？答案

【问题标题】：How do I pass a list from aspx to javascript?如何将列表从 aspx 传递到 javascript？
【发布时间】：2010-08-05 14:14:24
【问题描述】：

我有一个列表，我循环通过它来填充我的表格。我最多想将一行数据传递给我的 javascript 代码。如果没有，我想传递列表和 ID 号以在列表中搜索该行。我怎样才能做到这一点？

<%foreach(var item in Model.NewList) { %>
<tr>
   <td><%=item.EntryDate.ToShortDateString() %></td>
   <td onmouseover="showDetailsHover(<%=item %>,<%=item.idNumber%>);" 
       onmouseout="hideDetailsHover();"><%=Html.ActionLink(item.idNumber,"SummaryRedirect/" + item.idNumber) %></td>
</tr>
<% } %>

【问题讨论】：

标签： c# .net javascript asp.net-mvc

【解决方案1】：

您可以使用 Json 序列化来传递此数据 http://json.codeplex.com/ - 序列化库

【讨论】：

【解决方案2】：

“将列表从 aspx 传递到 javascript”的概念有点难以理解，因为您的 ASP.NET 代码在服务器上运行，而 javascript 代码在浏览器中运行。因为它们存在于不同的域中，所以您不能简单地将列表从一个域“传递”到另一个域。

但是，您有多种选择：

公开一个您可以从 javascript 访问的 Web 服务。 Web 服务可以负责提供该行数据，以便 javascript 可以理解它。
当您的页面加载时，将静态格式的 JSON 数据直接放入您的 javascript 函数中。 JSON 是 javascript 可以理解的格式。虽然从技术上讲，这并不是从 ASP.NET 将变量“传递”到 javascript 函数中，而是说“这是我想要在我的 javascript 函数中运行时/如果它在客户端上运行的数据。”

【讨论】：

【解决方案3】：

我能想到的最快的方法是：

使用Json.Net 将您的列表序列化为页面上的json 字符串。
包括jQuery 和jQuery-json 插件。
在 javascript 函数中定义一个 javascript 列表。

在你的 aspx 页面上是这样的：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.js"></script>
<script type="text/javascript">
    function foo() {
        // This is where we use the Json.Net library
        var rawJsonString = '<%= Newtonsoft.Json.JsonConvert.SerializeObject(Model.NewList) %>';

        // This is where we use the jQuery and jQuery-json plugin
        var list = $.evalJSON(rawJsonString);

        // Do stuff with your list here
    }
</script>

【讨论】：

【解决方案4】：

感谢您的想法。我最终根据您的建议进行了更深入的研究，并在传递的列表上使用了 for 循环，然后根据循环将数据添加到行中...

success: function(data) {
        var loopList = data.message.NewList;
        for (var i = 0; i < loopList.length; i++) {
            addRecentData(loopList[i]);
        }
    },
});
function addRecentData(data) {
    ....
}

感谢您的推动！

【讨论】：