如何在ASP.NET Core MVC中使用DisplayMetadata Provider实现输入掩码

嘿，刚好做过类似的需求！在ASP.NET Core MVC里通过模型自定义属性实现输入掩码，其实就是自定义Attribute+Tag Helper的组合玩法，咱们一步步来实现：

首先得写一个标记用的Attribute，用来在模型属性上指定掩码规则：

using System;

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
public class InputMaskAttribute : Attribute
{
    // 存储掩码规则
    public string Mask { get; }

    // 构造函数接收掩码参数
    public InputMaskAttribute(string mask)
    {
        Mask = mask;
    }
}

这个属性只能标记在模型的属性上，一次只允许加一个，核心就是存你要的掩码格式。

接下来是关键的Tag Helper，它会自动识别模型上的InputMaskAttribute，然后给对应的input元素加上前端需要的HTML属性（比如data-mask，大多数前端掩码插件都认这个）：

using Microsoft.AspNetCore.Mvc.TagHelpers;
using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Reflection;

// 目标是所有带asp-for的input元素
[HtmlTargetElement("input", Attributes = "asp-for")]
public class InputMaskTagHelper : InputTagHelper
{
    public InputMaskTagHelper(IHtmlGenerator generator) : base(generator)
    {
    }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        // 先执行默认的InputTagHelper逻辑，保证基础的HTML生成
        base.Process(context, output);

        // 获取当前模型属性的反射信息
        var propertyInfo = For.ModelExplorer.Metadata.ContainerType.GetProperty(For.Name);
        if (propertyInfo == null) return;

        // 检查这个属性有没有加InputMaskAttribute
        var maskAttribute = propertyInfo.GetCustomAttribute<InputMaskAttribute>();
        if (maskAttribute != null)
        {
            // 给input加上data-mask属性，值就是咱们定义的掩码规则
            output.Attributes.Add("data-mask", maskAttribute.Mask);
            // 顺便加个placeholder提示用户格式，体验更好
            output.Attributes.Add("placeholder", maskAttribute.Mask);
        }
    }
}

别忘了在_ViewImports.cshtml里注册这个Tag Helper，不然视图认不出来：

@addTagHelper *, 你的项目程序集名称

把“你的项目程序集名称”换成你实际的项目名，比如MyWebApp。

现在就可以在你的ViewModel里给需要掩码的属性加标记了：

public class UserFormViewModel
{
    public int Id { get; set; }

    // 电话号码掩码：(123) 456-7890
    [InputMask("(000) 000-0000")]
    public string PhoneNumber { get; set; }

    // 日期掩码：01/01/2024
    [InputMask("00/00/0000")]
    public string BirthDate { get; set; }

    // 员工ID掩码：ABC-1234
    [InputMask("AAA-0000")]
    public string EmployeeId { get; set; }
}

这里的掩码格式可以根据你的需求随便改，比如银行卡号、邮编之类的都能适配。

在视图里还是用常规的asp-for生成input，Tag Helper会自动给这些元素加上data-mask和placeholder属性，然后引入前端掩码插件（比如常用的jquery.mask.js）来激活功能：

@model UserFormViewModel

<form asp-action="SaveUser">
    <div class="form-group">
        <label asp-for="PhoneNumber"></label>
        <input asp-for="PhoneNumber" class="form-control" />
        <span asp-validation-for="PhoneNumber" class="text-danger"></span>
    </div>

    <div class="form-group">
        <label asp-for="BirthDate"></label>
        <input asp-for="BirthDate" class="form-control" />
        <span asp-validation-for="BirthDate" class="text-danger"></span>
    </div>

    <div class="form-group">
        <label asp-for="EmployeeId"></label>
        <input asp-for="EmployeeId" class="form-control" />
        <span asp-validation-for="EmployeeId" class="text-danger"></span>
    </div>

    <button type="submit" class="btn btn-primary">保存</button>
</form>

<!-- 引入jQuery和掩码插件 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

<script>
    // 页面加载完成后，给所有带data-mask的input应用掩码
    $(document).ready(function () {
        $('[data-mask]').each(function () {
            $(this).mask($(this).data('mask'));
        });
    });
</script>

• 如果你不用jquery.mask，换成其他掩码库比如IMask.js也可以，只需要把Tag Helper里的data-mask改成对应库要求的属性名（比如data-imask），然后调整前端初始化代码就行。
• 要是想自定义掩码的占位符（比如默认是下划线，改成空格），可以给InputMaskAttribute加个PlaceholderChar属性，然后在Tag Helper里把这个值也加到HTML属性里。

内容的提问来源于stack exchange，提问作者JPNN