javascript - 使用 Javascript 和 .NET MVC 将小数格式化为两位

Question

我有 4 个字段，分别是金钱 1、2、3 和总计，当在金钱 1、2、3 中放置一个值时，会发生自动计算并显示在总计字段中。但是，当我单击编辑链接时，所有 4 个字段仍会填充，但它们显示为 4 位小数(即 15.1511)，而不是 2 位小数(即 15.15)。我见过其他人将其值硬编码到 JavaScript 中的示例，但是如下面的代码所示，我没有硬编码数值。

 <script type="text/javascript">
        function sum() {
            var txtFirstNumberValue = document.getElementById('money1').value;
            var txtSecondNumberValue = document.getElementById('money2').value;
            var txtThirdNumberValue = document.getElementById('money3').value;
            var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue) + parseFloat(txtThirdNumberValue);
            if (!isNaN(result)) {
                document.getElementById('Total').value = result.toFixed(2);
            }
        }
    </script>

我的 html 查看代码是

@Html.LabelFor(model => model.Total, "Total", new { @class = "control-label col-md-5" })
<div class="col-md-offset-0">
    <input type="text" id="Total" name="Total" value="@Model.Total" />                                  
    @Html.ValidationMessageFor(model => model.Total)
</div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.money1, "money1", new { @class = "control-label col-md-5" })
    <div class="col-md-offset-0">
        <input type="text" id="money1" onkeyup="sum();" name="money1" value="@Model.money1"  />
        @Html.ValidationMessageFor(model => model.money1)
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.money2, "money2", new { @class = "control-label col-md-5" })
    <div class="col-md-offset-0">
        <input type="text" id="money2" onkeyup="sum();" name="money2" value="@Model.money2" />
        @Html.ValidationMessageFor(model => model.WeeklyRatesPayable)
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.money3, "money3", new { @class = "control-label col-md-5" })
    <div class="col-md-offset-0">
        <input type="text" id="money3" onkeyup="sum();" name="money3" value="@Model.money3" />
        @Html.ValidationMessageFor(model => model.money3)
    </div>
</div>

有没有办法通过 JavaScript 或格式化输入元素来实现此目的？

Answer 1

解决了我的问题。我删除了

<input type="text" id="MAXHB" onkeyup="sum();" name="MAXHB" value="@Model.MAXHB" />

并将其替换为

@Html.TextBoxFor(model => model.ContractualWeekly, "{0:C}", new { @class = "required numeric", onkeyup = "sum()" })

我为需要在编辑 View 中将小数表示为小数点后两位的四个字段中的每一个字段执行了此操作。例如，我的值现在返回为 £15.24，而不是 £15.2400。

此外，对于我需要用 TextBoxFor 替换的每个字段，我还修改了这些字段所在的模型，以便它们现在看起来像

[Display(Name = "money")]
        [DisplayFormat(DataFormatString = "{0:c}", ApplyFormatInEditMode = true)]
        public Nullable<decimal> money { get; set; }

这可以确保当我选择“详细信息 View ”时，四个值中的每一个值之前都有一个 £。