SyntaxError：使用 Kendo UI 创建 DataSource 时出现无效标签错误答案

【问题标题】：SyntaxError: invalid label error when creating DataSource with Kendo UISyntaxError：使用 Kendo UI 创建 DataSource 时出现无效标签错误
【发布时间】：2013-01-11 19:47:23
【问题描述】：

我刚开始研究 Kendo UI，我为 MVC Web 应用程序项目创建了一个 Kendo UI，并创建了一个视图，该视图将在网格中显示用户列表，用户的数据是从我创建的 Azure Web 服务中检索的.

我遇到的问题是有一个语法错误，说标签无效。这是 Firebug 正在捕获的 json

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

我在 JSONLint.com 上对其进行了测试，它是一个有效的 json 字符串，这是我创建 DataSource 并填充网格的 javascript 函数：

$(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
    });
});

这是我的观点：

<!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>

如您所见，我正在尝试做的事情非常简单，那么为什么会失败？我的 Web 服务在我创建的 ResponseObject 中发送用户列表，该类如下所示：

[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 只是我创建的另一个类，只是为了在我的 Web 服务增长时添加更多信息，并且需要将新信息发送到客户端。

这是在我的界面中定义获取用户的方法的方式：

    [WebGet(UriTemplate = "/usuario/index",
    RequestFormat = WebMessageFormat.Json,
    ResponseFormat = WebMessageFormat.Json,
    BodyStyle = WebMessageBodyStyle.Bare)]
    ResponseObject<Usuarios> GetUsuarios();

我收到此错误是什么意思？我发送用户的方式有误吗？

【问题讨论】：

看来您使用的是 JSON 而不是 JSONP。如果您将transport.read 中的dataType: "jsonp" 更改为dataType: "json"，会发生什么情况？
您说期望 JSONP 但从服务器代码看来它是 JSON。是 JSONP 还是 JSON？
Firebug 控制台以红色显示 GET 127.0.0.1:81/SismosService.svc/usuario/index 200 OK 67 ms
这是服务器发送的 JSON，但我尝试使用 json 和 jsonp 但不知道出了什么问题
在 Google Chrome 控制台上我收到此错误XMLHttpRequest cannot load http://127.0.0.1:81/SismosService.svc/usuario/index. Origin http://localhost:65097 is not allowed by Access-Control-Allow-Origin.

标签： web-services gridview asp.net-mvc-4 kendo-ui

【解决方案1】：

好的，我解决了这个问题，我在我的 Web 服务中添加了以下内容以启用 Access-Control-Allow-Origin

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*"/>
  </customHeaders>
</httpProtocol>

位于 system.webServer 标记内。希望这可以帮助任何有类似问题的人。

【讨论】：