How to call WCF service using jQuery ajax functions

Question

I created simple WCF service and added it to ASP.NET MVC application.

The service have a single method RepeatString:

[OperationContract]
public string RepeatString(string s, int times)
{
   string result = "";

   for (int i = 0; i < times; ++i)
   {
       result += s;
   }


   return result;
}

I tried to call this method from a view (.cshtml) using post and get methods:

function callAjaxService1() {    
    $.post("~/AjaxService1.svc/RepeatString", {s : 'Test', times : 12},
        function(data) {
            alert('data from service');
        }, 'json');
}

function callAjaxService1() {    
    $.get("~/AjaxService1.svc/RepeatString", {s : 'Test', times : 12},
        function(data) {
            alert('data from service');
        }, 'json');
}

but neither has succeed.

Is there anything I should change in WCF service operation decoration or am I using jQuery.get/post wrongly?

Urls should be like /AjaxService1.svc/RepeatString rather than ~/AjaxService1.svc/RepeatString in clientside, i.e. js code. — shakib
– shakib, Commented Aug 5, 2013 at 6:00
I tend to avoid using js calls to wcf services, instead, i add the service as a service reference to the mvc project, and then have the js call a controller which then calls the wcf service. You get the benifit of using contracts for that interaction and also you can unit test the interaction from the controller to the wcf service making it a little less guess work etc. — Slicksim
– Slicksim, Commented Aug 5, 2013 at 7:58

matthias krull · Accepted Answer · 2014-02-25 15:07:10Z

I would think of something like this...

wcf interface service

[OperationContract]
[WebGet(UriTemplate = "/repeatstring",
ResponseFormat= WebMessageFormat.Json)]
string RepeatString(string s, int times);

Then your code

public string RepeatString(string s, int times)
{
   string result = "";

   for (int i = 0; i < times; ++i)
   {
       result += s;
   }


   return result;
}

without the operationcontract but the page will be derived from the interface so your ajax code would be something like this.

$.ajax({
  type: "GET", //to get your data from the wcf service
  url: "AjaxService1.svc/repeatstring", //you might need to add the hostname at the beginning too
  data: option // or { propertyname1: "John", propertyname2: "Boston" }
})
  .done(function() {
    alert( "got data" );
  });

you can add more options to the $.ajax. You can change the "done" promise to "success" which will do work when the operation is a success. I used success when i created my wcf services and needed to send data wich json and get it with javascript. anyways you can read more about it on here

be aware of the single ' and dubble " quote marks when writing a json string or the "option" variabel

Now I hope this would help you somehow. Cheers

Saranya · Accepted Answer · 2013-12-16 13:26:24Z

0

Three things are to be taken care for a WCF to be invoked from javascript.

The Service has to be decorated with WebInvoke/WebGet to be accessed from javascript.
<enableWebScript/> has to be added to the configuration for enabling script calls to WCF.
webHttpBinding is to be used for the WCF to behave as a REST service.

edited Dec 16, 2013 at 13:26

answered Dec 14, 2013 at 21:16

Saranya

2,00818 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to call WCF service using jQuery ajax functions

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related