模型字段为int类型时，如何让网页输入框显示为date类型？

看起来你遇到的问题是Page Model中的int类型属性无法通过[DataType(DataType.Date)]自动渲染为date输入框——这其实是因为Razor标签助手会根据属性的CLR类型来决定输入框类型，int类型默认不会触发date输入框的渲染，哪怕你加了DataType特性。

下面给你两种可行的解决思路，你可以根据自己的场景选择：

思路1：在Page Model中新增DateTime属性做中间转换（推荐） #

这种方式更符合Razor Pages的绑定逻辑，代码也更清晰易维护：

步骤1：修改Page Model #

定义一个DateTime类型的属性用来绑定网页的date输入框，同时保留原有的int类型字段用于数据库操作：

public class YourPageModel : PageModel
{
    // 绑定前端date输入框的属性，添加DataType和DisplayFormat特性确保渲染正确
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime FrDrDate { get; set; }

    // 对应SQL Server中int类型的FrDr字段（存储格式为YYYYMMDD）
    public int FrDr { get; set; }

    // 加载数据时（比如Get请求），把数据库的int日期转为DateTime
    public async Task<IActionResult> OnGetAsync(int id)
    {
        // 示例：从数据库获取FrDr的值（比如20240520）
        var frDrFromDb = 20240520;
        // 转换为DateTime类型
        FrDrDate = new DateTime(
            frDrFromDb / 10000, 
            (frDrFromDb / 100) % 100, 
            frDrFromDb % 100
        );

        return Page();
    }

    // 提交数据时，把DateTime转成YYYYMMDD格式的int
    public async Task<IActionResult> OnPostAsync()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

        // 将DateTime转换为int格式的日期
        FrDr = FrDrDate.Year * 10000 + FrDrDate.Month * 100 + FrDrDate.Day;

        // 执行数据库保存操作（示例）
        // _dbContext.YourEntity.Update(yourEntity);
        // await _dbContext.SaveChangesAsync();

        return RedirectToPage("./Index");
    }
}

步骤2：修改前端页面 #

使用asp-for绑定新增的FrDrDate属性，标签助手会自动生成type为date的输入框：

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

思路2：直接手动指定输入框类型并处理转换 #

如果不想新增属性，也可以直接针对int类型的FrDr属性手动设置输入框类型，同时处理格式转换：

前端页面修改 #

手动设置type="date"，并把int格式的日期转为yyyy-MM-dd格式的字符串作为默认值：

<div class="form-group">
    <label asp-for="FrDr" class="control-label">日期</label>
    <input type="date" asp-for="FrDr" 
           value="@(Model.FrDr > 0 ? $"{Model.FrDr:0000-00-00}" : "")" 
           class="form-control" />
    <span asp-validation-for="FrDr" class="text-danger"></span>
</div>

Page Model的Post方法修改 #

接收前端提交的日期字符串，手动转换为int格式：

public async Task<IActionResult> OnPostAsync()
{
    // 获取前端提交的日期字符串
    var dateInput = Request.Form["FrDr"].ToString();
    if (DateTime.TryParse(dateInput, out var selectedDate))
    {
        // 转换为YYYYMMDD的int格式
        FrDr = selectedDate.Year * 10000 + selectedDate.Month * 100 + selectedDate.Day;
    }
    else
    {
        ModelState.AddModelError("FrDr", "请选择有效的日期");
        return Page();
    }

    // 执行数据库操作...

    return RedirectToPage("./Index");
}

两种方式都能实现你的需求，第一种更规范，适合长期维护；第二种更简洁，适合快速场景。

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