============================================================
CREATING THE PROJECT AND THE SERVICE
============================================================
1. Create a new ASP.NET web site.
2. Add a new Ajax enabled WCF Webservice to the project named "MyService".
This will add two files to the project : App_Code\MyService.cs and
MyService.svc.
3. Change the DoWork method in MyService.svc file to return a string and
return "abcd" from the method.
It should look like the following :
[OperationContract]
public string DoWork()
{
// Add your operation implementation here
return "abcd";
}
4. Next, to test JSON, we will create a class and add another method to the
service that will return an array of objects in JSON format.
Add a new class at the bottom of the MyService.cs file :
public class Person {
public int id { get;set;}
public string name { get;set;}
public Person ( int i, string s)
{
id = i;
name = s;
}
}
Note the "public" access specifier on all items. It is necessary for the
class to become accessible to the method we are going to add to service.
5. Now add a new method to the service that returns an array of Person
objects in JSON format.
To use the .NET javascript serializer to JSON serialize our Person object
array , we need to include Serialization namespace :
using System.Web.Script.Serialization;
Then add the new method to the service :
[OperationContract]
string GetPersons()
{
Person[] p = new Person[] { new Person(1,"aaaa"), new Person(2,"bbbb") } ;
JavascriptSerializer js = new JavascriptSerializer();
return js.Serialize(p);
}
============================================================
JAVASCRIPT TESTING OF SERVICE
============================================================
1. Suppose you are testing the service in Default.aspx.
2. Add ScriptManager control to the page.( <asp:ScriptManager>). Ensure that
the control is the first control in the form and it is given an ID and
runat="server" attribute.
3. Add <Services> tag to ScriptManager.
4. Add <asp:ScriptRereference> tag for MyService in <Services> tag.
<asp:ServiceReference Path="~/MyService.svc" />
5. Add two HTML buttons :
<button type="button" id="btn1" onclick="aa();">Javascript call to simple
Method</button>
<button type="button" id="btn1" onclick="dd();">Javascript call to JSON
returning Method</button>
6. Add the aa() function in a <script> tag :
<script type="text/javascript">
function aa() {
MyService.DoWork(bb,cc,null);
}
function bb(result){
alert(result);
}
function cc(result){
alert(result);
}
</script>
7. Add the dd() function in the same tag :
function dd() {
MyService.GetPersons(bb,cc, null);
}
When you run the web site and press these two buttons, you can expect
message box outputs like "abcd" and "[{"id":1, "name":"aaaa"}, {"id":2,
name:"bbbb"}]" after pressing the buttons.
The default.aspx file should look like the following. Note that all our
code in in .aspx file, we have not touched .aspx.cs file.
=================
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!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">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function aa() {
MyService.DoWork(bb, cc, null);
}
function bb(result) {
alert(result);
}
function cc(result) {
alert(result);
}
function dd() {
MyService.GetPersons(bb, cc, null);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="SCM" >
<Services>
<asp:ServiceReference Path="~/MyService.svc" />
</Services>
</asp:ScriptManager>
<div>
</div>
<button type="button" id="btn1" onclick="aa();">Javascript call to simple
Method</button>
<button type="button" id="btn1" onclick="dd();">Javascript call to JSON
returning Method</button>
</form>
</body>
</html>
=================
============================================================
JQUERY TESTING OF SERVICE
============================================================
1. Ensure that you have copied jQuery file in the project.
For this project, a new folder called "js" was created in the
project and jquery was copied in it.
2. Add a reference to this file in default.aspx. Add it above any
<script> block.
3. Add two more buttons to the page :
<button type="button" id="btn3" onclick="ee();">jQuery call to simple
Method</button>
<button type="button" id="btn4" onclick="ff();">jQuery call to JSON
returning Method</button>
4. Now code the methods in a <script> block :
function ee() {
$.ajax({
type: "POST",
url: "MyService.svc/DoWork",
dataType: "json",
success: function(result) { alert(result.d); }
});
}
function ff() {
$.ajax({
type: "POST",
url: "MyService.svc/GetPersons",
dataType: "json",
success: function(result) { alert(result.d); }
});
}
DO NOT FORGET FOLLOWING POINTS :
a. url should include .svc extension
b. Use result.d rather than result. Otherwise you will get [Object
object] message boxes.
When you run the web site and press new buttons, you should get exactly same
output mesage boxes as you have got for the first two boxes. This is an
indication that you have set and used jQuery correct
ly.
Till now we have not added anything related to jqGrid.
We will do that in the next section.
============================================================
jqGrid
============================================================
1. To use jqGrid, add the following files to the project :
ui.jqgrid.css
grid.locale-en.js
jquery.jqGrid.min.js
I had put them in a separate folder called "js" under the root project folder.
2. Add the reference to these javascript files in the project in same
order as specified above.
3. Add an html table to the page in the form :
<table id="table1"></table>
4. Add the following code to the <script> block :
$(document).ready(function() {
$("#table1").jqGrid({
datatype: populateGrid,
mtype: "GET",
colNames: ["id", "name"],
colModel: [{ name: "id", index: "id", width: 50 }, { name:
"name",
index: "name", width: 50}]
});
});
function populateGrid() {
$.ajax({
type: "POST",
url: "MyService.svc/GetPersons",
dataType: "json",
success: function(result) {
alert(result.d);
var i = 0;
var data = JSON.parse(result.d);
for (i = 0; i < data.length; i++)
$("#table1").addRowData(i + 1, data[i]);
}
});
}
5. Now run and test the project. You should see jqGrid displayed.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
Here is how the complete default.aspx page should look like :
<!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">
<head runat="server">
<title>Untitled Page</title>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<link href="js/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
function aa() {
MyService.DoWork(bb, cc, null);
}
function bb(result) {
alert(result);
}
function cc(result) {
alert(result);
}
function dd() {
MyService.GetPersons(bb, cc, null);
}
function ee() {
$.ajax({
type: "POST",
url: "MyService.svc/DoWork",
dataType: "json",
success: function(result) { alert(result.d); }
});
}
function ff() {
$.ajax({
type: "POST",
url: "MyService.svc/GetPersons",
dataType: "json",
success: function(result) { alert(result.d); }
});
}
$(document).ready(function() {
$("#table1").jqGrid({
datatype: populateGrid,
mtype: "GET",
colNames: ["id", "name"],
colModel: [{ name: "id", index: "id", width: 50 }, { name: "name",
index: "name", width: 50}]
});
});
function populateGrid() {
$.ajax({
type: "POST",
url: "MyService.svc/GetPersons",
dataType: "json",
success: function(result) {
alert(result.d);
var i = 0;
var data = JSON.parse(result.d);
for (i = 0; i < data.length; i++)
$("#table1").addRowData(i + 1, data[i]);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="SCM" >
<Services>
<asp:ServiceReference Path="~/MyService.svc" />
</Services>
</asp:ScriptManager>
<div>
</div>
<button type="button" id="btn1" onclick="aa();">Javascript call to simple Method</button>
<button type="button" id="btn2" onclick="dd();">Javascript call to JSON returning Method</button>
<button type="button" id="btn3" onclick="ee();">jQuery call to simple Method</button>
<button type="button" id="btn4" onclick="ff();">jQuery call to JSON returning Method</button>
<table id="table1"></table>
</form>
</body>
</html>
