TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Handling JSON Arrays Returned From ASP.NET Web Services With jQuery
Ashish Kumar Jaiswal
Aug 24
2016
Code
1.1
k
0
1
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Bookmark
expand
using
System;
using
System.Collections.Generic;
using
System.Configuration;
using
System.Data;
using
System.Linq;
using
System.Text;
using
System.Text.RegularExpressions;
using
System.Web;
using
System.Web.Script.Serialization;
using
System.Web.Script.Services;
using
System.Web.Services;
namespace
VIS {
[WebService(Namespace =
"http://tempuri.org/"
)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(
false
)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public
class
WebMyService: System.Web.Services.WebService {
string
connetionString =
null
;
SqlConnection sqlCnn;
SqlCommand sqlCmd;
SqlDataAdapter adapter =
new
SqlDataAdapter();
DataSet dsbind =
new
DataSet();
int
i = 0;
string
sql =
null
;
public
class
Gender {
public
string
employeeid {
get
;
set
;
}
public
string
male {
get
;
set
;
}
public
string
female {
get
;
set
;
}
}
public
string
JSONConversion(DataTable dt) {
DataSet ds =
new
DataSet();
ds.Merge(dt);
StringBuilder JsonString =
new
StringBuilder();
JsonString.Append(
"{"
);
JsonString.Append(
"\"Data\""
);
JsonString.Append(
":"
);
if
(ds !=
null
&& ds.Tables[0].Rows.Count > 0) {
JsonString.Append(
"["
);
for
(
int
i = 0; i < ds.Tables[0].Rows.Count; i++) {
JsonString.Append(
"{"
);
for
(
int
j = 0; j < ds.Tables[0].Columns.Count; j++) {
if
(j < ds.Tables[0].Columns.Count - 1) {
JsonString.Append(
"\""
+ ds.Tables[0].Columns[j].ColumnName.ToString() +
"\":"
+
"\""
+ ds.Tables[0].Rows[i][j].ToString() +
"\","
);
}
else
if
(j == ds.Tables[0].Columns.Count - 1) {
JsonString.Append(
"\""
+ ds.Tables[0].Columns[j].ColumnName.ToString() +
"\":"
+
"\""
+ ds.Tables[0].Rows[i][j].ToString() +
"\""
);
}
}
if
(i == ds.Tables[0].Rows.Count - 1) {
JsonString.Append(
"}"
);
}
else
{
JsonString.Append(
"},"
);
}
}
JsonString.Append(
"]"
);
JsonString.Append(
"}"
);
return
JsonString.ToString();
}
else
{
return
null
;
}
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public
Gender[] GenderWise() {
connetionString =
"Data Source=ServerName;Initial Catalog=DatabaseName;User ID=UserName;Password=Password"
;
sql =
"select distinct(empid) as employeeid, count(case when gender='M' then 1 end) as Male, count(case when gender='F' then 1 end) as Female from V_CountOnGender"
;
sqlCnn =
new
SqlConnection(connetionString);
try
{
sqlCnn.Open();
sqlCmd =
new
SqlCommand(sql, sqlCnn);
adapter.SelectCommand = sqlCmd;
adapter.Fill(dsbind);
JavaScriptSerializer obj =
new
JavaScriptSerializer();
string
result =
string
.Empty;
Gender[] arrlst =
new
Gender[dsbind.Tables[0].Rows.Count];
if
(dsbind.Tables[0].Rows.Count > 0) {
for
(
int
i = 0; i < dsbind.Tables[0].Rows.Count; i++) {
Gender objgender =
new
Gender();
objgender.employeeid = dsbind.Tables[0].Rows[i][
"employeeid"
].ToString();
objgender.male = dsbind.Tables[0].Rows[i][
"Male"
].ToString();
objgender.female = dsbind.Tables[0].Rows[i][
"Female"
].ToString();
arrlst.SetValue(objgender, i);
}
}
else
{
result =
"No Record Found"
;
}
}
catch
(Exception ex) {}
return
arrlst;;
}
}
}
This will go into the < head > section of the page:
<
script type =
"text/javascript"
src =
"script/jquery-1.2.6.min.js"
> < /script> <
script type =
"text/javascript"
>
$(document).ready(function() {
$.ajax({
type:
"POST"
,
contentType:
"application/json; charset=utf-8"
,
dataType:
"json"
,
url:
"/WebMyVoterService.asmx/GenderWise"
,
processData:
false
,
success: OnSuccess,
failure: function(response) {
alert(
"Can't be able to bind graph"
);
},
error: function(response) {
alert(
"Can't be able to bind graph"
);
}
});
function OnSuccess(response) {
var dpmale = [];
var dpfemale = [];
for
(var i = 0; i < response.d.length; i++) {
var obj = response.d[i];
var datamale = {
y: parseInt(obj.male),
label: obj.employeeid,
};
var datafemale = {
y: parseInt(obj.female),
label: obj.employeeid,
};
dpmale.push(datamale);
dpfemale.push(datafemale);
}
var chart =
new
CanvasJS.Chart(
"chartContainerbar"
, {
animationEnabled:
true
,
axisX: {
interval: 1,
labelFontSize: 10,
lineThickness: 0,
},
axisY2: {
valueFormatString:
"0"
,
lineThickness: 0,
labelFontSize: 10,
},
toolTip: {
shared:
true
},
legend: {
verticalAlign:
"top"
,
horizontalAlign:
"center"
,
fontSize: 10,
},
data: [{
type:
"stackedBar"
,
showInLegend:
true
,
name:
"Male"
,
axisYType:
"secondary"
,
color:
"#f8d347"
,
dataPoints: dpmale
}, {
type:
"stackedBar"
,
showInLegend:
true
,
name:
"Female"
,
axisYType:
"secondary"
,
color:
"#6ccac9"
,
dataPoints: dpfemale
}]
});
chart.render();
}
}); <
/script>
JSON Arrays
ASP.NET
Web Services
jQuery