KendoUiMobile +跨域問題

我綁定了KendoUIMobile的ListView與遠程wcf服務。我知道爲了使用跨域訪問我們需要使用jsonp。但我嘗試了下面的代碼，它不工作。請讓我知道我錯了。KendoUiMobile +跨域問題

的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 :-(查看標記代碼）

<%@ 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"}]

謝謝。

來源

2013-03-25 Dev

發生這種情況是因爲您的WCF服務正在返回JSON而不是JSONP。這是一個很好的博客how to return JSONP using WCF。另外JSONP是一種黑客方法。如果您已經控制了服務，請嘗試使其成爲CORS enabled。

來源

2013-04-12 08:30:56 Whizkid747

我可以解決這個問題。謝謝。 – Dev 2013-08-28 08:53:41

KendoUiMobile +跨域問題

回答

相關問題