用于 KendoUI 自动完成的开箱即用 MVC ModelBinder答案

【问题标题】：Out-of-the-box MVC ModelBinder for KendoUI AutoComplete用于 KendoUI 自动完成的开箱即用 MVC ModelBinder
【发布时间】：2013-08-04 17:43:59
【问题描述】：

我无法找到一种方法来轻松读取 KendoUI 自动完成小部件发送的 ajax 发布值。

documentation 缺少有关此任务的任何详细信息。事实上，我能找到的服务器端代码示例如下：

namespace Kendo.Mvc.Examples.Controllers
{
    using System.Web.Mvc;

    public partial class AutoCompleteController : Controller
    {
        public ActionResult ServerFiltering()
        {
            return View();
        }
   }
}

我原以为传入的数据会自动绑定到 Kendo.Mvc.UI.DataSourceRequest，但这并没有发生......

如果您有效地处理了 KendoUI AutoComplete 小部件，请分享您的经验，TIA！

【问题讨论】：

标签： asp.net-mvc autocomplete kendo-ui

【解决方案1】：

@David Perlman，我正在完全编辑这个答案，因为我现在更好地理解了你的问题。在Server Filtering 的Kendo 示例中，他们使用的是具有开箱即用服务器过滤功能的OData，这是我自己不知道的。如果您像我一样使用 MVC 控制器，您将不得不修改示例并使用 parameterMap，就像我将在我的新代码示例中使用的那样。在我的示例中，我有一个简单的“站点”表，我使用Entity Framework，并且我有一个直接连接到站点表的视图。我有一个名为 Lookups.cs 的类，我返回一个动态模型 GetSitesStartsWith(string startsWith) 像这样：

  public dynamic GetSitesStartsWith(string startsWith)
    {
        return _context.vAaiomsSites
            .Select(s => new
            {
                ID = s.ID,
                SiteName = s.SiteName
            }).OrderBy(s => s.SiteName).Where(s => s.SiteName.StartsWith(startsWith));
    }

所以在我的申请控制器中，我创建了一个 JsonResult，如下所示：

  public JsonResult GetSitesStartsWith(string startsWith)
    {

        var lookups = new Lookups();
        var data = lookups.GetSitesStartsWith(startsWith);
        return Json(data, JsonRequestBehavior.AllowGet);
    }

最后要做的是将自动完成代码添加到连接到此 JsonResult 而不是 OData 的视图中，如下所示：

<div id="example" class="k-content">
        <div class="demo-section">
            <h2>Sites</h2>
            <input id="sites" style="width: 250px" />
        </div>
        <script>
            $(document).ready(function() {
                $("#sites").kendoAutoComplete({
                    placeholder: "Enter site ...",
                    dataTextField: "SiteName",
                    filter: "startswith",
                    minLength: 3,
                    dataSource: {
                        type: "json",
                        serverFiltering: true,
                        serverPaging: true,
                        pageSize: 20,
                        transport: {
                            read:
                                {
                                    url: "Requisitions/GetSitesStartsWith"
                                }, //read
                            parameterMap: function() {// send value of autocomplete as the "startsWith" parameter
                                        return { 
                                               startsWith:$("#sites").data("kendoAutoComplete").value()
                                        };
                            }
                        } //transport
                    } //datasource
                }); //kendoAutoComplete
            }); //DocumentReady
        </script>
</div>

我有这个示例工作，它在服务器上进行过滤，并通过开发人员工具进行了验证。如果您需要更多帮助，请告诉我。

【讨论】：

感谢 Alan，客户端的 AutoComplete 小部件工作得很好......你能告诉我你用来接听 ajax 调用的 MVC 方法吗
@David Perlman，我不确定我是否理解你的问题。 MVC 在这里做的唯一一件事就是交付视图，在代码的传输部分中加载页面后，您将使用 ajax 调用填充自动完成功能。因此，例如在我的示例中，一旦页面加载并键入“A”，kendo Autocomplete 小部件将对 url 进行 ajax 调用，在这种情况下，它是他们允许访问的 kendo 服务器。您需要设置自己的数据源来处理 json 调用。我个人使用控制器来返回我的数据，但您可以使用 OData 或新的 Web API。告诉我
@David Perlman，我为控制器操作添加了一些代码，这可能是您正在寻找的。span>
艾伦，再次非常感谢......也许我的问题有点不清楚。我希望进行服务器端过滤，而不是从头开始加载整个列表。
好的！我不知道这个参数映射功能。我不知道它藏在哪里，但它确实增加了我一直在寻找的灵活性。

【解决方案2】：

有一篇优秀的文章描述了如何在 MVC here 中使用 Keno Autocomplete。

如果您决定实现所描述的代码，请务必非常仔细地遵循它。任何和每一个差异都可能会破坏剑道。

【讨论】：