Storage.googleapis.com



Consuming a WCF / ASMX / REST Service using jQuerySridhar Subramanian, 20 Feb 2010 ? ?4.81 (39 votes) Rate this: vote 1vote 2vote 3vote 4vote 5This step by step tutorial demonstrates how to consume a WCF, ASMX, and REST Service from an application using jQuery.Download source code - 585 KBIntroductionIn this article, I will explain how to consume a WCF / ASMX service using jQuery. The scope of the article is limited to creating and consuming different kinds of services using jQuery. I have segregated this article into seven topics based on the service consumption.Calling an ASMX Web Service using jQueryCalling a WCF Service using jQuery and retrieving data in JSON formatCalling a WCF Service using jQuery and retrieving data in XML formatCalling a WCF Service using jQuery and retrieving data in JSON format (pass multiple input parameters) and (get multiple objects as output using a DataContract)Calling a WCF Service using jQuery [GET method] and retrieving data in JSON formatCalling a REST based WCF Service using jQueryStreaming an image through WCF and requesting it through the HTTP GET verbIf you have never heard about jQuery or WCF or JSON, please learn about them before dwelling into this article. The scope is limited to service creation and consumption.I used Visual Web Developer 2008 to develop this sample. Additional tools used: Firebug and HttpAnalyzer.In the below example, I have used jQuery version 1.3.2. You can download the same from . This article demonstrates how our jQuery based browser app will retrieve the provinces for a supplied country. All the services are hosted in the same web application. Please download the source code to experiment with the sample by yourself.For calling the service, we need to use the .ajax method of jQuery which makes an XMLHttpRequest to the server. In the code section below, I have explained the key value pair attributes to be passed by marking the comments on the right side of the attribute.Hide ? Copy Code<script type="text/javascript" language="javascript" src="script/jQuery-1.3.2.min.js" "></script> <script type="text/javascript"> var varType; var varUrl; var varData; var varContentType; var varDataType; var varProcessData; function CallService() { $.ajax({ type : varType, //GET or POST or PUT or DELETE verb url : varUrl, // Location of the service data : varData, //Data sent to server contentType : varContentType, // content type sent to server dataType : varDataType, //Expected data format from server processdata : varProcessData, //True or False success : function(msg) {//On Successfull service call ServiceSucceeded(msg); }, error: ServiceFailed// When Service call fails }); } </script>I have made the above method generic to use it for all different types of services which we are going to discuss.Business LogicThe business logic for the service demonstrated below is quite simple. We store the Country and Province details in a Name Value collection. When a request supplies the country name, we return the provinces associated with it.Hide ? Copy Codepublic class CountryProvinceBL{ NameValueCollection nvProvince = null; public CountryProvinceBL() { nvProvince = new NameValueCollection(); nvProvince.Add("usa", "Massachusetts"); nvProvince.Add("usa", "California"); nvProvince.Add("india", "Tamil Nadu"); nvProvince.Add("india", "Karnataka"); } public string[] GetProvince(string Country) { return nvProvince.GetValues(Country).ToArray();}}1. Calling an ASMX Web Service Using jQueryStep 1Create a Web Service and add the code below:Hide ? Copy Code[WebService(Namespace = "")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]// Below line allows the web service to be called through HTTP protocol.[System.Web.Script.Services.ScriptService]public class CountryProvinceWebService : System.Web.Services.WebService{ [WebMethod] //Business Logic returns the provinces for the supplied country public string[] GetProvince(string Country) { return new CountryProvinceBL().GetProvince(Country); } }Step 2Invoke the method below on button click:Hide ? Copy Codefunction CountryProvinceWebService() { varType = "POST"; varUrl = "service/CountryProvinceWebService.asmx/GetProvince"; //Pass country from drop down ddlCountry' varData = '{"Country": "' + $('#ddlCountry').val() + '"}'; varContentType = "application/json; charset=utf-8"; varDataType = "json";varProcessData = true; CallService();}Step 3On success, ServiceSucceeded will be called, and it will populate the provinces dropdown with the values sent by the server.Hide ? Copy Codefunction ServiceSucceeded(result) { var ProvinceDDL = document.getElementById("ddlProvince"); for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); } var resultObject = result.d; // Constructed object name will be object.d //Button for (i = 0; i < resultObject.length; i++) { var opt = document.createElement("option"); opt.text = resultObject[i]; ProvinceDDL.options.add(opt) }}2. Calling a WCF Service using jQuery and retrieving data in JSON formatStep 1Define the Contracts in the interface ICountryProvinceWCFService.Hide ? Copy Code[ServiceContract]public interface ICountryProvinceWCFService{ [OperationContract] [WebInvoke(Method = "POST", BodyStyle=WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)] string[] GetProvince(string Country);}Implement the contract in the class CountryProvinceWCFService.Hide ? Copy Codepublic class CountryProvinceWCFService : ICountryProvinceWCFService{ // Call Business Logic to get provinces public string[] GetProvince(string Country) {return new CountryProvinceBL().GetProvince(Country); }}Step 2Define the configuration in web.config:<servicemetadata httpgetenabled="true"> enables the user to view the metadata through the web browser and generate the WSDL file.Setting includeExceptionDetailInFaults = "true" allows the WCF service to throw the original error; it will be useful while debugging the application.Adding <webhttp> to the endpoint behaviour and webHttpBinding to binding enables the web programming model for WCF, and allows the service to be accessible through web protocols.Define the contract and the name of the service.Figure 1: Web.configHide ? Copy Code<system.serviceModel> <behaviors> <serviceBehaviors> <behavior name="CountryProvinceBehavior"> <serviceMetadata httpGetEnabled="true" /> <serviceDebug includeExceptionDetailInFaults="true" /> </behavior> </serviceBehaviors> <endpointBehaviors> <behavior name="CountryProvinceBehavior"> <webHttp/> ? </behavior> </endpointBehaviors> </behaviors> <services> <service behaviorConfiguration="CountryProvinceBehavior" name="CountryProvinceWCFService"> <endpoint address="" binding="webHttpBinding" contract="ICountryProvinceWCFService" behaviorConfiguration="CountryProvinceBehavior"/> ? </service> </services></system.serviceModel>Step 3Invoke the WCF service on the button click event:Hide ? Copy Codefunction CountryProvinceWCFJSON() { varType = "POST"; varUrl = "service/CountryProvinceWCFService.svc/GetProvince"; varData = '{"Country": "' + $('#ddlCountry').val() + '"}'; varContentType = "application/json; charset=utf-8"; varDataType = "json"; varProcessData = true; CallService();}On successful service invocation, ServiceSucceeded will be called and the province values will get added to the province drop down.Hide ? Copy Codefunction ServiceSucceeded(result) {/ var ProvinceDDL = document.getElementById("ddlProvince"); for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); } // Constructed object name will be object.[ServiceName]Result // Button 2 & 3 var resultObject = result.GetProvinceResult; for (i = 0; i < resultObject.length; i++) { var opt = document.createElement("option"); opt.text = resultObject[i]; ProvinceDDL.options.add(opt) } }3. Calling a WCF Service using jQuery and retrieving data in XML formatStep 1In the operation contract, set ResponseFormat to XML.Hide ? Copy Code[OperationContract][WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Xml)]string[] GetProvinceXML(string Country);Then, implement the service:Hide ? Copy Codepublic string[] GetProvinceXML(string Country){ return new CountryProvinceBL().GetProvince(Country); }Step 2Invoke the WCF service on the button click event. Make sure you set the expected data type as XML.Hide ? Copy Codefunction CountryProvinceWCFXML() { varType = "POST"; varUrl = "service/CountryProvinceWCFService.svc/GetProvinceXML"; varData = '{"Country": "' + $('#ddlCountry').val() + '"}'; varContentType = "application/json; charset=utf-8"; varDataType = "xml"; varProcessData = true; CallService();}Use the web.config defined in Figure 1.Step 3On successful service invocation, ServiceSucceeded will be called and the province values will get added to the province drop down.Hide ? Copy Codefunction ServiceSucceeded(result) { var ProvinceDDL = document.getElementById("ddlProvince"); for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); } //Below jQuery code will loop through the XML result set $(result).find("GetProvinceXMLResult").children().each(function() { var opt = document.createElement("option"); opt.text = $(this).text(); ProvinceDDL.options.add(opt) }); }4. Calling a WCF Service using jQuery and retrieving data in JSON format (pass multiple input parameters and get multiple objects as output using a DataContract)In this example, the Country and Browser type will be passed as input parameters to the WCF Service in JSON format. Upon receiving the values, the service will send back the provinces for the passed country and some comments for the browser information.Step 1Define the Data Contract and the Service Contract for the service:Hide ? Copy Code[DataContract]public class CustomData{ [DataMember] public String BrowserInfo; [DataMember] public String[] ProvinceInfo;}[OperationContract][WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]CustomData GetProvinceAndBrowser(string Country, string Browser);And implement the contract in your service call:Hide ? Copy Codepublic CustomData GetProvinceAndBrowser(string Country, string Browser){ CustomData customData = new CustomData(); customData.ProvinceInfo = new CountryProvinceBL().GetProvince(Country); if (Browser == "ie") customData.BrowserInfo = " Did you learn to program IE 8.0"; else if (Browser == "firefox") customData.BrowserInfo = " Mozilla rocks, try Firebug & Fiddler addon's"; else customData.BrowserInfo = " I did not test in this browser"; return customData;}Step 2Use the web.config defined in figure 1.Step 3Invoke the WCF service on the button click event. Make sure you set the expected data type as XML.Hide ? Copy Codefunction CountryProvinceWCFJSONMulti() { var browser = ""; if (jQuery.browser.mozilla == true) browser="firefox" else if(jQuery.browser.msie == true) browser = "ie" varType = "POST"; varUrl = "service/CountryProvinceWCFService.svc/GetProvinceAndBrowser"; //We are passing multiple paramers to the service in JSON format // {"Country" : "india", "Browser":"ie"} varData = '{"Country": "' + $('#ddlCountry').val() + '","Browser": "' + browser + '"}'; varContentType = "application/json; charset=utf-8"; varDataType = "json";varProcessData = true; CallService();}Step 4On successful service invocation, ServiceSucceeded will be called and the province values will get added to the province drop down.Hide ? Copy Codefunction ServiceSucceeded(result) { var ProvinceDDL = document.getElementById("ddlProvince"); for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); } //WCF Service with multiple output paramaetrs //First object var resultObject = result.GetProvinceAndBrowserResult.ProvinceInfo; for (i = 0; i < resultObject.length; i++) { var opt = document.createElement("option"); opt.text = resultObject[i]; ProvinceDDL.options.add(opt) } //Second object sent in JSON format $("#divMulti").html(result.GetProvinceAndBrowserResult.BrowserInfo); }5. Calling a WCF Service using jQuery [GET method] and retrieving data in JSON formatThis time, we will use the GET Verb instead of POST to retrieve the data through WCF and jQuery.Step 1We can use the WebGet attribute instead of WebInvoke to perform the operation.Hide ? Copy Code[OperationContract][WebGet(ResponseFormat=WebMessageFormat.Json)]string[] GetProvinceGET(string Country);Implement the contract:Hide ? Copy Codepublic string[] GetProvinceGET(string Country){return new CountryProvinceBL().GetProvince(Country);}And use the web.config defined in figure 1.Step 2Set the verb to GET instead of POST, and pass the data as a query string. Invoke the WCF Service using the method below.Hide ? Copy Codefunction CountryProvinceWCFJSONGet() { varType = "GET"; varUrl = "service/CountryProvinceWCFService.svc/" + "GetProvinceGET?Country=" +$('#ddlCountry').val(); varContentType = "application/json; charset=utf-8"; varDataType = "json";varProcessData = false; CallService();}On successful service invocation, ServiceSucceeded will be called and the province values will get added to the province drop down.Hide ? Copy Codefunction ServiceSucceeded(result) { var ProvinceDDL = document.getElementById("ddlProvince"); for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); } for (i = 0; i < result.length; i++) { var opt = document.createElement("option"); opt.text = result[i]; ProvinceDDL.options.add(opt) }}6. Calling a REST based WCF Service using jQueryStep 1Define the URI for the REST service in the operation contract and set the BodyStyle to Bare.Hide ? Copy Code[OperationContract][WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, UriTemplate = "GetProvinceREST/{Country}", BodyStyle=WebMessageBodyStyle.Bare)]string[] GetProvinceREST(string Country);Implement the contract:Hide ? Copy Codepublic string[] GetProvinceREST(string Country){ return new CountryProvinceBL().GetProvince(Country); }Use the web.config defined in Figure 1.Step 2While using the REST services, use the GET verb for retrieving data, and POST, PUT, DELETE for modifying, adding, and deleting information.Hide ? Copy Codefunction CountryProvinceWCFREST() { varType = "GET"; varUrl = "service/CountryProvinceWCFService.svc/" + "GetProvinceREST/" + $('#ddlCountry').val(); varContentType = "application/json; charset=utf-8"; varDataType = "json"; varProcessData = false; CallService();}On successful service invocation, ServiceSucceeded will be called and the province values will get added to the province drop down.Hide ? Copy Codefunction ServiceSucceeded(result) { var ProvinceDDL = document.getElementById("ddlProvince"); for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); } for (i = 0; i < result.length; i++) { var opt = document.createElement("option"); opt.text = result[i]; ProvinceDDL.options.add(opt) }}7. Stream an image through WCF and request it through the HTTP GET VerbStep 1Define the contract, and set the return type to Stream since we are going to send it in Image/JPEG format.Hide ? Copy Code[OperationContract][WebInvoke(Method = "GET")]Stream GetPicture();Implement the contract:Hide ? Copy Codepublic Stream GetPicture(){ string fileName = bine( HostingEnvironment.ApplicationPhysicalPath,"vista.jpg"); FileStream fileStream = new FileStream(fileName, FileMode.Open, FileAccess.Read); // Set the content type as image/ jpeg System.ServiceModel.Web.WebOperationContext. Current.OutgoingResponse.ContentType = "image/jpeg"; return (Stream)fileStream;}And, use the web.config which we defined earlier in this articleStep 2On the button click event, set the src attribute of the image element [image1] to the WCF service.Hide ? Copy Code<img src="" id="image1" width="500" height="400" />function ShowImage() {// Call the WCF service $("#image1").attr('src', 'service/CountryProvinceWCFService.svc/GetPicture');}ConclusionThanks for reading the article. I have not gone into the details of each and every aspect to keep the article shorter. Please download the source code to check the examples yourself. I have validated the example in IE 7 and Firefox 3.5. If you have any suggestions / comments / doubts regarding the article, don't hesitate to post it. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download