Click here to Skip to main content
15,868,016 members
Articles / All Topics
Technical Blog

How to Consume WCF Service using JavaScript Proxy

Rate me:
Please Sign up or sign in to vote.
4.88/5 (11 votes)
26 Jul 2013CPOL4 min read 72.7K   12   10
This post discusses how to consume WCF service using JavaScript proxy

Introduction

Today I am going to discuss another great feature of WCF. Do you know that a WCF service allows us to create a JavaScript Proxy?

Yes it does!!

But let’s first understand what is a proxy? As we already know, whenever we have to use any web service or WCF service, we need to create proxy of that service and with the help of proxy, we use the functionalists provided by the web/WCF service. Proxy acts an intermediary between the client of the service and the actual service. Proxy provides a simple interface to the consumer of service and all the intricacies like creating a connection, creating and sending the request, getting the response, etc. is handled by the proxy itself.

So in our applications, we add service reference using the wizard to add the proxy of the service. We sometimes also use command line tool to create the proxy of the service. And then, use that proxy to create the instance of the service client and use the methods of the web service.

Similarly JavaScript proxy enables the Client to connect the WCF service from the JavaScript or other client side libraries without writing any server side code. So in this post, we’ll create a WCF Service, will update the required configuration and then, we’ll use that web service with the help JavaScript proxy from application. We can use the JavaScript proxy to connect from the ASP.NET web forms and ASP.NET MVC applications both.

So let’s create a demo. So let’s create ASP.NET web forms application using:

File->New->Project->ASP.NET Web Forms Application and put the name of the application, say WCFJSproxyDemo. So let’s add the WCF Service in the solution.

So to add, first let’s add a folder named Service in the solution and add a service using Add-> New Item -> WCF Service and name it say DemoWCFService.

Here, I added a method in the WCF service SayHallo which takes a string parameter as name and implemented it as:

C#
public class DemoWCFService : IDemoWCFService
{
    public string SayHello(string name)
    {
        return string.Format("Hello {0} !! Whats up? ", name);
    }
}

I have also added AspNetCompatibilityRequirements attribute so that service can be run on ASP.NET compatibility code as:

C#
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class DemoWCFService : IDemoWCFService
{
    public string SayHello(string name)
    {
        return string.Format("Hello {0} !! Whats up? ", name);
    }
}

Now, let’s verify the service by seeing the service in the browser. It should be as:

Service

It means my WCF service is ready and to see the wsdl, you can click on the encircled area.

Now, we need to make some changes in configuration. We need to add the endpointBehavior in web.config and add the attribute <enableWebScript/>. So I have added it as:

behaivir

Here, you can see that I have added enableWebScript attribute. Now, we require to add the end point in service and provide the endpoint behavior that we added as:

endpoint

Now, my configuration for WCF service looks like:

config

Now JavaScript proxy can be generated by adding /js in the URL like http://localhost:61208/Service/DemoWCFService.svc/js. So the JavaScript proxy looks like:

jsproxy

The above screenshot is not complete. It is just to indicate that JavaScript proxy got generated.

Now, our service is ready and can be used by client side libraries. So let’s test this. So I have added a test web page in my application. It has one text box and a button. On button click, I am calling the service and the returned response is displayed in a div. So my aspx code looks like:

aspx

Now I need to write JavaScript code to call the service. So it is as:

javascriptcode

So here, I have binded onclick method to my button and on click of the button, WCF service has been called. So if you see red encircled area, I have created the instance of the service, then the next line (encircled as blue) I am calling the SayHello method of the service which takes one parameter that I am passing the textbox value and I am just assigning the result to a div.

So before running, we must be sure that we have included the JavaScript proxy file in the page. It uses Microsoft Ajax to connect the service and requires MicrosoftAjax.js as well. So I have included this as well and it must be earlier that JavaScript proxy. Ordering of the file is important here. I have also included the jQuery file as I am using it. The files included are:

includedjs

You can see here that the first file is jQuery file, then MicrosoftAjax.js and the last file is JavaScript proxy that we generated earlier by WCF service. Now let’s run the code.

Demo

So here, I put my name and clicked on the button and the response returned by the service.

So we can see here how simple it is. If our service provides a JavaScript proxy, then we can simply call the service from the JavaScript without worrying about how it will connect to the server and call the service method. All these things will be taken care of by the proxy itself. As it internally uses Microsoft Ajax, we require to include that file on the page.

This feature similarly can be used in ASP.NET MVC project. I have presented few days back in an offline community event and that time used ASP.NET MVC project to consume the service.

The sample is attached with the blog post.

Hope you all have this great feature.

Cheers,
Brij

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India
Brij is a 3-times Microsoft MVP in ASP.NET/IIS Category and a passionate .NET developer. More than 6 years of experience in IT field, currently serving a MNC as a Tech Lead/Architect.

He is a very passionate .NET developer and have expertise over Web technologies like ASP.NET 2.0/3.5/4.0, jQuery, JSON, Javascript, IIS and related technologies. He is also a Exchange Server (EWS) Specialist. He has great experience in design patterns and N-Tier Architecture.

He is also certified as Microsoft Certified Technologies Specialist-ASP.NET and Microsoft Certified Technologies Specialist-WCF in .NET 4.0. He has also received several awards at various forums and his various articles got listed as "Article of the day" at ASP.NET Microsoft Official Website www.asp.net.

He has done MCA from NIT Durgapur and completed his graduation from Lucknow University.

Learning new technologies and sharing knowledge excites him most. Blogging, solving problems at various forums, helping people, keeps him busy entire day.


Visit his Blog: Code Wala

Area of Expertise :
C#, ASP.NET 2.0,3.5,4.0, AJAX, JQuery, JSON, XML, XSLT, ADO.Net, WCF, Active Directory, Exchange Server 2007 (EWS), Java script, Web Services ,Win services, DotnetNuke, WSS 3.0,Sharepoint Designer, SQL Server 2000/2005/2008

Comments and Discussions

 
QuestionService hosted in an application? Pin
Benny S. Tordrup28-Apr-16 1:16
Benny S. Tordrup28-Apr-16 1:16 
Question/js doesn't work :-( Pin
Member 132110023-Dec-15 3:59
Member 132110023-Dec-15 3:59 
Questionnot working Pin
gauti78622-Sep-15 2:57
gauti78622-Sep-15 2:57 
QuestionSaved Me Pin
dbrenth6-Nov-14 6:09
dbrenth6-Nov-14 6:09 
QuestionThanks man! Pin
Colby T Africa13-Mar-14 8:50
Colby T Africa13-Mar-14 8:50 
GeneralMy vote of 3 Pin
vikas palav21-Dec-13 1:03
vikas palav21-Dec-13 1:03 
QuestionReg:How to access wcf from js. Pin
Member 819658011-Dec-13 17:29
Member 819658011-Dec-13 17:29 
QuestionCouple of questions Pin
BloodBaz3-Dec-13 6:18
BloodBaz3-Dec-13 6:18 
Hi Brij,
Thanks for the article.

I'm using VS2012 and my web.config file didn't include a
XML
<behaviors><endpointBehaviors>
entry when following your article. Is this something you entered manually or something that my version of Visual Studio has stopped adding by default?
I see that you said you had to add it now!

Also, I had to include
C#
using System.ServiceModel.Activation;

in order to use
C#
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

out of the box. Is this normal or has VS2012 templates dropped the additional "using" reference by default?

Thanks
BloodBaz
God is REAL unless declared int

QuestionNeed help Pin
satya12345sidd17-Sep-13 3:35
satya12345sidd17-Sep-13 3:35 
SuggestionRe: Need help Pin
BloodBaz3-Dec-13 6:14
BloodBaz3-Dec-13 6:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.