Call WCF service using Jquery

Question

4.00/5 (2 votes)

See more:

Hi
i have problem with connecting WCF service with jquery in a specific condition.

Step we follow...
1. we create a WCF service (using WCF Class Library) with 2 endpoint (basichttp binding and wshttp binding).
2. Now we publish service, after publish we get 3 thing (a) bin folder (b)svc file (c) webconfig
3. now we (we have a existing website in .net 3.5) use service in our website in following manner
(a)Add bin using add reference,
(b)Use SVC file
(c)Add <system.servicemodel> section in our web site webconfig (pick from web config which we get after publishing)

when we run our website (the window tray show that our service host in aspnet local server.)
now i want to use service via (a) jquery (b) code behind (which we have done).

When we try to connect and use wcf service through Jquery sometime it show 500 internal server error or unsupported media type error(error codde 415).

Settings which we applied in our service

(1)

C#

[AspNetCompatibilityRequirements(RequirementsMode =    AspNetCompatibilityRequirementsMode.Allowed)]
   public class Service1 : IService1
   {
  [WebInvoke(Method =POST, BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]

      public string Search(string name)
      {
       string result;
         .........
         return result;
      }

   }

please help.... correct me for any type of error.
(plz ignore any english grammer mistake)

Thanks in advance....

Posted 26-Oct-13 20:22pm

GhoshSandeep

Updated 26-Oct-13 20:35pm

Sampath Lokuge

v2

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Pratik Bhuva · Answer 1 · 2013-10-28T21:37:00

First of all make your service Restful so that you can get plain URL to access.

C#

[WebInvoke(Method =POST, BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json, UriTemplate="/SearchMethod")]
//Now you can access this mehtod by the name you have given in uri template.
//like localhost:12345//YourService.svc/SearchMethod

In web Config You need some additional changes for Cross domain jquery.
Refer This...
http://pranayamr.blogspot.in/2011/06/calling-cross-domain-wcf-service-using.html[^]

You can achieve cross domain by two ways(as per my knowledge).
1.CORS - Cross Origin Resource Sharing.
Refer this article...
http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/[^]
And
http://www.html5rocks.com/en/tutorials/cors/[^]

2.JsonP dataType
Refer this for jsonp...

http://forums.asp.net/t/1705528.aspx?How+to+call+Remote+Webservice+through+Jquery+JsonP[^]
And
http://www.jquery4u.com/json/jsonp-examples/[^]

Hope This Help
---------------
Pratik Bhuva

Sampath Lokuge · Answer 2 · 2013-10-26T20:30:00

You can check below mentioned article for more info.

C#

// Function to call WCF  Service
function CallService() {
    $.ajax({
        type: Type, //GET or POST or PUT or DELETE verb
        url: Url, // Location of the service
        data: Data, //Data sent to server
        contentType: ContentType, // content type sent to server
        dataType: DataType, //Expected data format from server
        processdata: ProcessData, //True or False
        success: function(msg) {//On Successfull service call
            ServiceSucceeded(msg);
        },
        error: ServiceFailed// When Service call fails
    });
}

function ServiceFailed(result) {
    alert('Service call failed: ' + result.status + '' + result.statusText);
    Type = null;
    varUrl = null;
    Data = null;
    ContentType = null;
    DataType = null;
    ProcessData = null;
}

For more info : Calling WCF Services using jQuery

Another Link :Consume RESTful service using jQuery in 2 simple steps

I hope this will help to you.

Bajirao_ · Answer 3 · 2013-10-28T20:00:00

Hi,

$.parseJSON(msg) this is very useful in conversion of json parsing in form of array.

HTML

<script type="text/javascript">
	
    // Add the page method call as an onclick handler for the div.
    $("#oneRecord").click(function () {		
        $.ajax({
            type: "GET",
            url: "http://mysite/MyWcfService.svc/GetCustmer", 
			data:"id=0",			
            contentType: "application/json; charset=utf-8",
            dataType: "json",
			processData: true,
            success: function (msg) 
               {
                // Replace the div's content with the page method's return.
		debugger;
		msg = $.parseJSON(msg);
		$(msg).each(function(index, record) {
		$("#singleresult").append("<tr><td>"+record.CustID+"</td><td>"+record.FirstName+" "+record.LastName+"</td><td>"+record.Designation+"</td><td>"+record.Salary+"</td></tr>");
		$("#singleresult").append("");
		});
				 		
                //$("#singleresult").text(msg);
            },
		error: function (err){
		debugger;
		alert(err);
	$("#singleresult").text(err.statusText); });
    });
</script>

Call WCF service using Jquery

3 solutions

Solution 3

Solution 1

Solution 2

Add your solution here

Preview 0