剑道UI自动完成，如何绑定加载数据

Question

我正在使用kendo ui自动完成小部件与mvc。

我的指数。CSHTML文件如下，

<div class="filter-value">
    @(Html.Kendo().AutoComplete()
    .Name("InspectorId")
    .DataTextField("RPersonDetails") 
    )
</div>

与其将数据源放在这里，不如将其与javascript绑定。

我的javascript代码如下，

wireEvents: function () {
    $("#InspectorId").bind("keyup", function () { AISApp.Page.populateDropDown($(this).val()) });
},

populateDropDown: function (value) {
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: AISApp.Page.getSuburbsURL,
                data: {
                    text: value
                }
            }
        }
    });
  var dd = $('#InspectorId').data("kendoAutoComplete");
dd.setDataSource(dataSource);
},

这工作，但只是想知道这是正确的方式来做到这一点，或者有一种方法来做到这一点，而不使用keyup事件，只是使用剑道事件?

谢谢

Answer 1

在你的。cshtml中有一种方法可以使用Kendo helper绑定到一个数据源与你的URL。然后，您可以让它在按下键时自动从URL重新读取数据。基本上它把你的javascript keyup代码移动到helper的代码中。

代码看起来像这个例子:

<div class="filter-value">
    @(Html.Kendo().AutoComplete()
          .Name("InspectorId")
          .DataTextField("RPersonDetails")
          .Filter("contains")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetProducts", "Home")
                      .Data("onAdditionalData");
              })
              .ServerFiltering(true);
          })
    )
</div>
<script>
    function onAdditionalData() {
        return {
            text: $("#InspectorId").val() 
        };
    }
</script>