KendoUI（js）组合框和来自Web API的绑定数据不起作用

Question

我花了好几个小时试图解决这个问题，但没有运气！！！

所以我有一个 MVC 项目，它提供 Web API（注意：单独的项目，内部托管）返回 json。

示例：

网址：http://api.domain.co.uk/api/locations/sitesdropdown

控制器

// GET api/Locations/Sitesdropdown
        [System.Web.Mvc.HttpGet]
        [System.Web.Http.HttpGet]
        public JsonResult Sitesdropdowntest()
        {
            var sites = _context.v_dim_HMLocations.Select(l => new
                {
                    SiteName = l.site
                })
                .Distinct();

            return new JsonResult
            {
                Data = sites,
                JsonRequestBehavior = JsonRequestBehavior.AllowGet
                };
        }

数据返回 更新：1. 移除合成键，2. 更改返回后的方法：

{
"ContentEncoding": null,
"ContentType": null,
"Data": [
    {
        "SiteName": "Colworth"
    },
    {
        "SiteName": "Donaldsons"
    },
    {
        "SiteName": "Heathlands"
    },
    {
        "SiteName": "HHP Portugal"
    },
    {
        "SiteName": "Leythorne"
    },
    {
        "SiteName": "Propagation"
    },
    {
        "SiteName": "Sheeplands"
    },
    {
        "SiteName": "Tuesley"
    }
],
"JsonRequestBehavior": 0,
"MaxJsonLength": null,
"RecursionLimit": null
}

Javascript：

    jQuery("#site").kendoComboBox({
        autoBind: true,
        placeholder: "Select Site...",
        dataTextField: "SiteName",
        dataValueField: "SiteName",
        dataSource: {
            transport: {
                read: {
                    url: "http://api.domain.co.uk/api/locations/sitesdropdowntest",
                    type: "jsonp"
                }
            },
            schema: {
                data: "Data"
            },
            serverFiltering: true
        }
    });

相关 HTML

<div class="form-group">
    <label class="control-label col-md-2" for="SiteId">Site</label>
    <div class="col-md-10">
        <input id="site" />                        
    </div>
</div>

该按钮作为 Kendo UI 控件呈现得非常好 - 它似乎没有任何数据从数据源进入它。

I can see that the combobox is getting the correct data as VS generates one of these little files which has the correct json content

非常感谢您对此的任何帮助！

谢谢，

Answer 1

返回实体框架对象可能不是一个好的选择。 您可以尝试使用 ModelView 删除“$”。

更新

请参阅此示例：https://github.com/MiguelCosta/kendo-example

控制器：

    [HttpGet]
    public JsonResult Sitesdropdowntest()
    {
        //var sites = _context.v_dim_HMLocations.Select(l => new
        //{
        //    Id = l.Id,
        //    SiteName = l.site
        //}).ToList();

        // only for test
        var sites = new List<object>
        {
            new { Id = 1, SiteName = "Site1" },
            new { Id = 2, SiteName = "Site2" },
            new { Id = 3, SiteName = "Site3" },
            new { Id = 4, SiteName = "Site4" },
            new { Id = 5, SiteName = "Site5" }
        };

        return Json(sites, JsonRequestBehavior.AllowGet);
    }

https://github.com/MiguelCosta/kendo-example/blob/master/Mpc.KendoExample/Mpc.KendoExample/Controllers/LocationsController.cs

Javascript：

<script type="text/javascript">
$(document).ready(function () {
    $("#site").kendoComboBox({
        dataTextField: "SiteName",
        dataValueField: "Id",
        dataSource: {
            transport: {
                read: {
                    url: "/locations/Sitesdropdowntest",
                    dataType: "json"
                }
            }
        }
    });
});

https://github.com/MiguelCosta/kendo-example/blob/master/Mpc.KendoExample/Mpc.KendoExample/Views/Home/Index.cshtml

相关 HTML：

<div class="form-group">
<label class="control-label col-md-2" for="SiteId">Site</label>
<div class="col-md-10">
    <input id="site" />
</div>

https://github.com/MiguelCosta/kendo-example/blob/master/Mpc.KendoExample/Mpc.KendoExample/Views/Home/Index.cshtml

结果：

Answer 2

我现在已经设法解决了这个问题 -

事实证明，这与 javascript 配置或 JSON 数据格式无关。

这是 CORS - 因为我的 API 解决方案托管在不同的子域上，所以在尝试拨打电话时给了我一些错误。

我现在通过执行以下操作解决了这个问题：

web.config

这就是现在的工作。

<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Cache-Control" />
        <add name="Access-Control-Allow-Methods" value="*" />
      </customHeaders>
    </httpProtocol>

之前我也有这行：

    <add name="Access-Control-Allow-Origins" value="*" />

删除此内容后，我还将以下内容添加到我的 global.asax 中

global.asax*

  protected void Application_BeginRequest(object sender, EventArgs e)
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                HttpContext.Current.Response.End();
            }
        }

非常感谢您的帮助 - 非常感谢。