Communication between WCF (ServiceHost) and HTML (JQuery)

Question

I am want to program a simple "Hello world" example for a communication between WCF service and an html page.

To program the WCF server I use the code below:

    namespace ConsoleHelloWorldServiceClient 
     {
     class Program
     {
        static  void Main(string[] args)
        {
             var adrs = new Uri[1];
            adrs[0] = new Uri("http://localhost:6464");
            using (ServiceHost host = new ServiceHost(typeof(HelloWorld.HelloWorldService ),adrs))
            {
                host.Open();
                Console.WriteLine("Server is open");
                Console.WriteLine("Press Enter to close server");
                Console.ReadLine();
            }         
       }     
     }
 }

Hello world Interface

  namespace HelloWorld 
    {
    [ServiceContract]  
     public interface IHelloWorldService 
     {
       [OperationContract]
        string SayHello();
     }
    }

Hello world class

namespace HelloWorld
 {
    [DataContract]
    [ServiceBehavior(InstanceContextMode = InstanceContextMode.Single)]
    public class HelloWorldService : IHelloWorldService
      {
        [WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, UriTemplate = "SayHello")]
        public string SayHello()
        {
             return "Hello World!";
        }
      }
  }

Now in my HTML page i would like to click on a button and display the text.

Then I use JQuery to communicate with the service:

 <!DOCTYPE HTML>
        <html>
           <head> 
        <script type="text/javascript"
          src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js">
        </script>
    
        <script type="text/javascript">
            var url = 'http://localhost:6464/HelloWorldService';
            $(document).ready(function () { 
                $("#get").click(function () {
                    var urlGet = url + 'SayHello';
                    $.getJSON(urlGet, function (data) {
                        $('#text').val(data);
                    });
                });
            });
    
            
        </script>
      </head>
      <body>
      <input id="text" type="text" value="Hello" />
       <input id="get" type="button" value="Get" />
      </body>
    </html>

But I am the feeling that this client is used only for webservers... How can I do it?

Thanks for your help.

vendettamit · Answer 1 · 2015-10-22T17:41:28.723

You are missing couple of thing in your hosting. There are not bindings defined. To be specific to connect with JQuery client service should be available via Http protocol and messages should be in plain or understandable format i.e. JSON.

var adrs = new Uri("http://localhost:6464");
using (ServiceHost host = new ServiceHost(typeof(HelloWorld.HelloWorldService ),adrs))
{
    var restEndPoint = host.AddServiceEndpoint(typeof(IHelloWorldService), new WebHttpBinding(), "");
    restEndPoint.Behaviors.Add(new WebHttpBehavior();

    host.Open();
    Console.WriteLine("Server is open");
    Console.WriteLine("Press Enter to close server");
    Console.ReadLine();
}

Corrections in your ServiceContract declarations. The WebInvoke attribute should be on Interface contract.

 [ServiceContract]  
     public interface IHelloWorldService 
     {
       [WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, UriTemplate = "SayHello")]
        string SayHello();
     }

Your service goes like:

[ServiceBehavior(InstanceContextMode = InstanceContextMode.Single)]
public class HelloWorldService : IHelloWorldService
  {
        public string SayHello()
        {
             return "Hello World!";
        }
      }
  }

The DataContract should only be used on messages i.e. entities not on service.

Thank you very much for your comments. I will correct my code and get back to you. :) — lla, Oct 22 '15 at 16:22
One note - for a WCF endpoint to "talk JSON", you also need to add the `WebHttpBehavior` to it: `host.AddServiceEndpoint(typeof(IHelloWorldService), new WebHttpBinding(), "").Behaviors.Add(new WebHttpBehavior());` — carlosfigueira, Oct 22 '15 at 17:37
@carlosfigueira Good catch! I completely missed it. I'll update the answer. — vendettamit, Oct 22 '15 at 17:40
Not sure, if it critical, but for ``Method = "GET"`` **WebGet** Attribute should be used rather WebInvoke, as I know. — Mimas, Oct 23 '15 at 07:34

Communication between WCF (ServiceHost) and HTML (JQuery)

1 Answers1