ASP.NET Core中颜色值无法正确存入数据库的问题问询

问题根源 #

视图模型中FontAwesomeColor定义为long数值类型，但前端提交的是带#的十六进制颜色字符串（如#123456）。ASP.NET Core的模型绑定无法自动将字符串转换为long类型，因此会默认赋值为0，这就是字段始终为0的核心原因。

解决方案（推荐方案） #

1. 修改视图模型字段类型

将FontAwesomeColor改为string类型，直接存储十六进制颜色字符串，前后端处理更直观且不易出错：

public string FontAwesomeColor { get; set; }

2. 修正前端输入框类型

前端代码中input的type错误设置为submit（提交按钮），应改为text以适配颜色值输入：

<div class="col-12 col-md-6 ">
    <div class="">
        <label for="color" class=" " asp-for="FontAwesomeColor"></label>
        <input asp-for="FontAwesomeColor" type="text" id="color" name="color" value="#123456" />
        <div id="picker"></div>
        <span asp-validation-for="FontAwesomeColor"></span>
    </div>
</div>

同时确保farbtastic颜色选择器能正确将选中的颜色值同步到该输入框中。

备选方案（坚持用数值类型存储） #

如果必须用long类型存储颜色值，需要将十六进制字符串转换为十进制数值后再绑定：

方式一：前端处理后提交

在表单提交前，通过JavaScript将颜色字符串转成十进制数值：

document.querySelector('form').addEventListener('submit', function(e) {
    const colorInput = document.getElementById('color');
    const colorValue = colorInput.value.trim().replace('#', '');
    // 将十六进制字符串转为十进制数值
    colorInput.value = parseInt(colorValue, 16);
});

方式二：后端手动转换

在控制器中手动获取前端提交的原始颜色字符串，转换后再赋值：

public async Task<IActionResult> CreateService(CreateServiceViewModel createServiceViewModel)
{
    var colorString = Request.Form["FontAwesomeColor"].ToString();
    if (!string.IsNullOrEmpty(colorString) && colorString.StartsWith("#"))
    {
        // 去除#后将十六进制转为long类型
        createServiceViewModel.FontAwesomeColor = Convert.ToInt64(colorString.Substring(1), 16);
    }
    _siteService.CreateService(createServiceViewModel);
    return View(createServiceViewModel);
}

注意：此方式需要确保数据库对应的字段为bigint类型，后续读取时需将十进制数值转回带#的十六进制字符串才能正常显示颜色。

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