I’m using PhoneGap to develop a Windows Phone 7 app. I’m trying to call a webservice which returns a List of Child objects (It’s a research project for social workers) as a JSON string. This is what I’ve got so far:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>Login Page</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript"" src="../Scripts/jquery.mobile-1.0.1.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady() {
}
function LoginButton_onclick() {
var email=document.getElementById("EmailBox").value;
var pass=document.getElementById("PasswordBox").value;
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "http://localhost:56018/PhoneWebServices.asmx?op=GetMyChildren",
data: '{ "email" : "' + email + '", "password": "' + pass + '" }',
dataType: "json",
success: GetChildrenSuccess,
failure: GetChildrenFailed
});
}
function GetChildrenSuccess(response) {
var children = eval('(' + response.d + ')');
var child;
for(child in children) {
document.getElementById('ResultsDiv').innerHTML = "ID: "+child.ID+ " Name: "+child.Name+" Surname: "+child.Surname+" \r\n";
}
}
function GetChildrenFailed(error) {
document.getElementById('ResultsDiv').innerHTML = "Error";
}
</script>
</head>
<body>
<h1>Please Login:</h1>
<div id="LoginDiv">
Email: <input id="EmailBox" type="text" /><br />
Password: <input id="PasswordBox" type="password" /><br />
<input id="LoginButton" type="button" value="Submit" onclick="LoginButton_onclick()" />
</div>
<div id="ResultsDiv">
</div>
</body>
</html>
Web Service:
[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 GetChildren : System.Web.Services.WebService {
public GetChildren () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
MD5 md5Hash = MD5.Create();
string conString = ConfigurationManager.ConnectionStrings["SponsorChildDatabase"].ConnectionString;
[WebMethod(Description = "Returns the list of children for whom the social worker is responsible.")]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public String GetMyChildren(String email, String password)
{
DataSet MyChildren = new DataSet();
int ID = SocialWorkerLogin(email, password);
if (ID > 0)
{
MyChildren = FillChildrenTable(ID);
}
MyChildren.DataSetName = "My Children"; //To prevent 'DataTable name not set' error
List<Child> children = new List<Child>();
foreach (DataRow rs in MyChildren.Tables[0].Rows)
{
Child c=new Child( rs["Child_ID"].ToString(), rs["Child_Name"].ToString(), rs["Child_Surname"].ToString() );
children.Add(c);
}
// Return JSON data
JavaScriptSerializer js = new JavaScriptSerializer();
string strJSON = js.Serialize(children);
return strJSON;
}
Child class:
public class Child
{
String id;
public String ID
{
get { return id; }
set { id = value; }
}
String name;
public String Name
{
get { return name; }
set { name = value; }
}
String surname;
public String Surname
{
get { return surname; }
set { surname = value; }
}
public Child(String Cid, String Cname, String Csurname)
{
this.ID = Cid;
this.Name = Cname;
this.Surname = Csurname;
}
}
When I test the web service on its own (i.e. entering the url in my regular browser) it works, but pressing the submit button doesn’t do anything in my mobile app.
This is my first mobile app so I don’t even know how to debug it properly, and have no idea what the problem is since it just seems to do nothing. I thought maybe the web service needs to be hosted in IIS (also no experience with this) but since it lets me add the service reference it seems to find it. Any ideas what the problem might be/if my approach is even correct?
I see some issues that I want to put your attention.
Don’t use getElementById, since you are already using jQuery, $(‘#id’) is much better.
For posting data in $.ajax method, it’s much more better to use JSON.stringify(data), instead of constructing string object by your self.
You do eval of results in callback function, which is wrong. jQuery does intial evaluation for you. You have to do that, since you are using web service wrong. Never do json serialization by yourseft, never return strings. Return object instead, ASMX will do serialization for you automatically.
Unfortunatelly you question is not specific, so it’s hard to give answer. Since you app is web mobile app, you can start it up just in browser. Use FireBug or Chrome development tools to debug your JS and see what’s wrong. Use Visual Studio to debug your service code.