Asp.net将代码背后的数据传递给Javascript并调用数组
Asp.net pass data from code behind to Javascript and call array
我有一个asp.net项目,它使用一些分析控件来查看各种数据。控件通过JavaScript函数填充,例如:
Morris.Bar({
element: 'hero-bar',
data: [
{ device: '1', sells: 136 },
{ device: '3G', sells: 1037 },
{ device: '3GS', sells: 275 },
{ device: '4', sells: 380 },
{ device: '4S', sells: 655 },
{ device: '5', sells: 1571 }
],
xkey: 'device',
ykeys: ['sells'],
labels: ['Sells'],
barRatio: 0.4,
xLabelMargin: 10,
hideHover: 'auto',
barColors: ["#3d88ba"]
});
我需要做的是通过从代码后面传递一些值来填充"data:[]"数组(在这里我从数据库中获得实际值)。
有人能帮助我如何传递数据,以及数据需要以什么格式传递吗?如何将变量添加到JavaScript中?
我可以通过在集合后面的代码中运行foreach循环将其作为字符串数组传递吗,所以:
foreach(var item in items)
{
//build array here called "myDataFromCodeBehind"
sb.Append(" { device: xVariable, sells: yVariable },");
}
然后从Javascript 调用字符串数组
var myData = "<%=myDataFromCodeBehind %>";
Morris.Bar({
element: 'hero-bar',
data: [myData],
// etc
或者这不会奏效吗?有件事告诉我错了。我是JavaScript的新手,我不确定这是否可行。
首先定义客户端中使用的JSON对象,如:
var YourBarParam = {
element: 'hero-bar',
data: [
{ device: '1', sells: 136 },
{ device: '3G', sells: 1037 },
{ device: '3GS', sells: 275 },
{ device: '4', sells: 380 },
{ device: '4S', sells: 655 },
{ device: '5', sells: 1571 }
],
xkey: 'device',
ykeys: ['sells'],
labels: ['Sells'],
barRatio: 0.4,
xLabelMargin: 10,
hideHover: 'auto',
barColors: ["#3d88ba"]
}
下一页http://json2csharp.com/并生成描述JSON对象的类。
public class Datum
{
public string device { get; set; }
public int sells { get; set; }
}
public class RootObject
{
public string element { get; set; }
public List<Datum> data { get; set; }
public string xkey { get; set; }
public List<string> ykeys { get; set; }
public List<string> labels { get; set; }
public double barRatio { get; set; }
public int xLabelMargin { get; set; }
public string hideHover { get; set; }
public List<string> barColors { get; set; }
}
现在,在代码后面定义公共页面方法或属性,您将在其中返回或存储JSON格式的对象。
使用newtonsoft nuget包https://www.nuget.org/packages/Newtonsoft.Json/dgenerate您的对象:
public static string yourObject = string.Empty;
public static string getBarObject()
{
RootObject YourBarParam = new RootObject();
product.element= "hero-bar";
product.data = new List<Datum>();
mydatun = new Datum();
mydatun.device = "1";
mydatun.sells = "whatever"
product.data.add(mydatun);
...
//and so on
...
yourObject = JsonConvert.SerializeObject(YourBarParam );
return yourObject;
}
在页面标记客户端脚本部分添加
var myData = "<%# getBarObject()%>";
或
var myData = "<%= yourObject %>";
如果你只需要数组的数据返回这个
yourObject = JsonConvert.SerializeObject(YourBarParam.data );
您的理解是正确的。您要做的是将aspx
文件中的C#代码调用到script
部分(您在文章中已经做过的)。Razor看起来是这样的:
<script>
@{
const string MyDevice = @"{ device: '5', sells: 1571 }";
}
var o = {
element: 'hero-bar',
data: [
{ device: '1', sells: 136 },
{ device: '3G', sells: 1037 },
{ device: '3GS', sells: 275 },
{ device: '4', sells: 380 },
{ device: '4S', sells: 655 },
{ device: '5', sells: 1571 },
@Html.Raw(MyDevice)
],
xkey: 'device',
ykeys: ['sells'],
labels: ['Sells'],
barRatio: 0.4,
xLabelMargin: 10,
hideHover: 'auto',
barColors: ["#3d88ba"]
};
</script>
相关文章:
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- JavaScript数组排序(函数)用于对表行进行排序,而不是排序
- 将Javascript数组发送到控制器ASP.NET MVC
- JavaScript数组包含一个值
- 将JavaScript数组传递给函数
- javascript:数组循环
- 将数据存储在javascript数组中以供进一步使用
- 在Javascript数组中查找绝对最大值
- JavaScript数组优化以提高性能
- 在javascript数组中分散数字
- 如何发送分配列表<字符串>到JavaScript数组或可枚举对象
- Javascript数组动态
- javascript数组元素是否知道其封闭数组
- 将 JSON 数组解析为 JavaScript 数组
- 将Transform和Instance Variable转换为对象的JavaScript数组
- 使用Web Html表单创建Javascript数组
- 从重复的javascript数组结果集中只获取一行
- 如何为Javascript数组()的使用准备PHP变量
- Javascript数组和函数
- 为DataTables aoColumnDefs创建JavaScript数组(JSON格式)