如何一次性批量设置所有Kendo MVC UI文本框与数值文本框的最大字符数？

以下几种方法可以帮你避免逐个控件手动配置maxlength，提升开发效率：

1. 利用模型数据注解自动绑定（推荐） #

如果控件基于模型生成，直接在模型属性上添加数据注解，Kendo的TextBoxFor会自动识别并生成maxlength属性，无需在视图中重复配置。

示例： #

模型层代码：

using System.ComponentModel.DataAnnotations;

public class YourModel
{
    // 限制字符串最大长度为5
    [StringLength(5)]
    public string CompanyTypeName { get; set; }

    // 数值类型可结合前端JS限制长度（见方法3）
    public int CompanyNumber { get; set; }
}

视图层代码：

@* 无需手动添加maxlength，自动从模型注解读取 *@
@Html.Kendo().TextBoxFor(model => model.CompanyTypeName).HtmlAttributes(new { style = "width:50px" })

2. 扩展HtmlHelper封装通用控件 #

自己编写HtmlHelper扩展方法，把maxlength和通用样式封装进去，后续直接调用扩展方法即可。

示例： #

扩展方法代码（放在项目Helpers文件夹）：

using System.Web.Mvc;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;

public static class KendoHtmlHelperExtensions
{
    // 带默认maxlength的TextBox扩展
    public static TextBoxBuilder TextBoxForWithMaxLength<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, int maxLength = 5)
    {
        return helper.Kendo().TextBoxFor(expression)
                     .HtmlAttributes(new { style = "width:50px", maxlength = maxLength.ToString() });
    }

    // NumericTextBox扩展，带data属性配合前端限制
    public static NumericTextBoxBuilder<TProperty> NumericTextBoxForWithMaxLength<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, int maxLength = 5)
    {
        return helper.Kendo().NumericTextBoxFor(expression)
                     .HtmlAttributes(new { style = "width:50px", data_maxlength = maxLength.ToString() });
    }
}

视图层调用：

@* 使用默认maxlength=5的扩展方法 *@
@Html.TextBoxForWithMaxLength(model => model.CompanyTypeName)

@* 指定自定义maxlength *@
@Html.TextBoxForWithMaxLength(model => model.AnotherField, 10)

@* 数值文本框调用 *@
@Html.NumericTextBoxForWithMaxLength(model => model.CompanyNumber, 3)

3. 全局JavaScript统一处理 #

如果不想修改后端代码，可以用JS批量给所有Kendo控件设置输入长度限制，适合已有大量控件的场景。

示例： #

$(function() {
    // 给所有Kendo TextBox设置maxlength
    $('.k-textbox').attr('maxlength', 5);

    // 给NumericTextBox的内部输入框做长度限制（NumericTextBox结构嵌套，需找子元素）
    $('.k-numerictextbox .k-input').on('input', function() {
        var maxLength = $(this).closest('.k-numerictextbox').data('maxlength') || 5;
        if ($(this).val().length > maxLength) {
            $(this).val($(this).val().substring(0, maxLength));
        }
    });
});

说明：如果需要不同控件设置不同长度，可在控件HtmlAttributes中添加data-maxlength="N"，JS会自动读取该值应用对应限制。

4. 配置Kendo全局默认值 #

在Kendo全局配置中设置默认HtmlAttributes，让所有同类型控件自动继承配置。

示例： #

App_Start/KendoConfig.cs代码：

using Kendo.Mvc.UI;

public static class KendoConfig
{
    public static void Register()
    {
        var config = new Kendo.Mvc.UI.Fluent.KendoConfiguration();
        
        // 给所有TextBox默认添加maxlength和样式
        config.TextBox().HtmlAttributes(new { style = "width:50px", maxlength = "5" });
        
        // 给NumericTextBox添加data属性，配合JS处理长度
        config.NumericTextBox().HtmlAttributes(new { style = "width:50px", data_maxlength = "5" });

        Kendo.Mvc.UI.Kendo.Configure(config);
    }
}

在Global.asax中注册配置：

protected void Application_Start()
{
    // 其他初始化代码...
    KendoConfig.Register();
}

视图层直接使用默认配置的控件：

@* 自动带上maxlength和样式 *@
@Html.Kendo().TextBoxFor(model => model.CompanyTypeName)
@Html.Kendo().NumericTextBoxFor(model => model.CompanyNumber)

内容的提问来源于stack exchange，提问作者Manoj T V