Using jQuery to call a web service
- by Matt
I have created a web service which takes a username and password as parameters and returns a list of children in JSON (the user is a Social Worker). The web service is hosted locally with IIS7. I am attempting to access the web service using javascript/jquery because it will eventually need to run as a mobile app.
I'm not really experienced with web services, or javascript for that matter, but the following two links seemed to point me in the right direction:
http://williamsportwebdeveloper.com/cgi/wp/?p=494
http://encosia.com/using-jquery-to-consume-aspnet-json-web-services/
This is my html page:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="TestWebService.aspx.cs" Inherits="Sponsor_A_Child.TestWebService" %>
<asp:Content ID="Content1" ContentPlaceHolderID="stylesPlaceHolder" runat="server">
<script type="text/javascript" src="Scripts/jquery-1.7.1.js">
$(document).ready(function () { });
function LoginClientClick() {
$("#query_results").empty();
$("#query_results").append('<table id="ResultsTable" class="ChildrenTable"><tr><th>Child_ID</th><th>Child_Name</th><th>Child_Surname</th></tr>');
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "http://localhost/PhoneWebServices/GetChildren.asmx/GetMyChildren",
data: '{ "email" : "' + $("#EmailBox").val() + '", "password": "' + $("#PasswordBox").val() + '" }',
dataType: "json",
success: function (msg) {
var c = eval(msg.d);
alert("" + c);
for (var i in c) {
$("#ResultsTable tr:last").after("<tr><td>" + c[i][0] + "</td><td>" + c[i][1] + "</td><td>" + c[i][2] + "</td></tr>");
}
}
});
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contentPlaceHolder" runat="server">
<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="LoginClientClick()" />
</div>
<div id="query_results">
</div>
</asp:Content>
And this is my web service code:
[WebMethod (Description="Returns the list of children for whom the social worker is responsible.")]
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
string[][] JaggedArray = new string[MyChildren.Tables[0].Rows.Count][];
int i = 0;
foreach (DataRow rs in MyChildren.Tables[0].Rows)
{
JaggedArray[i] = new string[] { rs["Child_ID"].ToString(), rs["Child_Name"].ToString(), rs["Child_Surname"].ToString() };
i = i + 1;
}
// Return JSON data
JavaScriptSerializer js = new JavaScriptSerializer();
string strJSON = js.Serialize(JaggedArray);
return strJSON;
}
I followed the examples in the provided links, but when I press submit, only the table headers appear but not the list of children. When I test the web service on it's own though, it does return a JSON string so that part seems to be working. Any help is greatly appreciated :)
