I just started working on Kendo UI, I created a Kendo UI for MVC Web Application project and created a View that would display in a Grid a list of User, the data for the users is retrieved from an Azure Web Service I created.
The problem I have is that there’s a Syntax Error saying there’s an invalid label. This is the json Firebug is catching
{
"Meta": {
"Method": "GetUsuarios",
"Status": "ok"
},
"Response": [
{
"ApellidoM": "TestInfo1",
"ApellidoP": "TestInfo1",
"CreatedDateTime": "/Date(1357763187027-0600)/",
"Nombre": "TestInfo1",
"Password": "TestInfo1",
"UpdatedDateTime": "/Date(1357763187027-0600)/",
"UserName": "TestInfo1",
"UsuarioId": 1
},
{
"ApellidoM": "TestInfo2",
"ApellidoP": "TestInfo2",
"CreatedDateTime": "/Date(1357863418857-0600)/",
"Nombre": "TestInfo2",
"Password": "TestInfo2",
"UpdatedDateTime": "/Date(1357863418857-0600)/",
"UserName": "TestInfo2",
"UsuarioId": 2
}
]
}
I tested it on JSONLint.com and it’s a valid json string, this is my javascript function where I create DataSource and fill the Grid:
$(function () {
var ds = new kendo.data.DataSource({
transport: {
read: {
url: "http://127.0.0.1:81/SismosService.svc/usuario/index",
dataType: "jsonp"
}
},
schema: {
data: "Response"
},
});
$("#usuariosGrid").kendoGrid({
columns: ["Nombre", "ApellidoP", "ApellidoM"],
dataSource: ds
});
});
And this is my View:
<!DOCTYPE html>
<html>
<head >
<link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")%>" rel="stylesheet" type="text/css" />
<link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.default.min.css")%>" rel="stylesheet" type="text/css" />
<title><%: ViewBag.GestionTitle %></title>
</head>
<body>
<h1><%: ViewBag.GestionTitle %></h1>
<div id="usuariosGrid"></div>
<button id="addUsuario" type="button" class="k-input"><%: ViewBag.Agregar %></button>
<script src="<%: Url.Content("~/Scripts/jquery-1.7.1.min.js")%>"></script>
<script src="<%: Url.Content("~/Scripts/kendo/2012.3.1114/kendo.web.min.js")%>"></script>
<script src="<%: Url.Content("~/Scripts/usuario/usuario.js")%>"></script>
</body>
</html>
As you can see, it’s pretty simple what I’m trying to do, so why is it failing? My Web Service sends the list of Users inside a ResponseObject I created, the class looks like this:
[DataContract]
public class ResponseObject<T>
{
public ResponseObject(T[] Response, MetaObject Meta)
{
this.Response = Response;
this.Meta = Meta;
}
[DataMember]
public T[] Response { get; set; }
[DataMember]
public MetaObject Meta { get; set; }
}
Meta is just another class I created just to add more info as my Web Service grows and new information needs to be sent to the client.
This is how the method for getting the users is defined in my interface:
[WebGet(UriTemplate = "/usuario/index",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
BodyStyle = WebMessageBodyStyle.Bare)]
ResponseObject<Usuarios> GetUsuarios();
What am I receiving this error? Is the way I’m sending my users wrong?
Ok I solved this, I added the following in my Web Service to enable Access-Control-Allow-Origin
That goes inside the system.webServer tag. Hope this helps anyone with similar problems.