I have a server side designed using asp.net. I want the method to return in json format which will then be read by a javascript in html. But my problem is I can't read it. Is there something wrong that I had written? Any suggestion as to why? Is the way
how I call my method correct? Below is my code.
wynn_chester
0 Points
3 Posts
HTML to read json returned from asp.net method
Apr 16, 2012 07:58 AM|LINK
Hi guys,
I'm new in web programming. I need your help.
I have a server side designed using asp.net. I want the method to return in json format which will then be read by a javascript in html. But my problem is I can't read it. Is there something wrong that I had written? Any suggestion as to why? Is the way how I call my method correct? Below is my code.
Server side:
[WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public string CallDataToJson() { DataTable ciq = new DataTable(); DataTable lwt = new DataTable(); DataTable cdt = new DataTable(); DataTable sqlDataSrc3Dt = new DataTable(); ciq = ConnectToDb(SqlDataSource2.ConnectionString, "sp_getToTalCallInQueue", "ciq"); lwt = ConnectToDb(SqlDataSource3.ConnectionString, "sp_getMaxLongestWaitingTime", "lwt"); cdt = ConnectToDb(SqlDataSource4.ConnectionString, "sp_getCurrentDateTime", "cdt"); sqlDataSrc3Dt = GetWallBoardMatrix(SqlDataSource1.ConnectionString, "sp_getWallBoardMatrixTB"); string ConvsqlData = "\"WallBoardTable\" : " + JsonConvert.SerializeObject(sqlDataSrc3Dt, Formatting.Indented); List<DataTable> JsonDt = new List<DataTable>() { ciq, lwt, cdt}; string GetMyJson = JsonConvert.SerializeObject(JsonDt, Formatting.Indented) + ", \n" + ConvsqlData; return GetMyJson; }private DataTable ConnectToDb(string ConnStr, string sp_Call, string columnName) { string Data = string.Empty; DataSet ds = new DataSet(); DataTable dt = new DataTable(); try { using (SqlConnection conn = new SqlConnection(ConnStr)) { conn.Open(); SqlDataAdapter adapter = new SqlDataAdapter(); adapter.SelectCommand = new SqlCommand(sp_Call, conn); adapter.SelectCommand.CommandType = CommandType.StoredProcedure; adapter.Fill(ds); dt = ds.Tables[0]; dt.Columns["column1"].ColumnName = columnName; return dt; }; } catch { return dt; } } private DataTable GetWallBoardMatrix(string ConnStr, string sp_Call) { string Data = string.Empty; DataSet ds = new DataSet(); DataTable dt = new DataTable(); try { using (SqlConnection conn = new SqlConnection(ConnStr)) { conn.Open(); SqlDataAdapter adapter = new SqlDataAdapter(); adapter.SelectCommand = new SqlCommand(sp_Call, conn); adapter.SelectCommand.CommandType = CommandType.StoredProcedure; adapter.Fill(ds); dt = ds.Tables[0]; return dt; }; } catch { return dt; } } }This is my client side code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>ACES Wallboard</title> <link href="StyleSheet.css" rel="Stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="Scripts/SpryData.js"></script> <script type="text/javascript" src="Scripts/SpryJSONDataSet.js"></script> <script type="text/javascript" src="Scripts/SpryNestedJSONDataSet.js"></script> <script type="text/javascript"> window.onload = function () { window.alert("trigger before ajax"); jQuery.ajax( { type: "POST", async: true, url: "http://localhost:50900/WallboardApps_Backend/Default.aspx/CallDataToJson", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (obj) { window.alert("triggering"); jQuery("#ciq").html(obj["ciq"]); window.alert(obj[0].value); jQuery("#lwt").html(obj["lwt"]); var tableData = new Spry.Data.JSONDataSet(obj, { path: "WallBoardTable" }); jQuery("#timestamp").html(obj["cdt"]); /*for (var i = 0; i < obj.key.length; i++) { jQuery("#" + obj.key[i].name).html(obj.value[0][obj.key[i].name]); }*/ }, error:function(){ window.alert(obj); } }); }; </script> </head> <body> <div> <div class="panelstyle"> <div class="ciqrowstyle">Call in Queue: <span id="ciq"> </span> Calls</div> <div class="lwtrowstyle">Longest Waiting Time: <span id="lwt"> </span></div> <div spry:region="tableData"> <table class="dataTable" style="border:5px solid black;font-family:Tahoma;font-size:50px;color:black" width="100%"> <tr style="background-color:SteelBlue;font-weight:bold;color:White;"> <th spry:sort="Unit" class="gridheader">Unit</th> <th spry:sort="Avail" class="gridheader">Avail</th> <th spry:sort="Eng" class="gridheader">Eng</th> <th spry:sort="Unavail" class="gridheader">Unavail</th> <th spry:sort="Others" class="gridheader">Others</th> </tr> <tr spry:repeat="tableData"> <td class="alternatingrowstyle">{Unit}</td> <td class="alternatingrowstyle">{Avail}</td> <td class="alternatingrowstyle">{Eng}</td> <td class="alternatingrowstyle">{Unavail}</td> <td class="alternatingrowstyle">{Others}</td> </tr> <!--<tr style="background-color:SteelBlue;font-weight:bold;color:White;"> <td class="gridheader"> </td> <td class="gridheader">Avail</td> <td class="gridheader">Unavail</td> <td class="gridheader">Eng</td> <td class="gridheader">Other</td> </tr> <tr> <td class="rowstyle">HQ</td> <td id="11" class="rowstyle"> </td> <td id="12" class="rowstyle"> </td> <td id="13" class="rowstyle"> </td> <td id="14" class="rowstyle"> </td> </tr> <tr> <td class="alternatingrowstyle">CDA</td> <td id="21" class="alternatingrowstyle"> </td> <td id="22" class="alternatingrowstyle"> </td> <td id="23" class="alternatingrowstyle"> </td> <td id="24" class="alternatingrowstyle"> </td> </tr> <tr> <td class="rowstyle">Div 1</td> <td id="31" class="rowstyle"> </td> <td id="32" class="rowstyle"> </td> <td id="33" class="rowstyle"> </td> <td id="34" class="rowstyle"> </td> </tr> <tr> <td class="alternatingrowstyle">Div 2</td> <td id="41" class="alternatingrowstyle"> </td> <td id="42" class="alternatingrowstyle"> </td> <td id="43" class="alternatingrowstyle"> </td> <td id="44" class="alternatingrowstyle"> </td> </tr> <tr> <td class="rowstyle">Div 3</td> <td id="51" class="rowstyle"> </td> <td id="52" class="rowstyle"> </td> <td id="53" class="rowstyle"> </td> <td id="54" class="rowstyle"> </td> </tr> <tr> <td class="alternatingrowstyle">Div 4</td> <td id="61" class="alternatingrowstyle"> </td> <td id="62" class="alternatingrowstyle"> </td> <td id="63" class="alternatingrowstyle"> </td> <td id="64" class="alternatingrowstyle"> </td> </tr> </table> </div> <div class="dtrowstyle">Date: <span id="timestamp"> </span></div> </div> </div> </body> </html>