Question

我在KendoUIMobile中使用远程wcf服务绑定了ListView。我知道为了工作跨域访问我们需要使用jsonp。但我尝试了以下代码，但它无法正常工作。请让我知道我错在哪里。

index.html（我在Visual Studio中尝试过这种方法）： -

<!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"}]

感谢。

Answer 1

这种情况正在发生，因为您的WCF服务正在返回JSON而不是JSONP。这是一篇关于how to return JSONP using WCF的好博客。 JSONP也是一种黑客方法。如果您已控制该服务，请尝试将其设为CORS enabled。

KendoUiMobile +跨域问题

1 个答案: