Implementing WCF Service Part 3 - SOAP/XML

In this post, I will implement the basicHttpBinding, through which you can even use a HTML page and JavaScript to consume the WCF Service via SOAP based XML. I spent several hours to exactly figure out the SOAP format. In ASMX web service, if you will click on a method, it shows you the sample SOAP format for request and response. Unfortunately, that is not available in WCF Service page right now, so you have to figure out or use a tool to see what is being passed or expected. The Serialization used in ASMX Web Service is based on XML Serialization; however WCF uses a different mechanism for the same. You can use the old SOAP format (which I used in ASMX Web Service) to post the transaction but you will always get SOAP 1.2 format response. In order to keep consistency, I kept the request format similar to response.

So, In order to make this happen, we will have to make changes at following places

1.       Web.Config – Both at Service and Client side for new binding

2.       CustomerWcfServiceTest.aspx – For adding new HTML form fields and JavaScript functions

 

So let’s see step by step what we need to make change in each file.

Web.Config (WCF Service) – Add the following in respective sections

<endpoint address="basic" binding="basicHttpBinding" bindingConfiguration="basicBinding" contract="Vishwa.Example.WcfService.ICustomerService" bindingNamespace="http://wcfservices.vishwamohan.net/basic"/>

  <bindings>    

   <basicHttpBinding>

     <binding name="basicBinding">          

       <security mode="None">            

       </security>          

     </binding>        

   </basicHttpBinding>

 </bindings>

Web.Config (WCF Client or WebSite) : Once you made the above change in your service Config file, you can update your service reference in client application or web site.When you click on update Web/Service references, It will automatically add the following sections in respective area, if not make sure that you add it in client web site Web.config file.

<basicHttpBinding>

   <binding name="BasicHttpBinding_ICustomerService" closeTimeout="00:01:00" openTimeout="00:01:00" receiveTimeout="00:10:00" sendTimeout="00:01:00" allowCookies="false" bypassProxyOnLocal="false" hostNameComparisonMode="StrongWildcard" maxBufferSize="65536" maxBufferPoolSize="524288" maxReceivedMessageSize="65536" messageEncoding="Text" textEncoding="utf-8" transferMode="Buffered" useDefaultWebProxy="true">

     <readerQuotas maxDepth="32" maxStringContentLength="8192" maxArrayLength="16384" maxBytesPerRead="4096" maxNameTableCharCount="16384"/>

     <securitymode="None">

      <transport clientCredentialType="None" proxyCredentialType="None" realm=""/>

      <message clientCredentialType="UserName" algorithmSuite="Default"/>

     </security>

   </binding>

</basicHttpBinding>

<endpoint address="http://vishwa/ExampleService/CustomerService.svc/basic" binding="basicHttpBinding" bindingConfiguration="BasicHttpBinding_ICustomerService" contract="CustomerWcfService.ICustomerService" name="BasicHttpBinding_ICustomerService"/>

 

CustomerWcfServiceTest.aspx: Now I am back to same old page in which I tested earlier post. This time I will add following HTML code and JavaScript inside body tag.

<form id="frmCustomerS" method="post" action="CustomerWcfServiceTest.aspx">

        <div>    

            <table>

            <tr><td colspan="2"><b>Through Client Side SOAP/XML HTTP POST</b></td></tr>

            <tr><td>Customer ID :</td><td><input name="ID" id="ID" type="text" value="12345" /> </td></tr>

            <tr><td>Customer Name :</td><td><input name="Name" id="Name" type="text" value="Chris Clark" /> </td></tr>

            <tr><td>Customer DOB (yyyy-mm-dd):</td><td><input name="DOB" id="DOB" type="text" value="1988-08-08"/> </td></tr>

            <tr><td>Customer Address:</td><td><input name="Address" id="Address" type="text" value="unknown"/> </td></tr>

             <tr>

                <td><input type="button" name="btnGetCustomer" value="Get Customer" onclick="GetCustomerSOAP()" /></td>

                <td><input type="button" name="btnAddCustomer" value="Add Customer" onclick="AddCustomerSOAP()" /></td>

            </tr>

             <tr>

                <td><input type="button" name="btnUpdateCustomer" value="Update Customer" onclick="UpdateCustomerSOAP()" /></td>

                <td><input type="button" name="btnDeleteCustomer" value="Delete Customer" onclick="DeleteCustomerSOAP()"/></td>

            </tr>     

            <tr>

                <td colspan="2"><input type="button" name="btnGetAllCustomers" value="Get All Customers" onclick="GetCustomersSOAP()"/></td>

            </tr>    

            </table>                

        </div>   

        </form>

ipt type="text/javascript" language="javascript">

    var urlToPost = "http://vishwa/ExampleService/CustomerService.svc/basic";

    var fixedSoapAction = "http://wcfservices.vishwamohan.net/ICustomerService/";

    var serviceNameSpace = "\"http://wcfservices.vishwamohan.net\"";

    var d = new Date();

    function getFullDate()

        {

        if (d.getDate()<10) 

            return "0" + d.getDate(); 

        else 

            return d.getDate();

         } 

     function getFullMonth()

        {

        if (d.getMonth()<10) 

            return "0" + parseInt(d.getMonth()+1); 

        else 

            return parseInt(d.getMonth()+1);

         }   

    var curdate = d.getFullYear() + "-" + getFullMonth()+ "-" + getFullDate();

        function GetCustomerSOAP() 

            {

              var dataText = "<s:Envelope xmlns:s=\"http://schemas.xmlsoap.org/soap/envelope/\"><s:Body>";

                  dataText += " <GetCustomer xmlns=" + serviceNameSpace + ">"; 

                  dataText += " <ID>" + frmCustomerS.ID.value + "</ID>"; 

                  dataText += " </GetCustomer>"; 

                  dataText += " </s:Body></s:Envelope>";

                  alert(dataText);

              var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");                  

                  xmlHttp.open("POST", urlToPost,false);               

                  xmlHttp.setRequestHeader("Content-Type", "text/xml");

                  xmlHttp.setRequestHeader("SOAPAction", fixedSoapAction +"GetCustomer");

                  xmlHttp.send(dataText);

                  alert(xmlHttp.responseText);

            }

            function GetCustomersSOAP() 

            {

              var dataText = "<s:Envelope xmlns:s=\"http://schemas.xmlsoap.org/soap/envelope/\"><s:Body>";

                  dataText += " <GetCustomers xmlns=" + serviceNameSpace + ">"; 

                  dataText += " </GetCustomers>"; 

                  dataText += " </s:Body></s:Envelope>";

                  alert(dataText);

              var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");                  

                  xmlHttp.open("POST", urlToPost,false);               

                  xmlHttp.setRequestHeader("Content-Type", "text/xml");

                  xmlHttp.setRequestHeader("SOAPAction", fixedSoapAction +"GetCustomers");

                  xmlHttp.send(dataText);

                  alert(xmlHttp.responseText);

            }

        function AddCustomerSOAP() 

            {

               var dataText = "<s:Envelope xmlns:s=\"http://schemas.xmlsoap.org/soap/envelope/\"><s:Body>";

                  dataText += " <AddCustomer xmlns=" + serviceNameSpace + ">"; 

                  dataText += " <CustomerRecord xmlns:a=\"http://schemas.vishwamohan.net/2008/01/Customer\" xmlns:i=\"http://www.w3.org/2001/XMLSchema-instance\">"; 

                  dataText += " <a:ID>0</a:ID><a:Name>" + frmCustomerS.Name.value + "</a:Name><a:DOB>" + frmCustomerS.DOB.value +"</a:DOB>" ;

                  dataText += " <a:Address>" + frmCustomerS.Address.value + "</a:Address>" ;

                  dataText += " <a:DateCreated>" + curdate + "</a:DateCreated><a:DateModified>" + curdate + "</a:DateModified>" ;

                  dataText += " </CustomerRecord></AddCustomer>"

                  dataText += " </s:Body></s:Envelope>";

                  alert(dataText);

              var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");                  

                  xmlHttp.open("POST", urlToPost,false);               

                  xmlHttp.setRequestHeader("Content-Type", "text/xml");

                  xmlHttp.setRequestHeader("SOAPAction", fixedSoapAction +"AddCustomer");

                  xmlHttp.send(dataText);

                  alert(xmlHttp.responseText);

            }

        function UpdateCustomerSOAP() 

            {

               var dataText = "<s:Envelope xmlns:s=\"http://schemas.xmlsoap.org/soap/envelope/\"><s:Body>";

                  dataText += " <UpdateCustomer xmlns=" + serviceNameSpace + ">"; 

                  dataText += " <CustomerRecord xmlns:a=\"http://schemas.vishwamohan.net/2008/01/Customer\" xmlns:i=\"http://www.w3.org/2001/XMLSchema-instance\">"; 

                  dataText += " <a:ID>" + frmCustomerS.ID.value + "</a:ID><a:Name>" + frmCustomerS.Name.value + "</a:Name><a:DOB>" + frmCustomerS.DOB.value +"</a:DOB>" ;

                  dataText += " <a:Address>" + frmCustomerS.Address.value + "</a:Address>" ;

                  dataText += " <a:DateCreated>" + curdate + "</a:DateCreated><a:DateModified>" + curdate + "</a:DateModified>" ;

                  dataText += " </CustomerRecord></UpdateCustomer>"

                  dataText += " </s:Body></s:Envelope>";

                  alert(dataText);

              var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");                  

                  xmlHttp.open("POST", urlToPost,false);               

                  xmlHttp.setRequestHeader("Content-Type", "text/xml");

                  xmlHttp.setRequestHeader("SOAPAction", fixedSoapAction +"UpdateCustomer");

                  xmlHttp.send(dataText);

                  alert(xmlHttp.responseText);

            }

         function DeleteCustomerSOAP() 

            {

              var dataText = "<s:Envelope xmlns:s=\"http://schemas.xmlsoap.org/soap/envelope/\"><s:Body>";

                  dataText += " <DeleteCustomer xmlns=" + serviceNameSpace + ">"; 

                  dataText += " <ID>" + frmCustomerS.ID.value + "</ID>"; 

                  dataText += " </DeleteCustomer>"; 

                  dataText += " </s:Body></s:Envelope>";

                  alert(dataText);

              var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");                  

                  xmlHttp.open("POST", urlToPost,false);               

                  xmlHttp.setRequestHeader("Content-Type", "text/xml");

                  xmlHttp.setRequestHeader("SOAPAction", fixedSoapAction +"DeleteCustomer");

                  xmlHttp.send(dataText);

                  alert(xmlHttp.responseText);

            }

</script>

Note: If you are planning to use this binding at server side. Just change the binding name in code behind file from “WSHttpBinding_ICustomerService” to “BasicHttpBinding_ICustomerService”

So, now you are ready to run this page and click the button you like by filling appropriate data. You should be able to see the transaction request and response in form of SOAP/XML as alert.