Sony Arouje

Last couple of hours I was trying to bind json data from a WCF service to a simple HTML UI using Knockout js. This is a very simple application I created to learn Knockout. This application is also a tracer to test  whether I can bind json result from the service directly to the UI, without creating an elaborate javascript view model at the client side. In real world services returns complex json, so it’s not possible to create the same model at the client side.

ko.mapping

Knockout provides mapping as a plugin, you can see more details here. Please  go through the link before you proceed.

So let’s see how I created my view model and the html UI.

I created a js file named customerviewmodel.js and added the  below code.

function customerViewModel() {
    var self = this;

    self.customerList = ko.observableArray();

    self.getCustomers = function () {
        $.ajax({
            type: 'GET',   
            url: 'http://10.0.0.2:8081/CustomerService/customers',
            contentType: "application/javascript",
            dataType: "jsonp",
            success: function(data) {
                var observableData = ko.mapping.fromJS(data);
                var array = observableData();
                self.customerList(array);
            },
            error:function(jq, st, error){
                alert(error);
            }
        });
    };
}

$(document).ready(function () {
    ko.applyBindings(new customerViewModel());
});

And the html UI. For this tracer app, I created a MVC4 web application and removed all the html code from the Views/Home/index.cshtml and replaced it with the below code.

<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/knockout-2.2.0.debug.js"></script>
<script src="~/Scripts/knockout.mapping-latest.debug.js"></script>
<script src="~/MyScripts/customerviewmodel.js"></script>

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: customerList">
        <tr>
            <td data-bind="text: Id"></td>
            <td data-bind="text: Name"></td>
        </tr>
    </tbody>
</table>
<br/>

<input type="button" id="btnGetCustomers" value="Get Customers" data-bind="click: getCustomers">

 
customerList is a ko.observablearray and the data will get filled when the user clicks the button. I was able to call the WCF  REST api and get the json but unable to populate customerList or show the data to the  UI.  I fixed the issue with the  help of a post from Stackoverflow, see the code snippet below.
 
            success: function(data) {
                var observableData = ko.mapping.fromJS(data);
                var array = observableData();
                self.customersResult(array);}


WCF Configuration changes
As you can see, my WCF REST service is running in a different machine, and when I do an ajax call with datatype:json I am getting some errors. After some googling I came to know that I have to call the service with datatype:jsonp. So I changed it to jsonp and started getting the below error.
 

jQuery18206380491638767738_1396378264364 was not called

 
So I modified the  WCF service configuration as shown below to work with jsonp request.
 
    <bindings>
        <webHttpBinding>
          <binding name="webHttpBindingJson" crossDomainScriptAccessEnabled="true" />
        </webHttpBinding>    
    </bindings>

    <behaviors>
      <serviceBehaviors>
        <behavior name="ServicesBehavior">
           <serviceMetadata httpGetEnabled="true"/>
        </behavior>
      </serviceBehaviors>
      <endpointBehaviors>
        <behavior name="webby">
          <webHttp helpEnabled="true" />
        </behavior>
      </endpointBehaviors>
    </behaviors>

I configured the service as shown below. I use a custom hosting, so need to provide baseaddresses.
    <services>
      <service name="WCFRestTest.Services.CustomerService" behaviorConfiguration="ServicesBehavior">
        <host>
          <baseAddresses>
            <add baseAddress="http://10.0.0.2:8082/CustomerService/Details"/>
          </baseAddresses>
        </host>
        <endpoint name="customerServiceRest" address="http://10.0.0.2:8081/CustomerService" 
               bindingConfiguration="webHttpBindingJson" binding="webHttpBinding" 
               contract="WCFRestTest.Services.ICustomerService" behaviorConfiguration="webby"/>
      </service>
    </services>
 
After this WCF configuration changes I could able to get json from the REST  api and bind the result to html UI using Knockout.
Let me know if you have any questions.
 
Happy coding…

		
	
Rate this:
Share this:
Facebook
Twitter
LinkedIn
Tumblr
Pinterest
More
Email
Reddit
Print
Like Loading...