Question

As windows 8 metro style javascript/html5 apps cannot communicate directly with database, I want to create a c# wcf service connected with SQL server and calling it in metro style javascript/html5 app for data storing and retrieving.

I have created a c# wcf service application in Visual Studio 2012 RC and hosted on local windows 8 release preview system. But i am unable to connect wcf service with my metro app.

Below is my wcf service application code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;

namespace WcfService1
{
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file together.
[ServiceContract]
public interface IService2
{
    [OperationContract]
    [WebGet(UriTemplate = "/Add/{Number1}/{Number2}", RequestFormat = WebMessageFormat.Json,
   ResponseFormat = WebMessageFormat.Json
                                                    )]
    int Add(string Number1, string Number2);
}
}

And

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;

namespace WcfService1
{
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "Service1" in code, svc and config file together.
// NOTE: In order to launch WCF Test Client for testing this service, please select Service1.svc or Service1.svc.cs at the Solution Explorer and start debugging.
public class Service1 : IService2
{
    public int Add(string Number1, string Number2)
    {
        int num1 = Convert.ToInt32(Number1);
        int num2 = Convert.ToInt32(Number2);
        return num1 + num2;
    }      



}
}

And

<?xml version="1.0"?>
<configuration>

<appSettings>
<add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" />
</appSettings>
<system.web>
<compilation debug="true" targetFramework="4.5" />
</system.web>
<system.serviceModel>
<behaviors>
  <serviceBehaviors>
    <behavior>

      <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true"/>

      <serviceDebug includeExceptionDetailInFaults="false"/>
    </behavior>
  </serviceBehaviors>     
</behaviors>    
<serviceHostingEnvironment aspNetCompatibilityEnabled="true"
    multipleSiteBindingsEnabled="true" />
</system.serviceModel>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true"/>

<directoryBrowse enabled="true"/>
</system.webServer>

</configuration>

Below is my code of calling wcf in metro app:

var Number1  = document.getElementById('TextboxFirstNumber');
var Number2  = document.getElementById('TextboxSecondNumber');
var ResultSpan  = document.getElementById('SpanResult');
var ButtonToAdd  = document.getElementById('ButtonAdd');
ButtonToAdd.addEventListener('click',  function  ()  {
    var baseURl = "http://localhost:52653/Service1.svc/Add/";
    var url  = baseURl+Number1.value+"/"+Number2.value;  
    WinJS.xhr({ url: url  }).then(function  (r)  {
        var result  = JSON.parse(r.responseText);
        ResultSpan.innerHTML  = result; 
    });
}); 

My metro app exits with following error:

{"exception":null,"error":{},"promise":{"_oncancel":null,"_nextState":null,"_state":{"name":"error","done":null,"then":null},"_listeners":null,"_value":{},"_isException":false,"_errorId":2},"id":2}

Please tell me what i am doing wrong here…
or is there any way to communicate metro javascript/html5 app with sql server database.

Thanks in advance…

Answer 1

I have done it by creating a JSON-Rest-WCF Service, connect it with sql server and call this service from metro app through below method.

WinJS.xhr({ url: url})