多选概述

面向ASP的Telerik UI。NET MVC忍者图像

MultiSelect是面向ASP的Telerik UI。NET MVC一个专业级的UI库,包含 110+ 组件,用于构建现代和功能丰富的 应用程序。要想尝试一下,注册一个30天的免费试用。

Telerik UI MultiSelect HtmlHelper for ASP。NET MVCis a server-side wrapper for the Kendo UI MultiSelect widget.

MultiSelect显示一个选项列表,并允许从该列表中进行多个选择。控件的更丰富版本<选择>元素,并提供对本地和远程数据绑定、项和标记模板以及用于控制列表行为的可配置选项的支持。

初始化MultiSelect

下面的示例演示如何定义MultiSelect。

@(Html.Kendo(). multiselect (). name ("multiselect") . datatextfield ("ProductName") . datavaluefield ("ProductID") . value (new[] {2,7}) . datasource (source => {读取(Read =>{读取。行动(“Products_Read”、“家”);}) .ServerFiltering(真正的);}))
public class MultiSelectController: Controller {public IActionResult Index() {return View();}公共JsonResult Products_Read(字符串文本){var result = GetProducts();if (!string.IsNullOrEmpty(text)){结果=结果。Where(p => p. productname . contains (text)).ToList();}返回Json(结果);}私有静态IEnumerable GetProducts() {var结果= Enumerable。范围(0,50)。Select(i => new ProductViewModel {ProductID = "" + i, ProductName = "Product " + i});返回结果;}}

基本配置

下面的示例演示了MultiSelect的基本配置。要获取对现有Telerik UI MultiSelect实例的引用,请使用jQuery.data ()配置选项。一旦建立了引用,就使用多选客户端API控制它的行为。

@(Html.Kendo(). multiselect (). name ("multiselect") . datatextfield ("ProductName") . datavaluefield ("ProductID") . placeholder ("Select product…"). itemtemplate ("#= ProductID # #= ProductName #") . value (new[] {2,7}) . height (520) . tagmode (MultiSelectTagMode.Single) . datasource (source => {source。读取(Read =>{读取。行动(“Products_Read”、“家”);}) .ServerFiltering(真正的);}) . events (events => events . change ("onChange") . select(" onSelect") . deselect ("onDeselect") . open ("onOpen") . close ("onClose") . databound ("onDataBound") . filtering ("onFiltering"))