Today i got some free time and thought of making my hands dirty in JQuery and here is the result of it :)
Below is the code snippet which uses JQuery to read C# object list from a web Method and displays in a list.
Server Side code
/// <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 void GetEmployees(List<Employee> employees)
{
//Perform operations on List of employee objects
foreach (Employee c in employees)
{
//c.Id
//c.Name
//c.Role
}
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string Role { get; set; }
}
}
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 PostJSONObjectToServer() {
var JSONObject = new Array();
var obj = new Object();
obj.Id = 0;
obj.Name = "Shreekanth"
obj.Role = "Sr.Developer";
JSONObject.push(obj);
var obj = new Object();
obj.Id = 1;
obj.Name = "Mahantesh"
obj.Role = "Sr.Developer";
JSONObject.push(obj);
var obj = new Object();
obj.Id = 2;
obj.Name = "Manjunath"
obj.Role = "Sr.Developer";
JSONObject.push(obj);
var obj = new Object();
obj.Id = 3;
obj.Name = "Pramod"
obj.Role = "Sr.Developer";
JSONObject.push(obj);
var obj = new Object();
obj.Id = 4;
obj.Name = "Ravi"
obj.Role = "Sr.Developer";
JSONObject.push(obj);
$.ajax(
{
type: "POST",
url: "WebService.asmx/GetEmployees",
data: JSON.stringify({ employees: JSONObject }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) { }
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" onclick="PostJSONObjectToServer()" name="Button1" value="Button1" />
</div>
</form>
</body>
</html>
Note -1. Please don’t forget to uncomment this line[System.Web.Script.Services.ScriptService]2. The parameter name and Json object name should match.
No comments:
Post a Comment