Display WCF Data Service Into HTML Page

Introduction

This article explains the basic way to consume data from WCF. This data might be from a database or any business logic. But the important this is how to consume the data into a HTML file.  

In this image, we can understand that JSON helps to get the WCF services and jQuery will help JSON to display objects and we can call anything into HTML from jQuery.

The following is the basic procedure for consuming WCF services into a HTML page:

• Create a WCF Service
• Consume into jQuery
• Display into HTML page

Create a WCF Service

Add a WCF Project as in the following:



Interface code

[ServiceContract]
    public interface IService1
    {
        [OperationContract]
        [WebGet(RequestFormat = WebMessageFormat.Json,
            ResponseFormat = WebMessageFormat.Json,
            UriTemplate = "/GetData/")]
        string GetData();
    }

Class code 

public class Service1 : IService1
{
  public string GetData()
  {
    return "Hello World";
  }  }

Note : Add the serviceModel.web namespace to your project. Click on Add Reference and add the assemblies.





The WebGetAttribute is applied to a service operation in addition to the operation in addition to the OperationalContractAttribue and associate the operation with UriTemplates as well as the HTTP GET verb. The association with HTTP Get verb means that the operation is used to retrieve information from the service.

Example  

[OperationContract]

       [WebGet(ResponseFormat = WebMessageFormat.Json)]
       long Mod(long x, long y);

Set the behaviors in the web.config file as in the following:

<behaviors>
           <serviceBehaviors>
           <behavior name="ServiceBehaviour">
           <serviceMetadata httpGetEnabled="true" />
           <serviceDebug includeExceptionDetailInFaults="false" />
</behavior>

Add the endpoint address as in the following:

<services>
      <service name="WcfService1.Service1">
        <endpoint address="" binding="webHttpBinding" behaviorConfiguration="web"  contract="WcfService1.IService1" bindingConfiguration="b_WebHttpBinding"></endpoint>
      </service>
</services>

Add the binding as in the following:

<bindings>
     <webHttpBinding>
       <binding name="b_WebHttpBinding" closeTimeout="00:01:00"
           openTimeout="00:01:00" receiveTimeout="00:10:00" sendTimeout="00:01:00"
           allowCookies="false" bypassProxyOnLocal="false" hostNameComparisonMode="StrongWildcard"
           maxBufferSize="2147483647" maxBufferPoolSize="2147483647" maxReceivedMessageSize="2147483647" transferMode="Buffered"
           useDefaultWebProxy="true" crossDomainScriptAccessEnabled="true">
         <readerQuotas maxDepth="32" maxStringContentLength="2147483647" maxArrayLength="2147483647"
             maxBytesPerRead="2147483647" maxNameTableCharCount="2147483647" />
         <security mode="None">
           <transport clientCredentialType="None" proxyCredentialType="None"
               realm="" />
         </security>
       </binding>
     </webHttpBinding>
   </bindings>

Run the project , you will see the output screen in your browser like this:



When we call the method name in the URL we are able to see the output in the browser, as in the following image. 

Consume into jQuery

jQuery consumes WCF Services, the ajax() method does the asynchronous HTTP (AJAX) request.

Syntax

$.ajax({
              type: ,
              content type : ,
              url : ,
             data : ,
             async : ,
             success :,
             error :
          });

These are the few parameters, described in the following:

$.ajax({
           type: "GET",
           url: "Service1.svc/GetData",
           contentType: "application/json; charset=utf-8",
           dataType: "json",
           success: function (msg) {
           alert(msg);
           },
           error: function (msg){
               alert("error")
            }
       });

Type : GET / POST.
ContentType : when we send data to the server, we use the contentType "application/x-www-form-undercoded".
URL : (wcf services) address.
Data : defines the data to be sent to the server.
Success : A callback function that executes if the function is successful.
Error : when a problem or exception occurrs the error part will run.
HTML page

<html>
<head>
    <title></title>
    <script src="Scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
    <script>
        function show() {
                $.ajax({
                type: "GET",
                url: "Service1.svc/GetData",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert(msg);
                },
                error: function (msg){
                    alert("error")
                }
            });
        }
    </script>
    <button onclick="show()">click</button>
</body>
</html>

In this code above, there is a button and in the button's click event we call the jQuery function. 

In this figure we are able to see the output "hello world" as we saw in the WCF output screen on the browser.

Summary

In this article we learned the simple procedure for consuming a WCF service into a HTML file. We also learned the basic syntax for a WCF Service and jQuery while consuming into the HTML page. Thanks for reading this article.