文章/答案/技术大牛

发布

社区首页 >问答首页 >KendoUiMobile+cross域问题

问KendoUiMobile+cross域问题
EN

Stack Overflow用户

提问于 2013-03-25 06:18:30

回答 1查看 195关注 0票数 0

我将ListView中的KendoUIMobile绑定到远程wcf服务中。我知道，为了进行跨域访问，我们需要使用jsonp。但是我尝试了下面的代码，但它不起作用。请让我知道我哪里错了。

index.html (我在Visual中尝试过)：-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.mobile.min.js" type="text/javascript"></script>
</head>
<body>
<!--This is the Flat ListView-->
<div data-role="view" id="flat" data-init="mobileProductDataBind" data-title="ListView" data-layout="databinding">
    <ul id="flat-listview"></ul>
</div>
<!--This is the application layout-->
<div data-role="layout" data-id="databinding">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>

    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#flat" data-icon="stop">Flat</a>
            <a href="#grouped" data-icon="organize">Grouped</a>
        </div>
    </div>
</div>

<!--This is the template for the Flat ListView-->
<script type="text/x-kendo-template" id="listviewHeadersTemplate">
    <h3 class="item-title">#= Name #</h3>
    <p class="item-info">#= Technology #</p>
</script>

<script>
     var base_url = "http://mysite:84/Service1.svc/GetBloggers";
    // Create a reusable shared Transport object
    var productTransport = new kendo.data.RemoteTransport({
        read: {
            url: base_url,
            dataType: 'jsonp',  // jsonp is necessary here for cross domain calls, not just json
            type: 'GET'
        }
    });

    // Create a reusable shared DataSource object
    var datasource = new kendo.data.DataSource({
        transport: productTransport
    });

    // This function is data-bound to the flat listview
    function mobileProductDataBind() {

        $("#flat-listview").kendoMobileListView({
            dataSource: datasource,
            template: kendo.template($("#listviewHeadersTemplate").html())
        });
    }
</script>

    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>

我的WCF服务：- Service1.svc.cs:-

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

namespace WcfService1
{
     public class Service1 : IService1
    {
        public List<Bloggers> GetBloggers()
        {
            List<Bloggers> lstBloggers = new List<Bloggers>()
            {
                new Bloggers { BloggerID = "12" , Name = "Pinal Dave " , Technology = "SQL Server"},
                new Bloggers { BloggerID = "12" , Name = "Julie Lerman" , Technology = "Entity Framework"}
            };
            return lstBloggers;
        }
    }
}

IService1.cs:-

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

namespace WcfService1
{
  public class Bloggers
    {
        [DataMember]
        public string BloggerID { get; set; }
        [DataMember]
        public string Name { get; set; }
        [DataMember]
        public string Technology { get; set; }
   }

  [ServiceContract]
    public interface IService1
    {

         [OperationContract]
        [WebGet(UriTemplate = "/GetBloggers", ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json)]
         List<Bloggers> GetBloggers();
    }
}

Service1.svc：-(查看MarkUp代码)

<%@ ServiceHost Language="C#" Debug="true" Service="WcfService1.Service1" CodeBehind="Service1.svc.cs" Factory=" System.ServiceModel.Activation.WebServiceHostFactory" %>

web.config:-

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
  </system.web>
  <system.serviceModel>
    <bindings>
      <webHttpBinding>
        <binding name="WebHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" />
      </webHttpBinding>
    </bindings>
    <behaviors>
      <endpointBehaviors>
        <behavior name="webHttpBehavior">
          <webHttp helpEnabled="true" />
        </behavior>
      </endpointBehaviors>
      <serviceBehaviors>
        <behavior>
          <!-- To avoid disclosing metadata information, set the value below to false and remove the metadata endpoint above before deployment -->
          <serviceMetadata httpGetEnabled="true" />
          <!-- To receive exception details in faults for debugging purposes, set the value below to true.  Set to false before deployment to avoid disclosing exception information -->
          <serviceDebug includeExceptionDetailInFaults="false" />
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
    <services>
      <service name="Service1">
        <endpoint address="" behaviorConfiguration="webHttpBehavior" binding="webHttpBinding" bindingConfiguration="WebHttpBindingWithJsonP" contract="IService1" />
      </service>
    </services>
  </system.serviceModel>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true" />
        <directoryBrowse enabled="true" />
  </system.webServer>
</configuration>

-这是我服务的结果：-

[{"BloggerID":"12","Name":"Pinal Dave ","Technology":"SQL Server"},{"BloggerID":"12","Name":"Julie Lerman","Technology":"Entity Framework"}]

谢谢。

cross-domain

kendo-mobile

回答 1

Stack Overflow用户

发布于 2013-04-12 08:30:56

这是因为WCF服务返回的是JSON而不是JSONP。这里有一个关于如何使用WCF返回JSONP的好博客。另外，JSONP是一种黑客方法。如果你已经控制了服务，试着让它成为CORS启用。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15608777

复制

相似问题

问KendoUiMobile+cross域问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问KendoUiMobile+cross域问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问KendoUiMobile+cross域问题
EN