将 JSON 之类的字符串从 C# 发送到 javascript答案

【问题标题】：Sending a string like JSON from C# to javascript将 JSON 之类的字符串从 C# 发送到 javascript
【发布时间】：2012-07-22 11:29:45
【问题描述】：

我在JavaScript 中有一些代码，如下所示：

slider.setPhotos([
    { "src": "image1", "name": "n1" },
    { "src": "image2", "name": "n2" },
    { "src": "image3", "name": "n3" }
    ]);

我想从C# 设置src 和name 的值。

假设C#中的值是这样的：

var images = new string[] {"/images/a1.jpg", "/images/a2.jpg", "/images/a3.jpg"};

var names = new string[] {"First", "Second", "Third"};

如何将这些值设置到JavaScript 代码中（即在 C# 代码中的页面加载方法中）？

【问题讨论】：

简单地使用 ajax 为你获取这个怎么样？

标签： c# javascript string object

【解决方案1】：

在服务器上，您需要将数据序列化为 JSON，然后您可以使用隐藏输入字段之类的东西将其作为 HTML 写入响应。

例如，您可以使用NewtonSoft JSON 库来序列化 JSON（它内置在 ASP MVC 4 中，但使用 Nuget 很容易安装）

string json = Newtonsoft.Json.JsonConvert.SerializeObject(images);

然后将 json 渲染成 HTML（有很多方法可以做到这一点）例如

Response.Write(string.Concat("<input id='data' type='hidden' value='", json, "' />");

或

HiddenField jsonField = new HiddenField
{
    ID = "data"
};
jsonField.Value = json;
this.Controls.Add(jsonField);

或者甚至直接写成脚本跳过在客户端解析的需要（我仍然倾向于使用 HTML 方法来避免回发/更新面板的任何问题导致脚本被多次执行）

Response.Write(string.Concat("<script type='text/javascript'> var images = ", json, ";</script>");

然后，您可以在客户端上从 HTML 中读取此 JSON 并对其进行解析。在现代浏览器中，这是内置的，或者您可以使用诸如 JSON2 之类的内容进行填充

例如

var field = document.getElenentById('data');
var images = JSON.parse(field.value);

然后您就可以作为 Javascript 对象访问数据。

【讨论】：

您甚至可以生成一个定义数据的脚本标签，而不必担心获取元素或解析它。
@Rawling，这是真的，我有这个方法来回答。
Tnx @ChrisHerring。很好的答案。

【解决方案2】：

假设images 和names 的长度相同你可以用这个

StringBuilder str = new StringBuilder();

var images = new string[] {"/images/a1.jpg", "/images/a2.jpg", "/images/a3.jpg"};
var names = new string[] {"First", "Second", "Third"};

str.AppendLine("slider.setPhotos([");
for(int i=0; i< images.Length; i++)
{
   str.AppendLine("{ \"src\": "+ images[i] +", \"name\": "+ names[i] +" }");
   str.AppendLine( (i==images.Length-1 ? "]);":","));
}

Page.ClientScript.RegisterClientScriptBlock(
               this.GetType(), "Key007", str.ToString(), true);

此代码将在您的页面加载时插入一个脚本块，之后您可以在客户端代码的任何位置使用该脚本块。

【讨论】：