Json 数据未在 Kendo UI Dropdown 中呈现

Question

尝试将Json 返回的数据渲染到kendo 下拉列表，但不渲染。请找到代码 sn-pt。我能够看到警报框。我试过JSON.parse(siteNameData)，但没有运气。

AJAX 调用

$.ajax({
    url: '../Report/GetSitesofSelectedClient',
    type: "GET",
    cache: false,
    datatype: "json",
    data: { "selectedClientCode": selectedClientCode },
    contentType: "application/json",
    async: false,
    success: function(siteNameData) {
        alert('hello');

        $("#siteNamesDropDown").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            template: $("#CheckboxTemplate2").html(),
            datasource: siteNameData,
            placeholder: "Select...",
            select: function(e) {
                e.preventDefault();
            }
        }).data("kendoDropDownList");

        //PopulateSiteNamesDropDown(siteNamesReceived);
     },
     error: function(xhr, ajaxOptions, thrownError) {
         ShowDialogError(xhr, 'High Chart Status Report');
     }
});

控制器

    public JsonResult GetSitesofSelectedClient(string selectedClientCode)
    {
        ViewBag.ShowReport = true;

        var highChartModel = new HighChartViewModel();

        var siteData = highChartModel.GetListOfSites(selectedClientCode);

        return Json(new {siteData}, JsonRequestBehavior.AllowGet);

    }

型号

 public string GetListOfSites(string clientCode)
 {

         SiteNameList = _serviceSessionManager.GetSiteListForClient(clientCode);

        listOfSiteNames = new List<SiteStatusReportModel>();

        foreach (Site siteName in SiteNameList)
        {
            var siteNameInfo = new SiteStatusReportModel
            {
                text     = siteName.SiteName,
                value    = siteName.SiteCode,
                selected = false
            };

            listOfSiteNames.Add(siteNameInfo);
        }

        var siteNameJsonData = JsonHelper.ToJsonString(listOfSiteNames)
        return siteNameJsonData;
 }

Answer 1

您不会每次都重新初始化下拉菜单。只初始化一次。在您的控制器上构建一个列表并通过 json 返回它。要重置下拉列表，您需要像这样设置数据源

var combobox = $("#siteNamesDropDown").data('kendoDropDownList');
if(combobox != null){
    //set the datasource of the combo
    combobox.dataSource.data(siteNameData);
    //requery the drop down so it shows the new data
    combobox.dataSource.query();
    //reset the selected value
    combobox.value("");
}

Answer 2

您是否使用了 console.log(siteNameData)？它是否返回正确的json？可能的原因是 inisde 变量 siteNameData.d 也不确定为什么将 async 属性设置为 false？请将其设置为 true 或者删除它。

试试这个代码

$.ajax(
                        {
                            url: '../Report/GetSitesofSelectedClient',
                            type: "GET",
                            cache: false,
                            datatype: "json",
                            data: { "selectedClientCode": selectedClientCode },
                            contentType: "application/json",

                            success: function(siteNameData) {

                                alert('hello');

                                $("#siteNamesDropDown").kendoDropDownList({
                                    dataTextField: "text",
                                    dataValueField: "value",
                                    template: $("#CheckboxTemplate2").html(),
                                    datasource: JSON.parse(siteNameData.d),
                                    placeholder: "Select...",
                                    select: function(e) {
                                        e.preventDefault();
                                    }
                                }).data("kendoDropDownList");

                                //PopulateSiteNamesDropDown(siteNamesReceived);
                            },
                            error: function(xhr, ajaxOptions, thrownError) {

                                ShowDialogError(xhr, 'High Chart Status Report');
                            }
                        });

Answer 3

这是我的下拉列表代码。确保您的 DataText 和 DataValue 字段正确映射到您的目标属性。

 public JsonResult GetOpportunityListByAccount(Guid Id)
    {
        List<OpportunityViewModel> cpvm = new List<OpportunityViewModel>();            
        cpvm = GetOpportunityListByAccount(Id);            

        return Json(cpvm, JsonRequestBehavior.AllowGet);            
    }   

public List<OpportunityViewModel> GetOpportunityListByAccount(Guid Id)
    {
        List<OpportunityViewModel> oppVMList = new List<OpportunityViewModel>();
        var oppList = new OrderManager().GetOpportunitiesByAccount(Id); 

        foreach (var op in oppList)
        {
            OpportunityViewModel opvm = new OpportunityViewModel();
            opvm.OpportunityId = op.OpportunityId;
            opvm.OpportunityName = op.OpportunityName;

            oppVMList.Add(opvm);
        }

        return oppVMList;           
    }    


@(Html.Kendo().DropDownListFor(x => x.FromOpportunity)       
          .Name("OpportunityDDL")                 
          .DataTextField("OpportunityName")              
          .DataValueField("OpportunityId")                         
          .DataSource(source => {
              source.Read(read =>
               {
                   read.Action("GetOpportunityListByAccount", "CrmIntegration")
                        .Data("OnAdditionalData");
               })
                . ServerFiltering(true);
          })     
     //    .CascadeFrom("AdvertiserDDL")
          .HtmlAttributes( new { style = "margin-left:13px; width: 275px;" })
   )     

.Data 是您将用于将参数传递给控制器​​的内容。请注意，我的 GetOpportunityListByAccount 函数将 Id 作为参数。而我的“OnAdditionalData”也返回一个名为Id的参数。他们必须被称为相同的工作。

function OnAdditionalData() {        
    return {
        Id: $("#AdvertiserDDL").val()
   };
}      

如果调用不起作用，请小心，这可能是数据类型问题。当我的控制器需要一个 Guid 时，我遇到了问题，使用 .val() 这也是一个 guid，但它没有工作。我不得不改变我的控制器来期待一个字符串，并做类似Id: "" + $("#AdvertiserDDL").val()