Step by Step Tutorial — Restful WCF Web Service and Jquery Mobile

This blog is to have the tutorial on creating WCF web services and connecting the web services in Jquery Mobile application.

Pre-Requisite

• Download and install the WCF restful services template , from online template screen from VS2010 ( Search for WCF restful template inside the visual studio).
• Create the database “EmployeeDB”
• create a table with the name , below is the query to create the table

  
  CREATE TABLE [dbo].[Employees](
      [EmployeeId] [int] IDENTITY(1,1) NOT NULL,
      [EmployeeName] [varchar](150) NOT NULL,
      [EmployeeEmail] [varchar](150) NOT NULL,
      [EmployeePhone] [varchar](50) NOT NULL
  ) ON [PRIMARY]
  
  

• Insert the data into the table

WCF Service Part

Create a Restful web service  by selecting the REST template

Delete the SampleItem.cs and Services.1 CS file which are generated automatically

Create a new SVC file and name it EmployeeServices.svc

 

Create a new Class file ClsEmployeeListing.cs

This is the section to create the getter and setters for the data members

using System.Runtime.Serialization;
using System;

[DataContract]
public class ClsEmployeeListing
{

    //string varClinicID;
    //string varClinicName;
    //string varClinicAddress;
    //string varclinicOperatingHours;

    [DataMember]
    public string EmployeePhone { get; set; }
    [DataMember]
    public string EmployeeEmail { get; set; }
    [DataMember]
    public string EmployeeName { get; set; }
    [DataMember]
    public string EmployeeID { get; set; }

    public ClsEmployeeListing(Int32 Eid, string Ename, string Eemail, string Ephone)
    {
        EmployeeID = Eid.ToString(); ;
        EmployeeName = Ename;
        EmployeeEmail = Eemail;
        EmployeePhone = Ephone;
    }
}

EmployeeServices.svc

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.Data.SqlClient;

namespace EmployeeDemo
{
     [System.ServiceModel.Activation.AspNetCompatibilityRequirements(RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Allowed)]

    // NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "EmployeeServices" in code, svc and config file together.
    public class EmployeeServices : IEmployeeServices
    {



         public List<ClsEmployeeListing> GetEmployeeListing()
        {
            List<ClsEmployeeListing> mylist = new List<ClsEmployeeListing>();

            using (SqlConnection conn = new SqlConnection("server=WINDOWS7PC\\SQLEXPRESS;database=EmployeeDB;Persist Security Info=True;User ID=Appuser;Password=Prasad78;"))
            {
                conn.Open();
                string cmdStr = String.Format("Select EmployeeID,EmployeeName,EmployeeEmail,EmployeePhone from Employees");
                SqlCommand cmd = new SqlCommand(cmdStr, conn);
                SqlDataReader rd = cmd.ExecuteReader();

                if (rd.HasRows)
                {
                    while (rd.Read())
                    {
                        mylist.Add(new ClsEmployeeListing(rd.GetInt32(0), rd.GetString(1), rd.GetString(2), rd.GetString(3)));

                    }
                }
                conn.Close();
            }

            return mylist;
        }



   
    }
   
}

Interface part

IEmployeeServices.cs

This is the section to add the web service method and URITemplate ( this is the name which we will be calling in web service URL)

EG:

URITemplate : EmployeeList

Service name : EmployeeServices.svc

Web service call would be  :http://localhost:8008/EmployeeServices.svc/EmployeeList

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;

namespace EmployeeDemo
{
    // NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IEmployeeServices" in both code and config file together.
    [ServiceContract]
    public interface IEmployeeServices
    {
        [OperationContract]
        [WebInvoke(Method = "GET",
            ResponseFormat = WebMessageFormat.Json,
            BodyStyle = WebMessageBodyStyle.Wrapped,
            UriTemplate = "EmployeeList")]

        List<ClsEmployeeListing> GetEmployeeListing();

      
    }
}

Web Config Part

Add the necessary configuration in web.config on the cross domain and service definition

<?xml version="1.0"?>
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0"/>
    <customErrors mode="Off"/>
  </system.web>
  <system.serviceModel>
    <services>
      <service name="EmployeeDemo.EmployeeServices" behaviorConfiguration="EmpServiceBehaviour">
        <endpoint address="" binding="webHttpBinding" bindingConfiguration="webHttpBindingJsonP" contract="EmployeeDemo.IEmployeeServices" behaviorConfiguration="web"/>
        <host>
          <baseAddresses>
            <add baseAddress="http://localhost:4671"/>
          </baseAddresses>
        </host>
      </service>
    </services>
    <behaviors>
      <serviceBehaviors>
        <behavior name="EmpServiceBehaviour">
          <serviceMetadata httpGetEnabled="true"/>
          <dataContractSerializer ignoreExtensionDataObject="true" maxItemsInObjectGraph="123456"/>
          <serviceDebug includeExceptionDetailInFaults="true"/>
        </behavior>
      </serviceBehaviors>
      <endpointBehaviors>
        <behavior name="web">
          <dataContractSerializer ignoreExtensionDataObject="true" maxItemsInObjectGraph="123456"/>
          <webHttp/>
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <bindings>
      <webHttpBinding>
        <binding name="webHttpBindingJsonP" crossDomainScriptAccessEnabled="true"/>
      </webHttpBinding>
    </bindings>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true"/>
    </system.serviceModel>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <!--<httpErrors errorMode="Detailed"></httpErrors>-->
  </system.webServer>
</configuration>

Build the solution and deploy the web service in the IIS .

Jquery Mobile Part

Create a new filename Index.html

Add the Jquery mobile library  reference , reference can be in local or can be referenced to the jquery mobile library from CDN

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

In this tutorial i have a created three section header , content , footer.  In the jquery mobile each section is identified by the attribute “data-role” in the DIV tag.

<div data-role="page">

<div data-role="header">
<h1>Header</h1>
</div><!-- /header -->

<div data-role="content">    
<ul data-role="listview" data-inset="true"   data-theme="b"id="EmployeeList">
</ul>        
</div><!-- /content -->
    
<div data-role="footer">
<h4>Footer</h4>
</div><!-- /footer -->
    
</div><!-- /page -->

</body>

Create a Ajax call to call our web services

  $.ajax("http://localhost:8008/EmployeeServices.svc/EmployeeList",

Add the Ajax call in the document ready function

<script>
$(document).ready(function () {
$.ajax("http://localhost:8008/EmployeeServices.svc/EmployeeList",

{
beforeSend: function (xhr) {
// $.mobile.showPageLoadingMsg();
},

complete: function () {
// $.mobile.hidePageLoadingMsg();
},
contentType: 'application/json',
dataType: 'jsonp',
jsonp: 'callback',
type: 'GET',
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(xhr.responseText);
//alert(thrownError);
},
success: function (data) {
var result = data.GetEmployeeListingResult;

$.each(result, function (index, output) {
$('#EmployeeList').append('<li> <a href=EmployeeDetails.html?EmployeeID=' + output.EmployeeID + '>' + output.EmployeeName + ' </a>   .....</li>');
});

$('#EmployeeList').listview('refresh');
}
});

});
</script>

Out put of the the web service would in json format , to bind the data from web service to the list , use the $.each(result, function (index, output) {  and give the reference to the UL list

$.each(result, function (index, output) {
$('#EmployeeList').append('<li> <a href=EmployeeDetails.html?EmployeeID=' + output.EmployeeID + '>' + output.EmployeeName + ' </a>   .....</li>');
});

$('#EmployeeList').listview('refresh');

 

For any queries , please email the query to vishnuprasad (dot) ramakrishnan (at) <yahoo> (dot) (com)

 

The source code for this tutorial has can be downloaded from here

Jquery Mobile Source Code

WCF Source Code