Click here to Skip to main content
15,037,388 members
Please Sign up or sign in to vote.
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
Updated 26-Oct-13 20:35pm
v2

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
   
v2
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.
   
v2
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>
   

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900