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