WebMethod问题 - 空白页面 [英] WebMethod issue - blank page
问题描述
我尝试将以下Web方法通过json格式传递给javascript函数，但我目前在客户端获取一个空白页面。
I trying to pass the following the web method below, through json format to a javascript function, but I am currently getting a blank page on the client-side.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ClientScript.RegisterStartupScript(this.GetType(), "TestInitPageScript",
string.Format("<script type=\"text/javascript\">google.load('visualization','1.0',{{'packages':['corechart','controls']}});google.setOnLoadCallback(function(){{drawVisualization({0},'{1}','{2}');}});</script>",
jss.Serialize(GetData()),
"Name Example",
"Type,"));
}
}
[WebMethod]
public static List<Data3> GetData()
{
SqlConnection conn = new SqlConnection("##############");
DataSet ds = new DataSet();
DataTable dt = new DataTable();
conn.Open();
var yesterday = DateTime.Today.AddDays(-1);
string cmdstr = "SELECT [Type], Cover, COUNT(Cover) AS 'Total' FROM [dbo].[database_data] WHERE [Type] in ('rm','ab', 'cm', 'cl', 'cd') and UploadDate between '2014-03-01' and '2014-06-20' GROUP BY Cover, [Type] order by Cover";
SqlCommand cmd = new SqlCommand(cmdstr, conn);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
adp.Fill(ds);
dt = ds.Tables[0];
List<Data3> dataList = new List<Data3>();
string cov = "";
string typ = "";
int val = 0;
foreach (DataRow dr in dt.Rows)
{
try
{
cov = dr[0].ToString();
typ = dr[1].ToString();
val = Convert.ToInt32(dr[2]);
}
catch
{
}
dataList.Add(new Data3(cov, typ, val));
}
return dataList;
}
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
if (dataValues.length < 1)
return;
var data = new google.visualization.DataTable();
data.addColumn('string', columnNames.split(',')[0]);
data.addColumn('string', columnNames.split(',')[1]);
data.addColumn('number', columnNames.split(',')[2]);
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].Type, dataValues[i].COVER, dataValues[i].COUNT]);
}
var line = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart1',
'options': {
'width': 1200,
'height': 500,
'legend': 'none',
},
'view': { 'columns': [0, 2] }
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': { 'height': '25em', 'width': '80em' }
});
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'Contorl1',
'options': {
'filterColumnLabel': columnNames.split(',')[1],
'filterColumnIndex': '1',
'ui': {
'label': 'Price',
}
},
});
new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([categoryPicker], [line, table]).draw(data);
}
</script>
</head>
<body>
<div id="PieChartExample">
<table>
<tr style='vertical-align: top'>
<td >
<div style="float: left;" id="chart1"></div>
</td>
</tr>
<tr>
<td >
<div style="float: left;" id="chart2"></div>
</td>
</tr>
<tr>
<td style='width: 600px'>
<div style="float: left;" id="control2"></div>
</td>
</tr>
</table>
</div>
I am little unsure, where the problem is arising (i.e. if its a syntax error in the sql query or something else).
I would also, like to ask, while debugging this method, what parameters i should be looking out for. I have checked, while debugging this that the [dr] array variable is getting data through.
Please advice.
Many thanks
I am little unsure, where the problem is arising (i.e. if its a syntax error in the sql query or something else).
I would also, like to ask, while debugging this method, what parameters i should be looking out for. I have checked, while debugging this that the [dr] array variable is getting data through.
Please advice.
Many thanks
推荐答案
Try adding these two at the top of your view.
Try adding these two at the top of your view.
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
Make sure you have these js files in your Scripts folder. Download them here [^]
as the required json format for data table of google chart is different from the one generated from Json serilizer , you need to convert the response to the following format is different from the ordinary one
as the required json format for data table of google chart is different from the one generated from Json serilizer , you need to convert the response to the following format is different from the ordinary one
{
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
]
}
so there is a library in ord er to convert the list and tables to the understandable format for google chart data table
http://www.agile-code.com/blog/using-the-google-datatable-net-wrapper/[^]
https://www.dropbox.com/s/lds7m75saz6pf5h/Google.Visualization.DataTable.Example.zip[^]
https://developers.google.com/chart/interactive/docs/reference#DataView[^]
Hope it helps
so there is a library in order to convert the list and tables to the understandable format for google chart data table
http://www.agile-code.com/blog/using-the-google-datatable-net-wrapper/[^]
https://www.dropbox.com/s/lds7m75saz6pf5h/Google.Visualization.DataTable.Example.zip[^]
https://developers.google.com/chart/interactive/docs/reference#DataView[^]
Hope it helps
这篇关于WebMethod问题 - 空白页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
