As usual, I thought of writing an absolute beginner level tutorial for jQuery Mobile & .net web service developers.
First open the Visual Studio and create a Service. Visual Studio will create a service template with a name of Service1. Change the Hello world method in it as below
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Script.Serialization; namespace SimpleWebService { [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] [System.Web.Script.Services.ScriptService] public class Service1 : System.Web.Services.WebService { [WebMethod] public string GetLankanList() { JavaScriptSerializer serializer = new JavaScriptSerializer(); ListlankanList = new List (); string[] names = { "chamara", "janaka", "asanka" }; for (int i = 0; i < names.Length; i++) { Lankans srilankans = new Lankans(); srilankans.Name = names[i]; lankanList.Add(srilankans); } string jsonString = serializer.Serialize(lankanList); return jsonString; } public class Lankans { public string Name { get; set; } } } }
I hope the code itself self-explanatory. You create Objects from the Entity class named "Lankans" and add them to the list.
Later you serialise the List into a JSON string and returning.
Now we have to show the returned JSON string as ListView item of the jQuery Mobile.
Lets build the HTML page as below
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div data-role="page" id="lankalistpage">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<div id="LankanLists"></div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<script src=""></script>
</body>
</html>
That's a plain HTML5 jQuery Mobile Page
Now comes the bit tricky part where we build the list from the service using the JavaScript and jQuery.
$('#lankalistpage').live('pageshow',function(event){ var serviceURL = 'service1.asmx/GetLankanList'; $.ajax({ type: "POST", url: serviceURL, data: param="", contentType:"application/json; charset=utf-8", dataType: "json", success: successFunc, error: errorFunc }); function successFunc(data, status){ // parse it as object var lankanListArray = JSON.parse(data.d); // creating html string var listString = '
- ';
// running a loop
$.each(lankanListArray, function(index,value){
listString += '
- '+this.Name+' '; }); listString +='
That's it. Now deploy the service files and HTML, JS files along in your IIS server, and run the HTML file. It should show as below.
Congratulations, now you have successfully integrated jQuery Mobile with dot net powered web service.
Subscribe to our mailing list
Subscribe to our mailing list and receive a free udpates
Cesar says
I downloaded your code.
It gives me an error. It triggers
function errorFunc(){
alert(‘error’);
}
mayooresan says
You should deploy it IIS server. Else it won’t work.
gurunathan says
I Deploy it to iis server but only empty page comes…
mayooresan says
@Gurunathan
Can you check the console log in your browser and see whether any errors shown? Its difficult to debug without any clue.
Baiju Krishnan says
Hi friend what are the steps for deployong in IIS server
Jay Mayu says
@Baiju Krishnan
Check this tutorial on how to deploy on IIS. If you are running on Windows then its no big deal. Bus simply I can’t write it in a comment as a reply.
Carmine says
Hi Baiju!
i deployed correctly on IIS 6.0 (win 2003 server) and i can see the correctly the html of the page on IE from my client.
But i receive the alert ERROR and i haven’t the list of results…..what is the problem?
mayooresan says
@Carmine
Unless I see what you did, it’s bit difficult to say why it’s not working. I’d suggest, log your error message in browser console and see what is the error. BTW did you try with chrome or firefox?