Write your first .net web service and consume it in jQuery Mobile

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)]
    public class Service1 : System.Web.Services.WebService

        public string GetLankanList()
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            List lankanList = new List();
            string[] names = { "chamara", "janaka", "asanka" };

            for (int i = 0; i < names.Length; i++)
                Lankans srilankans = new Lankans();
                srilankans.Name = names[i];


            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> 
    <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>

<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="lankanscript.js"></script>

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.

    var serviceURL = 'service1.asmx/GetLankanList';

            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 +='
'; //appending to the div $('#LankanLists').html(listString); // refreshing the list to apply styles $('#LankanLists ul').listview(); } function errorFunc(){ alert('error'); } });

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.

Download the source code here

Did you enjoy this article?
Signup today and receive free updates straight in your inbox. We will never share or sell your email address.


  1. I downloaded your code.
    It gives me an error. It triggers
    function errorFunc(){

  2. You should deploy it IIS server. Else it won’t work.

  3. I Deploy it to iis server but only empty page comes…

  4. @Gurunathan
    Can you check the console log in your browser and see whether any errors shown? Its difficult to debug without any clue.

  5. Hi friend what are the steps for deployong in IIS server

    • @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.

  6. 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?

  7. @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?


Leave a Reply