我有一个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"]
});
我需要做的是填充数据:[]'数组通过从后面的代码传递一些值(我从数据库中获取实际值)。
任何人都可以帮助我如何传递数据,以及需要采用的格式?如何将变量添加到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的新手,我不确定这是否有效。
答案 0 :(得分:2)
首先定义客户端中使用的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 package https://www.nuget.org/packages/Newtonsoft.Json/ dgenerate your object:
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 );
答案 1 :(得分:0)
您的理解是正确的。您需要做的是将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>