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
Create RESTful WCF Service API: Step By Step Guide ...
Step by Step Guide to create Restful WCF service API in ASP.NET and C#; Using web service, very helpful tutorial for beginner's .
Step by Step Tutorial Restful WCF Web Service and ...
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
5 simple steps to create your first RESTful service - WCF ...
Implementing RESTful Service In this step we are going to implement the service. this simple WCF tutorial will be helpful for the Web Services Security
Step by Step tutorial of REST Enabled Service in WCF - C# ...
Further Readings: Creating REST Service step by step Tutorial; Consume WCF REST Service in ASP.Net Web Site : Step By Step Tutorial; Create REST Service in WCF 4.0
A Beginner's Tutorial on Creating WCF REST Services ...
3 Apr 2013; Section: Windows Communication Foundation; Chapter A Beginner's Tutorial on Creating WCF REST Services. demo for fresher of web service
How to create RESTful service - WCF tutorial
A great tutorial about the Windows Communication Foundation WCF REST service. saravanakumar's WCF Tutorial. Step 7: We can access the RESTful service using
Creating REST Service step by step Tutorial - C#, ASP.Net ...
Consume WCF REST Service in ASP.Net Web Site : Step By Step Tutorial; Create REST Service in WCF 4.0 Step by Step tutorial; Vb.Net, SQL Server and more
create restful wcf service api using post step by step
Differences Between WCF and ASP.NET Web Services Step by Step Guide For Develop WCF restful web simple Menu using Jquery Beginners Tutorial;
WCF Step by Step Tutorial | SSRS Tutorials
NET Remoting 2.Distributed Transactions 3.Message Queues and 4.Web Services into a AJAX and REST Support WCF Step by Step Tutorial This is the Basic WCF
Create RESTful WCF Service API: Step By Step Gu...
WCF Rest Tutorial. Step by Step Guide to create Restful WCF Difference between ASP.NET web service and programming WCF services like ASP.NET web
Travelling is my life
Related Post
Learn Photoshop, photography and photoshop tutorialsSuperman 3D Extruded text Photoshop TutorialIts a bird, its a plane, no its block letter Extrude in- Windows Server 2003 Tutorials, Visual and Step-by-StepWindows Server 2003 Tutorials, Visual and Step-by-Step
Welcome to my Windows Server 2003 t
- Photoshop Tutorials Photoshop LadySimple Photo Manipulation of a Snowy ImageEveryone must be so relaxing during Christmas. To keep yo
- Watercolor Painting Free lessons and tutorials, Step-by FAST & FREE LESSONSBasicAdvancedExtrasBrush SkillsHone your craft with 6 quick and easy brush e
ConversionConversion EmoticonEmoticon