TextMode为Number的TextBox后台赋值后数字不显示问题

问题分析与解决步骤 #

核心问题根源

1. 无效属性：<asp:TextBox> 本身不支持 format 属性，你添加的 format="0.###" 不会被服务器控件识别，仅作为自定义HTML属性存在，对控件行为无影响。
2. 默认格式缺失：直接将Decimal值赋值给Text属性时，会使用默认的ToString()方法，不会自动补全三位小数的 trailing zeros。
3. 浏览器数字输入限制：TextMode="Number" 渲染为HTML的<input type="number">，浏览器对其显示格式有原生限制，可能会自动去除末尾的零；同时如果服务器文化设置使用逗号作为小数分隔符，会导致格式不兼容。
4. 空值未处理：若数据库返回DBNull，直接解析会导致赋值失败，控件无内容显示。

解决方案 #

方案1：保留TextMode="Number"并优化设置

适合需要原生数字输入键盘（移动端）的场景，需处理格式和兼容性问题：

1. 修正控件标记
   移除无效的format属性，添加step属性以支持三位小数输入：

<asp:TextBox Font-Bold="True" ForeColor="Blue" runat="server" 
    ID="txtProjectCost" min="0" TabIndex="7" Wrap="False" 
    TextMode="Number" />

2. 后台代码正确赋值
   处理空值、使用不变文化确保小数分隔符为点、强制格式化为三位小数：

Imports System.Globalization

' ...

If Not IsDBNull(tb.Rows(0).Item(7)) Then
    Dim value As Decimal = Decimal.Parse(tb.Rows(0).Item(7).ToString(), CultureInfo.InvariantCulture)
    ' 强制格式化为三位小数，使用不变文化避免逗号分隔符问题
    txtProjectCost.Text = value.ToString("0.000", CultureInfo.InvariantCulture)
    ' 设置step属性，允许三位小数输入
    txtProjectCost.Attributes.Add("step", "0.001")
Else
    ' 空值时默认显示0.000或空，根据需求调整
    txtProjectCost.Text = "0.000"
End If

3. 浏览器显示兼容说明
   部分浏览器仍会自动去除末尾零（如显示123而非123.000），若需强制显示三位小数，需使用方案2。

方案2：使用普通TextBox+自定义验证与格式化

适合需要严格控制显示格式的场景：

1. 修改控件标记
   移除TextMode="Number"，添加正则验证控件：

<asp:TextBox Font-Bold="True" ForeColor="Blue" runat="server" 
    ID="txtProjectCost" min="0" TabIndex="7" Wrap="False" />

<asp:RegularExpressionValidator runat="server" ID="revProjectCost"
    ControlToValidate="txtProjectCost"
    ValidationExpression="^\d+(\.\d{1,3})?$"
    ErrorMessage="请输入最多三位小数的数字"
    Display="Dynamic" />

2. 后台代码赋值
   同方案1的赋值逻辑，确保初始值格式正确：

Imports System.Globalization

If Not IsDBNull(tb.Rows(0).Item(7)) Then
    Dim value As Decimal = Decimal.Parse(tb.Rows(0).Item(7).ToString(), CultureInfo.InvariantCulture)
    txtProjectCost.Text = value.ToString("0.000", CultureInfo.InvariantCulture)
Else
    txtProjectCost.Text = "0.000"
End If

3. 客户端格式化
   添加JavaScript确保用户输入后自动补全三位小数：

<script>
    document.getElementById('<%= txtProjectCost.ClientID %>').addEventListener('blur', function() {
        let value = parseFloat(this.value);
        if (!isNaN(value)) {
            this.value = value.toFixed(3);
        }
    });
</script>

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