Plugin - Kendo UI - DropDownList

使用方法

前台:

 

@(
    Html.Kendo().DropDownList()
    .Name("products")
    // 为空值时显示的字面量
    .OptionLabel("Select student...")
    // 立即自动绑定 默认为 true
    .AutoBind(false)
    // 默认字面量
    .Text("")
    // 默认值
    .Value("")
    // 显示列的字面量
    .DataTextField("Name")
    // 显示列的值
    .DataValueField("ID")
    // 某个 DownDownList 的上级
    // 也就是做联机下拉框时需要指定的上级DropDownList控件的Id
    .CascadeFrom("categories")
    // 是否开启筛选
    // 参数有 包含, 匹配 等逻辑
    .Filter(FilterType.Contains)
    // 在筛选框中输入字符之后
    // 多少秒之后开始执行筛选
    .Delay(5000)
    // 本地绑定
    // 绑定一个 SelectList 类型的值
    .BindTo(new SelectList(List, "Value", "Text"))
    // 远程绑定
    .DataSource(source =>
    {
        source.Read
        (
            read =>
            {
                // 从后台读取
                // 需要在后台开启 AllowGet 支持
                // 或者在这里指定交互类型为 Post
                read.Type(HttpVerbs.Post)
                read.Action("Editing_Read", "Student");
            }
        )
        // 由服务端进行数据筛选
        .ServerFiltering(false);
    })
) 

 

 

 

后台:

/// <summary>
///  参数不是必须的
/// </summary>
/// <param name="request"></param>
/// <returns></returns>
public ActionResult Editing_Read([DataSourceRequest] DataSourceRequest request)
{
    IList<Student> List = new List<Student>() { 
            new Student(){ ID = 1, Name = "1"},
            new Student(){ ID = 2, Name = "2"},
            new Student(){ ID = 3, Name = "3"},
            new Student(){ ID = 4, Name = "4"},
            new Student(){ ID = 5, Name = "5"},
    };

    return Json(List, JsonRequestBehavior.AllowGet);
}