Knockout-Kendo dropdownlist Ajax observableArray 获取所选项目名称 [英] Knockout-Kendo dropdownlist Ajax observableArray get selected item name

问题描述

我的应用程序是 MVC 5，我使用以下 Knockout-kendo 下拉列表:

 <input data-bind="kendoDropDownList: { dataTextField: 'name', dataValueField: 'id', data: foodgroups, value: foodgroup }"/>var ViewModel = 函数 () {var self = this;this.foodgroups = ko.observableArray([{ id: "1", name: "apple" },{ id: "2", name: "orange" },{ id: "3", name: "banana" }]);var 食物组 ={名称:self.name，id:self.id};this.foodgroup = ko.observable();ko.bindingHandlers.kendoDropDownList.options.optionLabel = "-选择-";this.foodgroup.subscribe(函数(新值){newValue = ko.utils.arrayFirst(self.foodgroups(), function (choice) {返回choice.id === newValue;});$("#object").html(JSON.stringify(newValue));警报(新值.名称)；});};ko.applyBindings(new ViewModel());

效果很好，多亏了这个答案

当我提醒项目名称时出现此错误

 无法获取未定义或空引用的属性名称"

对数组项进行硬编码与使用 Ajax 有何区别.

解决方案

'id' 字段在硬编码数组中具有 string 数据类型.

'id' 字段在 ajax 数组中具有 number 数据类型.

.

因此，'id' 字段在两个数组中具有不同的数据类型.但是在条件下，您使用了 === 运算符，因此它会检查 value 和 datatype.

ajax 数组的值是一样的，但是数据类型不同，所以不返回结果.

如果有任何问题，请告诉我.

My application is MVC 5, I use the following Knockout-kendo dropdown list:

 <input data-bind="kendoDropDownList: { dataTextField: 'name', dataValueField: 'id', data: foodgroups, value: foodgroup }" />

   var ViewModel = function () {
        var self = this;
         this.foodgroups = ko.observableArray([
         { id: "1", name: "apple" },
         { id: "2", name: "orange" },
         { id: "3", name: "banana" }
         ]);
        var foodgroup =
        {
            name: self.name,
            id: self.id
        };

        this.foodgroup = ko.observable();
        ko.bindingHandlers.kendoDropDownList.options.optionLabel = " - Select -";
        this.foodgroup.subscribe(function (newValue) {
            newValue = ko.utils.arrayFirst(self.foodgroups(), function (choice) {
                return choice.id === newValue;
            });

            $("#object").html(JSON.stringify(newValue));
           alert(newValue.name);
        });
    };
    ko.applyBindings(new ViewModel());

It works great, thanks to this answer Knockout Kendo dropdownlist get text of selected item

However when I changed the observableArray to Ajax:

       this.foodgroups = ko.observableArray([]),
                $.ajax({
                    type: "GET",
                    url: '/Meals/GetFoodGroups',

                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        self.foodgroups(data);
                    },
                    error: function (err) {
                        alert(err.status + " : " + err.statusText);
                    }
                });

Controller - get the table from ms sql server:

 public JsonResult GetFoodGroups()
            {
                var data = db.FoodGroups.Select(c => new
                {
                    id = c.FoodGroupID,
                    name = c.FoodGroupName
                }).ToList();

                return Json(data, JsonRequestBehavior.AllowGet);
            }

I get this error when I alert the item name

 Unable to get property 'name' of undefined or null reference

What is the difference between hardcoding the array items from using Ajax.

解决方案

The 'id' field has string datatype in hard coded array.

The 'id' field has number datatype in ajax array.

.

So, the 'id' field has different datatypes in both arrays. However in-condition you have used === operator so it checks value as well as datatype.

For ajax array value is same but its datatype is different so its not returning result.

Let me know if any concern.

这篇关于Knockout-Kendo dropdownlist Ajax observableArray 获取所选项目名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！