7

我在项目中为 MVC 使用剑道完成。

我有某些形式的国家列表，我显示国家名称，但存储国家代码。

我有以下问题：当用户输入不在列表中的内容时，该值将被发送到服务器。如何避免它们并发送空值（意味着：未选择值）？

这是我的代码：

@Html.Kendo()
    .ComboBoxFor(model => model.CountryCode)
    .BindTo(ViewBag.Countries as IEnumerable<SelectListItem>)
    .Filter(FilterType.StartsWith)
    .Placeholder("Country")
    .HtmlAttributes(new { @class = "span9" })
4

8 回答 8

15

同样的问题也包括在这里。像这样使用 ComboBox 的更改事件：

change : function (e) {
        if (this.value() && this.selectedIndex == -1) {   //or use this.dataItem to see if it has an object                 
            alert('Invalid Entry!');
            cb.select(1);
        }
    }

这是jsfiddle。

编辑： 如何在 Razor 语法中使用：

@(Html.Kendo().ComboBox()
    .Name("cb")
    .Events(it => it.Change("cbIsChanged"))
    ...
        )

<script>
    cbIsChanged = function (e) {
        ...
    }
</script>
于 2013-09-19T06:27:31.610 回答
1

使用 DropDownList 小部件而不是 ComboBox。DropDownList 的工作原理非常相似，但会阻止用户输入自己的文本。

于 2015-04-30T06:36:01.843 回答
1

Paladin，这是使用 ASP.NET MVC 包装器和组合框时的解决方案。以下是使您的解决方案正常工作的 razor 和 javascript。

<div class="form-group">
    @Html.LabelFor(model => model.GlAccount, new { @class = "control-label col-md-4" })
    <div class="col-md-6">
        @(Html.Kendo<OrderRequest>().ComboBoxFor(m => m.GlAccount).DataValueField("Number").DataTextField("Description").Filter(FilterType.Contains).HighlightFirst(true)
                    .DataSource(src => src.Read(read => read.Action("GetGlAccounts", "Lookup", new { area = "" }))).Events(events => events.Change("app.common.onChangeRestrictValues")))
        @Html.ValidationMessageFor(model => model.GlAccount)
</div>

如果输入的值不在定义的值列表中，以下脚本将清空组合框

<script>
function onChangeRestrictValues(e) {
  if (this.value() && this.selectedIndex == -1) {
    var dt = this.dataSource._data[0];
    this.text(dt[this.options.dataTextField]);
    this.select();
  }
}
</script>

您可以通过@我的博客http://prestoasp.net/how-to-limit-a-kendo-ui-combobox-drop-down-to-valid-items-using-asp-使用的参考资料查看更全面的答案 网络 mvc 包装器/

这篇文章还包含指向我用于原型 stackoverlfow 解决方案的 github .NET 解决方案的链接

干杯

于 2014-02-20T08:18:58.467 回答
1

Kendo 组合框 API 返回在组合框中输入的值 - 如果列表中没有该项。我们必须手动查找该项目是否存在于列表中。

链接 - 组合框 / API

var comboId = '#movies';
alert(GetComboBoxValue(comboId));

使用此函数获取 的值ComboBox。

function GetComboBoxValue(comboId){
    var comboValue = -1;
    $(comboId).data('kendoComboBox').select(function (dataItem) {
        // Note: you have to perhaps change the property - text as per the value
        // this is for the example provided in the link only
        if (dataItem.text == $(comboId').data('kendoComboBox').text()){
            comboValue = dataItem.value;
            break;
        }
    });
    //will return -1, if data is not found from the list
    return comboValue;
}
于 2013-09-18T11:55:22.850 回答
1

我从 Telerik 论坛获得了这个基本代码，并将其修改为更智能一些。这将使用当前文本尝试查找模糊搜索，如果没有找到，则将其空白。

在这里试试：http: //jsfiddle.net/gVWBf/27/

$(document).ready(function() {
    var items = [
        {value : '1',
         desc : 'fred'},
        {value : '2',
         desc : 'wilma'},
        {value : '3',
         desc : 'pebbles'},
        {value : '4',
         desc : 'dino'}
    ];

    var cb = $('#comboBox').kendoComboBox({
        dataSource : items,
        dataTextField : 'desc',
        dataValueField : 'value',
        filter : 'contains',
        change : function (e) {
            if (this.value() && this.selectedIndex == -1) {    
                this._filterSource({
                    value: this.value(),
                    field: this.options.dataTextField,
                    operator: "contains"
                });
                this.select(0);
                if ( this.selectedIndex == -1 ) {                    

                    this.text("");
                }
            }
        }
    }).data('kendoComboBox');


});
于 2014-01-25T16:05:12.723 回答
0

在剑道组合框搜索中输入垃圾值后设置值执行以下代码

$(document).ready(function() {
var items = [
    {value : '1',
     desc : 'fred'},
    {value : '2',
     desc : 'wilma'},
    {value : '3',
     desc : 'pebbles'},
    {value : '4',
     desc : 'dino'}
];

var cb = $('#comboBox').kendoComboBox({
    dataSource : items,
    dataTextField : 'desc',
    dataValueField : 'value',
    filter : 'contains',
    change : function (e) {
        if (this.value() && this.selectedIndex == -1) {    
            this._filterSource({
                value: "",
                field: this.options.dataTextField,
                operator: "contains"
            });
            this.select(1);
        }
    }
}).data('kendoComboBox');

$('#showValue').click(function () {
    alert(cb.value());
});

});

于 2016-04-07T16:13:36.043 回答
0

这就是我使用 MVVM 的方式：

HTML：

<div id="main_pane_add_truck" data-role="view" data-model="APP.models.main_pane_add_truck">
    <input id="main_pane_add_truck_customer_id" data-role="combobox" data-placeholder="Type a Customer" data-value-primitive="true" data-text-field="Name" data-value-field="CustomerID" 
    data-bind="value: customer_id, source: customer_id_ds, events: { change: customer_id_change }" />
</div>

Javascript模型：

window.APP = {
models: {
    main_pane_add_truck: kendo.observable({
        customer_id: null,
        customer_id_ds: new kendo.data.DataSource({
            type: "odata",
            transport: {
                read: ROOTURL + BODYURL + "MyCustomers"
            },
            schema: {
                model: {
                    fields: {
                        CustomerID: { type: "number" },
                        Name: { type: "string" },
                    }
                }
            }
        }),
        customer_id_change: function customer_id_change(e) {
            try {
                var found = false;
                var combobox = $("#main_pane_add_truck_customer_id").data("kendoComboBox");
                var customer_id = e.data.customer_id;
                var dataSource = this.get("customer_id_ds");
                var data = dataSource.data();
                var data_length = data.length;
                if (data_length) {
                    for (var i = 0; i < data_length; i++) {
                        if (data[i].CustomerID === customer_id) {
                            found = true;
                        }
                    }
                    if (!found) {
                        this.set("customer_id", data[0].CustomerID);
                        combobox.select(0);
                    }
                }
                else {
                    this.set("customer_id", null);
                }
            }
            catch (e) {
                console.log(arguments.callee.name + " >> ERROR >> " + e.toString());
            }
        },
    }),
}
};
于 2016-04-28T14:21:31.447 回答
0

为了检查输入到组合框中的某个值是否存在是使用以下两种javascript方法。

您可以按如下方式对其进行测试，假设您的组合框的 ID 是“ComboBoxId”

@(Html.Kendo().ComboBoxFor(m => m.ComboBoxId)
      .BindTo(Model.ComboBoxItems)
      .Filter(FilterType.Contains)
      .HighlightFirst(true)
)

if (getValueOfKendoCombo('#ComboBoxId') === null) {
   alert('Please select a valid value from the list');
   return;
}

function getValueOfKendoCombo(comboBoxId) {
  var comboBox = $(comboBoxId).data('kendoComboBox');
  var ds = comboBox.dataSource; // data source in order to get a list of data items
  var data = ds['_data']; // object containing data
  var value = comboBox.value(); // value to test
  var itemValue = getByValue(data, value); // loop through all data items and determine if value exists
  if (itemValue == null) { // check if the input value exists
    comboBox.value(null); // set the comboBox text value to null, because it does not exist on the list
    return null; //return value null - use null to check if the value exists
  }
  return itemValue;
}

function getByValue(data, value) {
  // loop through all data items and determine if value exists against the Value of the object, otherwise return null
  for (var i = 0; i < data.length; i++) {
    if (data[i]['Value'] === value) {
      return data[i]['Value'];
    }
  }
  return null;
}
于 2016-06-09T11:49:47.257 回答