Question

我有一个Kendo Autocomplete下拉列表，其中包含搜索过滤器。

当我从下拉列表中选择特定项目时，该值将被选中并成功保存到DB，但是当我在AutoComplete中按退格键时，页面会自动回发，而无需用户从下拉列表中选择任何搜索到的值。

按下退格键后的值不是所需的值或选定的值，将传递给控制器，然后传递给DB。

实施如下： -

@(Html.Kendo().AutoComplete()

        .Name("SampleCode")
        .DataTextField("Code")


    .Suggest(true)
    .Filter(FilterType.Contains)
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetCode", "GetFunct") // call to controller function
                        .Data("FilterCode");
                })
                .ServerFiltering(true);
            })

             .HtmlAttributes(new { @class = "selectlist", style = "width:204px" })
             .Events(evt => evt.Close("OnSelectCode"))

)

这是Javascript代码

<script>
    function FilterCode() {

        var SubCode = $("#SubCode")[0].form.SubCode.value;
        //The values in SampleCode dropdown are displayed depending upon the value selected in SubCode dropdown
        return {
            subCode: subCode
        }
    }

    function OnSelectCode(e) {

        var Code = $("#SampleCode").data("kendoAutoComplete").value().toString();
}

</script>

控制器功能正常工作，数据在AutoComplete中正确加载，这就是我没有发布相应代码的原因。

欢迎任何想法：）

Answer 1

当用户按下Kendo Auto完成内的空格时，为了防止回发到控制器，您必须确保将变量与 close（）功能绑定

解决方案后的代码： -

@(Html.Kendo().AutoComplete()

    .Name("SampleCode")
    .DataTextField("Code")


.Suggest(true)
.Filter(FilterType.Contains)
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetCode", "GetFunct") // call to controller function
                    .Data("FilterCode");
            })
            .ServerFiltering(true);
        })

         .HtmlAttributes(new { @class = "selectlist", style = "width:204px" })
         .Events(evt => evt.select("OnSelectCode"))  //Changed from "evt.Close" to "evt.Select" to prevent post back when user presses backspace


)

您将.select事件与Kendo Autocomplete控件一起使用，但在Javascript函数“OnSelectCode”中，您使用“close”属性

绑定变量

更改JavaScript函数 OnSelectCode ，如下所示： -

function OnSelectCode(e) {

        var Code = $("#SampleCode").data("kendoAutoComplete").value().toString();
        Code.bind("close", OnSelectCode); // Added to prevent post back when user presses backspace, close the function called by the .select event in Kendo Auto Complete

}

当用户在Kendo自动完成中按下退格键时，防止回发

1 个答案: