asp.net后台cs中的JSON格式变量在前台Js中调用方法(前后台示例代码)

在asp.net中，可以通过后台cs文件生成JSON格式的数据，然后在前台的JavaScript代码中调用这些数据。下面是实现该功能的具体步骤：

1. 在后台cs文件中生成JSON格式数据

我们可以使用C#的JsonObject类来生成JSON格式的数据。示例代码如下：

using System.Web.Script.Serialization;

// 创建一个对象用来存放数据
var data = new {
    name = "John",
    age = 30,
    city = "New York",
    scores = new int[] { 80, 90, 85 }
};

// 将对象转为JSON格式的字符串
var jsonString = new JavaScriptSerializer().Serialize(data);

// 将JSON字符串赋值给一个前台变量
Page.ClientScript.RegisterStartupScript(this.GetType(), "data", $"var data={jsonString};");

上面的代码中，我们先定义了一个包含一些数据的匿名类，然后使用JavaScriptSerializer类将其转为JSON格式的字符串，并通过RegisterStartupScript方法将字符串赋值给一个前台变量。

2. 在前台Js代码中调用后台生成的JSON格式变量

一旦我们将后台生成的JSON格式数据赋值给前台变量后，我们就可以在前台JavaScript代码中使用它。示例代码如下：

// 在页面加载时输出后台定义的JSON格式变量
window.onload = function() {
    console.log(data);  // 控制台输出：{ "name":"John", "age":30, "city":"New York", "scores":[80,90,85] }
};

// 获取后台定义的JSON变量中的某个属性值
var name = data.name;  // 获取姓名属性值 John
var age = data.age;  // 获取年龄属性值 30

// 遍历后台定义的JSON变量中的数组
data.scores.forEach(function(score) {
    console.log(score);  // 控制台输出：80 90 85
});

在上面的示例中，我们在页面加载时通过console.log方法输出了后台定义的JSON变量的全部值，并且使用了点（.）操作符来获取变量中的具体属性值，如data.name和data.age。我们还演示了如何使用forEach方法遍历JSON变量中的数组。

示例2

另外，我们还可以将后台生成的JSON格式数据作为AJAX请求中的返回值，并在前台通过异步调用获取到这些数据。示例代码如下：

using System.Web.Script.Serialization;
using System.Web.Services;

// 用WebMethod标记该方法为Web服务
[WebMethod]
public static string GetData()
{
    // 创建一个对象用来存放数据
    var data = new {
        name = "John",
        age = 30,
        city = "New York",
        scores = new int[] { 80, 90, 85 }
    };

    // 将对象转为JSON格式的字符串
    var jsonString = new JavaScriptSerializer().Serialize(data);

    // 返回JSON格式字符串
    return jsonString;
}

上面的代码中，我们使用了WebMethod特性来标记该方法为Web服务，然后在该方法中生成了一个JSON格式的数据，并返回JSON格式的字符串。

在前台的JavaScript代码中，我们可以通过jQuery库的$.ajax()方法来发起异步请求并获取后台返回的JSON格式数据。示例代码如下：

// 发起异步请求
$.ajax({
    type: "POST",
    url: "WebForm1.aspx/GetData",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response) {
        var data = response.d;  // 获取后台返回的JSON格式数据

        console.log(data);  // 控制台输出：{ "name":"John", "age":30, "city":"New York", "scores":[80,90,85] }
    }
});

在上面的示例中，首先我们使用了jQuery库的$.ajax()方法发起了一个POST请求，并指定了请求的地址和数据类型。在请求成功后，我们通过response.d来获取到后台返回的JSON格式数据，然后就可以在前台JavaScript代码中使用该数据了。

通过上面的示例，我们可以了解到如何将后台生成的JSON格式数据在前台JavaScript代码中调用，无论是将JSON变量赋值给前台变量，还是通过异步请求获取JSON格式数据，在前台都可以很方便地使用。