Progress Telerik 教程（二）：Telerik UI 基础控件使用完全指南

Progress Telerik Ultimate Collection 2025 Q2下载地址 https://soft51.cc/software/175792580241152290

1. 基础控件概述

Telerik UI提供了丰富的基础控件，这些控件是构建现代Web应用程序的基础。本教程将重点介绍最常用的基础控件及其使用方法。

1.1 控件分类

输入控件：

Button（按钮）
TextBox（文本框）
NumericTextBox（数字输入框）
MaskedTextBox（格式化输入框）

选择控件：

DropDownList（下拉列表）
ComboBox（可编辑下拉框）
MultiSelect（多选下拉框）
DatePicker（日期选择器）
TimePicker（时间选择器）

显示控件：

Label（标签）
ProgressBar（进度条）
Notification（通知）

2. 按钮控件（Button）

2.1 基本用法

标准按钮：

@(Html.Kendo().Button()
    .Name("basicButton")
    .Content("基础按钮")
)

带图标按钮：

@(Html.Kendo().Button()
    .Name("iconButton")
    .Content("保存")
    .Icon("save")
)

不同样式按钮：

<!-- 主要按钮 -->
@(Html.Kendo().Button()
    .Name("primaryButton")
    .Content("主要按钮")
    .HtmlAttributes(new { @class = "k-button-primary" })
)

<!-- 次要按钮 -->
@(Html.Kendo().Button()
    .Name("secondaryButton")
    .Content("次要按钮")
    .HtmlAttributes(new { @class = "k-button-secondary" })
)

2.2 按钮属性设置

@(Html.Kendo().Button()
    .Name("configuredButton")
    .Content("配置按钮")
    .Icon("gear")
    .IconClass("custom-icon")
    .Enable(true)
    .HtmlAttributes(new { 
        @class = "custom-button",
        style = "width: 150px; height: 40px;",
        title = "这是一个配置按钮"
    })
)

2.3 按钮事件处理

@(Html.Kendo().Button()
    .Name("eventButton")
    .Content("点击我")
    .Events(events => events
        .Click("onButtonClick")
    )
)

<script>
function onButtonClick(e) {
    alert("按钮被点击了！");
    console.log("Button clicked:", e.sender);
}
</script>

3. 文本框控件（TextBox）

3.1 基本文本框

@(Html.Kendo().TextBox()
    .Name("basicTextBox")
    .Placeholder("请输入文本")
    .Value("")
    .HtmlAttributes(new { style = "width: 300px;" })
)

3.2 数字输入框

@(Html.Kendo().NumericTextBox()
    .Name("numericTextBox")
    .Min(0)
    .Max(100)
    .Step(1)
    .Value(50)
    .Format("n0")
    .Placeholder("输入数字")
)

货币格式：

@(Html.Kendo().NumericTextBox()
    .Name("currencyTextBox")
    .Format("c2")
    .Min(0)
    .Step(0.01)
    .Value(99.99)
)

3.3 格式化输入框

<!-- 电话号码输入 -->
@(Html.Kendo().MaskedTextBox()
    .Name("phoneTextBox")
    .Mask("(999) 000-0000")
    .Placeholder("(___) ___-____")
)

<!-- 日期格式输入 -->
@(Html.Kendo().MaskedTextBox()
    .Name("dateTextBox")
    .Mask("00/00/0000")
    .Placeholder("MM/DD/YYYY")
)

3.4 文本框事件

@(Html.Kendo().TextBox()
    .Name("eventTextBox")
    .Events(events => events
        .Change("onTextChange")
        .Focus("onTextFocus")
        .Blur("onTextBlur")
    )
)

<script>
function onTextChange(e) {
    console.log("文本已更改:", e.sender.value());
}

function onTextFocus(e) {
    console.log("文本框获得焦点");
}

function onTextBlur(e) {
    console.log("文本框失去焦点");
}
</script>

4. 下拉框控件

4.1 下拉列表（DropDownList）

静态数据绑定：

@(Html.Kendo().DropDownList()
    .Name("categoryDropDown")
    .DataTextField("Text")
    .DataValueField("Value")
    .BindTo(new[]
    {
        new { Text = "电子产品", Value = "electronics" },
        new { Text = "服装", Value = "clothing" },
        new { Text = "家居", Value = "home" },
        new { Text = "运动", Value = "sports" }
    })
    .OptionLabel("请选择分类")
    .Value("electronics")
)

动态数据绑定：

@(Html.Kendo().DropDownList()
    .Name("dynamicDropDown")
    .DataTextField("Name")
    .DataValueField("ID")
    .DataSource(source => source
        .Read(read => read.Action("GetCategories", "Home"))
    )
    .OptionLabel("加载中...")
)

对应的控制器方法：

public JsonResult GetCategories()
{
    var categories = new[]
    {
        new { ID = 1, Name = "分类1" },
        new { ID = 2, Name = "分类2" },
        new { ID = 3, Name = "分类3" }
    };
    return Json(categories);
}

4.2 可编辑下拉框（ComboBox）

@(Html.Kendo().ComboBox()
    .Name("comboBox")
    .DataTextField("Name")
    .DataValueField("Value")
    .BindTo(new[]
    {
        new { Name = "苹果", Value = "apple" },
        new { Name = "香蕉", Value = "banana" },
        new { Name = "橙子", Value = "orange" }
    })
    .Filter(FilterType.StartsWith)
    .Suggest(true)
    .Placeholder("输入或选择水果")
)

4.3 多选下拉框（MultiSelect）

@(Html.Kendo().MultiSelect()
    .Name("multiSelect")
    .DataTextField("Name")
    .DataValueField("ID")
    .BindTo(new[]
    {
        new { ID = 1, Name = "HTML" },
        new { ID = 2, Name = "CSS" },
        new { ID = 3, Name = "JavaScript" },
        new { ID = 4, Name = "C#" },
        new { ID = 5, Name = "ASP.NET" }
    })
    .Placeholder("选择技能")
    .Value(new[] { 1, 3 })
)

4.4 下拉框事件处理

@(Html.Kendo().DropDownList()
    .Name("eventDropDown")
    .DataTextField("Text")
    .DataValueField("Value")
    .BindTo(new[]
    {
        new { Text = "选项1", Value = "1" },
        new { Text = "选项2", Value = "2" }
    })
    .Events(events => events
        .Change("onDropDownChange")
        .Select("onDropDownSelect")
        .Open("onDropDownOpen")
        .Close("onDropDownClose")
    )
)

<script>
function onDropDownChange(e) {
    var value = e.sender.value();
    var text = e.sender.text();
    console.log("选择了:", text, "值:", value);
}

function onDropDownSelect(e) {
    var dataItem = e.dataItem;
    console.log("选择项:", dataItem);
}

function onDropDownOpen(e) {
    console.log("下拉框打开");
}

function onDropDownClose(e) {
    console.log("下拉框关闭");
}
</script>

5. 日期选择器控件

5.1 基本日期选择器

@(Html.Kendo().DatePicker()
    .Name("datePicker")
    .Value(DateTime.Today)
    .Format("yyyy-MM-dd")
    .Min(DateTime.Today.AddDays(-30))
    .Max(DateTime.Today.AddDays(30))
)

5.2 时间选择器

@(Html.Kendo().TimePicker()
    .Name("timePicker")
    .Value(DateTime.Now.TimeOfDay)
    .Format("HH:mm")
    .Interval(15)
)

5.3 日期时间选择器

@(Html.Kendo().DateTimePicker()
    .Name("dateTimePicker")
    .Value(DateTime.Now)
    .Format("yyyy-MM-dd HH:mm")
    .TimeFormat("HH:mm")
)

5.4 月份选择器

@(Html.Kendo().DatePicker()
    .Name("monthPicker")
    .Start(CalendarView.Year)
    .Depth(CalendarView.Year)
    .Format("yyyy-MM")
)

5.5 日期选择器事件

@(Html.Kendo().DatePicker()
    .Name("eventDatePicker")
    .Events(events => events
        .Change("onDateChange")
        .Open("onDateOpen")
        .Close("onDateClose")
    )
)

<script>
function onDateChange(e) {
    var date = e.sender.value();
    if (date) {
        console.log("选择的日期:", kendo.toString(date, "yyyy-MM-dd"));
    }
}

function onDateOpen(e) {
    console.log("日期选择器打开");
}

function onDateClose(e) {
    console.log("日期选择器关闭");
}
</script>

6. 其他常用控件

6.1 进度条（ProgressBar）

<!-- 百分比进度条 -->
@(Html.Kendo().ProgressBar()
    .Name("progressBar")
    .Type(ProgressBarType.Percent)
    .Value(75)
    .Animation(animation => animation.Duration(1000))
)

<!-- 值进度条 -->
@(Html.Kendo().ProgressBar()
    .Name("valueProgressBar")
    .Type(ProgressBarType.Value)
    .Min(0)
    .Max(100)
    .Value(30)
)

6.2 滑块（Slider）

@(Html.Kendo().Slider()
    .Name("slider")
    .Min(0)
    .Max(100)
    .SmallStep(1)
    .LargeStep(10)
    .Value(50)
    .Orientation(SliderOrientation.Horizontal)
)

6.3 开关（Switch）

@(Html.Kendo().Switch()
    .Name("switch")
    .Checked(false)
    .Messages(messages => messages
        .Checked("开启")
        .Unchecked("关闭")
    )
)

7. 综合实例：用户注册表单

让我们创建一个完整的用户注册表单，展示各种基础控件的综合使用。

7.1 模型定义

public class UserRegistrationModel
{
    public string Username { get; set; }
    public string Email { get; set; }
    public string Password { get; set; }
    public DateTime? BirthDate { get; set; }
    public string Gender { get; set; }
    public string Country { get; set; }
    public List<string> Interests { get; set; }
    public bool AcceptTerms { get; set; }
}

7.2 控制器

public class UserController : Controller
{
    public IActionResult Register()
    {
        return View(new UserRegistrationModel());
    }

    [HttpPost]
    public IActionResult Register(UserRegistrationModel model)
    {
        if (ModelState.IsValid)
        {
            // 处理注册逻辑
            ViewBag.Message = "注册成功！";
        }
        return View(model);
    }

    public JsonResult GetCountries()
    {
        var countries = new[]
        {
            new { ID = "CN", Name = "中国" },
            new { ID = "US", Name = "美国" },
            new { ID = "JP", Name = "日本" },
            new { ID = "UK", Name = "英国" }
        };
        return Json(countries);
    }
}

7.3 注册表单视图

@model UserRegistrationModel

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h2>用户注册</h2>
            
            @using (Html.BeginForm("Register", "User", FormMethod.Post))
            {
                <div class="form-group mb-3">
                    <label>用户名：</label>
                    @(Html.Kendo().TextBoxFor(m => m.Username)
                        .Placeholder("请输入用户名")
                        .HtmlAttributes(new { @class = "form-control" })
                    )
                </div>

                <div class="form-group mb-3">
                    <label>邮箱：</label>
                    @(Html.Kendo().TextBoxFor(m => m.Email)
                        .Placeholder("请输入邮箱地址")
                        .HtmlAttributes(new { @class = "form-control" })
                    )
                </div>

                <div class="form-group mb-3">
                    <label>密码：</label>
                    @(Html.Kendo().TextBox()
                        .Name("Password")
                        .Placeholder("请输入密码")
                        .HtmlAttributes(new { 
                            type = "password",
                            @class = "form-control" 
                        })
                    )
                </div>

                <div class="form-group mb-3">
                    <label>出生日期：</label>
                    @(Html.Kendo().DatePickerFor(m => m.BirthDate)
                        .Format("yyyy-MM-dd")
                        .Max(DateTime.Today.AddYears(-18))
                        .HtmlAttributes(new { @class = "form-control" })
                    )
                </div>

                <div class="form-group mb-3">
                    <label>性别：</label>
                    @(Html.Kendo().DropDownListFor(m => m.Gender)
                        .BindTo(new[]
                        {
                            new { Text = "男", Value = "Male" },
                            new { Text = "女", Value = "Female" },
                            new { Text = "其他", Value = "Other" }
                        })
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .OptionLabel("请选择性别")
                        .HtmlAttributes(new { @class = "form-control" })
                    )
                </div>

                <div class="form-group mb-3">
                    <label>国家：</label>
                    @(Html.Kendo().DropDownListFor(m => m.Country)
                        .DataTextField("Name")
                        .DataValueField("ID")
                        .DataSource(source => source
                            .Read(read => read.Action("GetCountries", "User"))
                        )
                        .OptionLabel("请选择国家")
                        .HtmlAttributes(new { @class = "form-control" })
                    )
                </div>

                <div class="form-group mb-3">
                    <label>兴趣爱好：</label>
                    @(Html.Kendo().MultiSelect()
                        .Name("Interests")
                        .BindTo(new[]
                        {
                            new { Text = "编程", Value = "Programming" },
                            new { Text = "设计", Value = "Design" },
                            new { Text = "运动", Value = "Sports" },
                            new { Text = "音乐", Value = "Music" },
                            new { Text = "旅行", Value = "Travel" },
                            new { Text = "读书", Value = "Reading" }
                        })
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .Placeholder("选择您的兴趣爱好")
                        .HtmlAttributes(new { @class = "form-control" })
                    )
                </div>

                <div class="form-group mb-3">
                    <label>
                        @(Html.Kendo().Switch()
                            .Name("AcceptTerms")
                            .Messages(m => m.Checked("已同意").Unchecked("未同意"))
                        )
                        <span class="ms-2">同意用户协议和隐私政策</span>
                    </label>
                </div>

                <div class="form-group">
                    @(Html.Kendo().Button()
                        .Name("submitButton")
                        .Content("注册")
                        .HtmlAttributes(new { 
                            type = "submit",
                            @class = "btn btn-primary me-2"
                        })
                    )
                    
                    @(Html.Kendo().Button()
                        .Name("resetButton")
                        .Content("重置")
                        .HtmlAttributes(new { 
                            type = "reset",
                            @class = "btn btn-secondary"
                        })
                    )
                </div>
            }

            @if (ViewBag.Message != null)
            {
                <div class="alert alert-success mt-3">
                    @ViewBag.Message
                </div>
            }
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // 表单验证逻辑
    $("#submitButton").click(function(e) {
        var username = $("#Username").val();
        var email = $("#Email").val();
        var acceptTerms = $("#AcceptTerms").data("kendoSwitch").check();
        
        if (!username || !email) {
            alert("请填写用户名和邮箱");
            e.preventDefault();
            return false;
        }
        
        if (!acceptTerms) {
            alert("请同意用户协议");
            e.preventDefault();
            return false;
        }
    });
});
</script>

总结

本教程介绍了Telerik UI的基础控件使用：

按钮控件：支持多种样式和图标，可绑定点击事件
文本框控件：包括普通文本框、数字输入框和格式化输入框
下拉框控件：支持静态和动态数据绑定，包括单选和多选
日期选择器：提供日期、时间、日期时间等多种选择方式
其他控件：进度条、滑块、开关等增强用户交互

通过综合实例展示了如何将这些控件组合使用，构建完整的用户界面。掌握这些基础控件是使用Telerik UI的重要基础。

Progress Telerik Ultimate Collection 2025 Q2下载地址 https://soft51.cc/software/175792580241152290