如何在windows 8 metro app上连接wcf

最新推荐文章于 2024-05-30 09:38:53 发布

CF西西

最新推荐文章于 2024-05-30 09:38:53 发布

阅读量1.3k

点赞数

分类专栏： windows 8 metro app 文章标签： windows returning service rest json wcf

windows 8 metro app 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

原文：http://debugmode.net/2011/12/23/consuming-json-in-windows-8-metro-style-application-using-winjs/

Consuming JSON in Windows 8 Metro style Application using WinJS

POSTED BY DHANANJAY KUMAR ⋅ DECEMBER 23, 2011 ⋅ 4 COMMENTS

FILED UNDER HTML5, METRO, WINDOWS 8, WINJS

In this post I will discuss way of consuming JSON service in Windows 8 metro style application. In this post,

Metro app is created using HTML 5 and Service is being consumed using WinJS
Service is created service using WCF and REST is on service using webHttpBinding.

Since creating simple REST Service returning JSON is not main focus of this post, so I will show creation WCF REST Service returning JSON in later part of this post.

Consuming JSON using WinJS

We need to consume service in HTML 5 Metro application. Very first let us design HTML page

default.html

 
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="utf-8" />
 
<title>HelloWorldJavaScript</title>
 
<!-- WinJS references -->
 
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
 
<script src="/winjs/js/base.js"></script>
 
<script src="/winjs/js/wwaapp.js"></script>
 
<!-- HelloWorldJavaScript references -->
 
<link rel="stylesheet" href="/css/default.css" />
 
<script src="/js/default.js"></script>
 
</head>
 
<body>
 
<label >First Number</label>
 
<input id="TextboxFirstNumber" type="text" />
 
<br/>
 
<label >Second Number</label>
 
<input id="TextboxSecondNumber" type="text" />
 
<br />
 
<button id="ButtonAdd">+</button>
 
<br />
 
<span id="SpanResult" />
 
</body>
 
</html>

I have put a button and two text boxes. User will input number to be added in textboxes and on click event of the button service would get called.

In JS file to make call to REST Service returning JSON, we need to make call using WinJS.xhr.

In above snippet

url is URL of REST Service
Using JSON.parse we are parsing returned text
ResultSpan is span in which result is being displayed.

Putting all code together as below,

default.js

 
(function () {
 
'use strict';
 
 
 
 
 
WinJS.Application.onmainwindowactivated = function (e) {
 
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
 
 
 
 
 
 
 
Calculator();
 
 
 
}
 
function Calculator() {
 
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://test2dj8.cloudapp.net/Service1.svc/rest/add/";
 
var url = baseURl+Number1.value+"/"+Number2.value;
 
WinJS.xhr({ url: url }).then(function (r) {
 
var result = JSON.parse(r.responseText);
 
ResultSpan.innerHTML = result;
 
});
 
 
 
 
 
});
 
 
 
}

Creating simple Add Service

To start with let us create a WCF REST Service returning JSON as below. There is one operation contact named Add in the service and that is taking two strings as input parameters and returning integer.

 
[ServiceContract]
 
public interface IService2
 
{
 
 
 
[OperationContract]
 
[WebGet(UriTemplate="/Add/{Number1}/{Number2}",RequestFormat=WebMessageFormat.Json,
 
ResponseFormat = WebMessageFormat.Json
 
)]
 
int Add(string  Number1, string Number2);
 
 
 
 
 
}

Service is implemented as below,

 
using System;
 
 
 
namespace MultipleBindingWCF
 
{
 
 
 
public class Service1 : IService2
 
{
 
 
 
 
 
public int Add(string Number1, string Number2)
 
{
 
int num1 = Convert.ToInt32(Number1);
 
int num2 = Convert.ToInt32(Number2);
 
return num1 + num2;
 
}
 
 
 
 
 
}
 
}

Next in this section we need to configure service. We need to configure service webHttpBinding to eanble it as REST Service. So in Web.Config we need to do the below changes.

 
<?xml version="1.0"?>
 
<configuration>
 
<system.web>
 
<compilation debug="true" targetFramework="4.0" />
 
</system.web>
 
<system.serviceModel>
 
<behaviors>
 
<serviceBehaviors>
 
<behavior name ="servicebehavior">
 
<serviceMetadata httpGetEnabled="true"/>
 
<serviceDebug includeExceptionDetailInFaults="false"/>
 
</behavior>
 
</serviceBehaviors>
 
<endpointBehaviors>
 
<behavior name="restbehavior">
 
<webHttp/>
 
</behavior>
 
</endpointBehaviors>
 
</behaviors>
 
<services>
 
<endpoint name ="RESTEndPoint"
 
contract ="MultipleBindingWCF.IService2"
 
binding ="webHttpBinding"
 
address ="rest"
 
behaviorConfiguration ="restbehavior"/>
 
</service>
 
</services>
 
</system.serviceModel>
 
<system.webServer>
 
<modules runAllManagedModulesForAllRequests="true"/>
 
</system.webServer>
 
</configuration>

After configuring, Service is ready for hosting. After hosting consume service in Windows 8 Metro application.

I hope this post is useful. Thanks for reading.

CF西西

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何在windows 8 metro app上连接wcf

原文：http://debugmode.net/2011/12/23/consuming-json-in-windows-8-metro-style-application-using-winjs/Consuming JSON in Windows 8 Metro style Application using WinJSPOSTED BY DHANANJAY KU
复制链接

扫一扫

专栏目录