0

我正在创建一个电子邮件客户端，我希望名称/地址查找的工作方式与它在 Gmail 中的工作方式相同。

Kendo 提供了一个 ComboBox，它允许用户编写自由格式的文本，或者从过滤列表中选择一个项目。

Kendo 还提供了一个 Multiselect，允许用户从列表中选择多个项目。

我需要的是两者的结合......

4

1 回答 1

0

最好的方法是使用多选框，如果在数据库中找不到搜索项，则将其添加到结果集中。您需要将单独的搜索字段“搜索”（或任何您想调用的名称）传递给操作。

在.shtml 中初始化多选

$('#recipient').kendoMultiSelect({
        placeholder: "Type name or email address...",
        dataTextField: "Name",
        dataValueField: "Email",
        template: "#: Name # <#: Email #>",
        autoBind: false,
        filter: "contains",
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    url: "/Email/Contacts",
                    dataType: "json",
                    data: function () {
                        return { // THIS IS YOUR SEARCH FIELD
                            search: $('#recipient').data("kendoMultiSelect").input.val()
                        }
                    }
                }
            },
            schema: {
                type: "json",
                data: "Data",
                model: {
                    fields: {
                        Name: { field: "Name", type: "string" },
                        Email: { field: "Email", type: "string" }
                    }
                }
            }
        }
    });

您的控制器将具有以下代码：

    public ActionResult Contacts(string search, [DataSourceRequest]DataSourceRequest request)
    {            
        if(search == null || search.Length == 0) // Only query once user types stuff in to avoid unnecessary db load
        {
            return Json((new List<EmailNamePair>()).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }

        var PeopleList = from moc in db.MeansOfContacts
                         orderby moc.Firstname, moc.LastName, moc.Email
                         select new EmailNamePair()
                         {
                             Email = moc.Email,
                             Name = moc.Firstname + " " + moc.LastName
                         };

        // Check that the searched value exists
        var ds = PeopleList.ToDataSourceResult(request);
        if (ds.Total != 0)
        {
            return Json(ds, JsonRequestBehavior.AllowGet);
        }

        // Custom value that doesn't exist
        var result = PeopleList.ToList();
        result.Add(new EmailNamePair() {
            Email = search,
            Name = search
        });
        return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

新添加的项目将保留在多选框中，并且将被视为与其余项目完全相同（即通过单击小十字等删除）。

您还可以在将电子邮件地址添加到数据源之前添加额外的验证以查看电子邮件地址是否有效。但你明白了要点。

希望这可以帮助！

于 2016-01-26T14:41:53.210 回答