Below is the code snippet which will help you read the C# object collection on client client using JSon parsing.
Server side code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// 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 WebService : System.Web.Services.WebService
{
public WebService()
{
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<Lad> GetData()
{
//Perform operations on List of classroom objects
return new List<Lad>
{
new Lad {
firstName = "Shreekanth",
lastName = "Gaanji",
dateOfBirth = new MyDate
{
year = 1985,
month = 12,
day = 08
}
},
new Lad {
firstName = "Mahantesh",
lastName = "Kendhuli",
dateOfBirth = new MyDate
{
year = 1983,
month = 06,
day = 05
}
},
new Lad {
firstName = "Manjunath",
lastName = "Murgod",
dateOfBirth = new MyDate
{
year = 1983,
month = 09,
day = 07
}
}
,
new Lad {
firstName = "Sandeep",
lastName = "Patil",
dateOfBirth = new MyDate
{
year = 1986,
month = 08,
day = 05
}
}
};
}
public class MyDate
{
public int year;
public int month;
public int day;
}
public class Lad
{
public string firstName;
public string lastName;
public MyDate dateOfBirth;
}
}
Client side code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html src="http://code.jquery.com/jquery-1.7.js">
<head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<title>jQuery calling RESTful Services</title>
<meta xmlns="http://www.w3.org/1999/xhtml" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function getData() {
$.ajax(
{
type: "POST",
url: "WebService.asmx/GetData",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var output = "<ul>";
for (var i in response.d) {
output += "<li>" + response.d[i].firstName + " " + response.d[i].lastName + " " + response.d[i].dateOfBirth.year + "/" + response.d[i].dateOfBirth.month + "/" + response.d[i].dateOfBirth.day
}
output += "</ul>";
document.getElementById("abc").innerHTML = output;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
try {
alert(JSON.stringify(XMLHttpRequest) + "\n" + textStatus + "\n" + errorThrown);
}
catch (ex) { }
finally { }
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" onclick="getData()" name="Button1" value="Button1" />
<div id="abc"></div>
</div>
</form>
</body>
</html>
Here is the OutPut
No comments:
Post a Comment