kendo mobile - KendoUiMobile+cross domain issue -
i binding listview in kendouimobile remote wcf service. know in order work cross domain access need use jsonp. tried following code , not working. please let me know wrong.
index.html (i tried in 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 flat listview--> <div data-role="view" id="flat" data-init="mobileproductdatabind" data-title="listview" data-layout="databinding"> <ul id="flat-listview"></ul> </div> <!--this 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 template 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 reusable shared transport object var producttransport = new kendo.data.remotetransport({ read: { url: base_url, datatype: 'jsonp', // jsonp necessary here cross domain calls, not json type: 'get' } }); // create reusable shared datasource object var datasource = new kendo.data.datasource({ transport: producttransport }); // function data-bound 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> my wcf service:- 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:-(view markup code)
<%@ 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> <!-- avoid disclosing metadata information, set value below false , remove metadata endpoint above before deployment --> <servicemetadata httpgetenabled="true" /> <!-- receive exception details in faults debugging purposes, set value below true. set false before deployment 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> this result of service:-
[{"bloggerid":"12","name":"pinal dave ","technology":"sql server"},{"bloggerid":"12","name":"julie lerman","technology":"entity framework"}] thanks.
this happening because wcf service returning json instead of jsonp. here blog on how return jsonp using wcf. jsonp hack method. if have conrol on service, try make cors enabled.
Comments
Post a Comment