用于KendoUI AutoComplete的开箱即用的MVC ModelBinder

时间:2013-08-04 17:43:59

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

我无法找到一种方法来轻松阅读KendoUI AutoComplete小部件发送的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!

2 个答案:

答案 0 :(得分:5)

@David Perlman,我完全正在编辑这个答案,因为我现在更好地理解你的问题。在Kendo上的Server Filtering示例中,他们正在使用OData,它具有开箱即用的服务器过滤功能,这是我自己并不了解的。如果您像我一样使用MVC控制器,则必须修改示例并使用我将在我的新代码示例中使用的parameterMap。在我的示例中,我有一个简单的“站点”表,我使用Entity Framework,我有一个直接连接到Sites表的视图。我有一个名为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);
    }

最后要做的是将AutoComplete代码添加到连接到此JsonResult的View而不是像这样的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> 

我有这个示例工作,它在服务器上进行过滤,使用开发人员工具进行验证。如果您需要更多帮助,请与我们联系。

答案 1 :(得分:0)

有一篇优秀的帖子描述了如何在MVC here中使用基诺自动完成功能。

如果您决定实施所描述的代码,请务必仔细遵循。 任何和所有的差异都可能会破坏剑道。