将输入字段绑定到模型时不显示 HTML 输入字段占位符

Posted 2023-03-27

【中文标题】将输入字段绑定到模型时不显示 HTML 输入字段占位符

【英文标题】：HTML input field placeholder not displaying when binding input field to model

【发布时间】：2021-12-14 18:24:14

【问题描述】：

我有一个输入字段，用户可以在其中输入价格。我希望有一个0.00 的占位符。

占位符仅在我删除模型绑定时才有效：asp-for="Postage"

为什么会这样？以及如何显示占位符？

HTML 输入框：

@model Website.Models.Game

<div class="form-group">
   <label asp-for="Postage"></label>
   <div class="input-icon">
      <input type="number" class="form-control postageInput" placeholder="0.00" asp-for="Postage"/>
      <i>£</i>
   </div>
</div>

模特：

public class Game 
  [Key]
  public int Id get; set;

  [Required(ErrorMessage = "Enter postage amount or click on 'collection only'")]
  public decimal Postage get; set;

  [other properties here below...]

【问题讨论】：

尝试将Postage的类型更改为decimal?。 decimal 始终有一个值（默认为 0.0），因此它永远不能为“空”。

@JackA。十进制不是 html 输入字段的有效类型。模型中 Postage 属性的类型已经设置为十进制。

我指的是模型，而不是 HTML。将其更改为可为空的小数。

我的错，我误会了。这行得通，非常感谢

【参考方案1】：

当输入值为空时显示占位符。由于小数始终具有默认值，因此不能为空。将模型上的 Postage 属性的类型更改为可为空的小数将解决此问题。

试试下面的代码看看有什么不同。

HTML：

<div class="form-group">
    <label asp-for="Postage"></label>
    <div class="input-icon">
        <input type="number" class="form-control postageInput" placeholder="0.00" asp-for="Postage" />
        <i>£</i>
    </div>
</div>
<div class="form-group">
    <label asp-for="PostageNullable"></label>
    <div class="input-icon">
        <input type="number" class="form-control postageInput" placeholder="0.00" asp-for="PostageNullable" />
        <i>£</i>
    </div>
</div>

型号：

public decimal Postage  get; set; 

public decimal? PostageNullable  get; set;