在 .NET MVC 中使用 Javascript 将十进制数格式化为两位

Question

我有 4 个字段，分别是 money 1、2、3 和 Total，当在 money 1、2、3 中放置一个值时，会发生自动计算并出现在 Total 字段中。但是，当我单击编辑 link 时，所有 4 个字段仍被填充，但它们显示为小数点后 4 位（即 15.1511）而不是小数点后两位（即 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

有了货币类型，您可以调用 ToString("C"); C代表货币。在 Javascript 运行之前，我会将这些设置为在每个框中显示为货币。以这个相关问题为例：

Formatting currency using display template in MVC

已为此创建了一个 HTML 助手：

public static string Currency(this HtmlHelper helper, decimal data, string locale = "en-US", bool     woCurrency = false)
{
    var culture = new System.Globalization.CultureInfo(locale);

    if (woCurrency || (helper.ViewData["woCurrency"] != null && (bool)helper.ViewData["woCurrency"]))
        return data.ToString(culture);

    return data.ToString("C", culture);
}

那你就可以用了:

@Html.Currency(Model.Money);

Answer 2

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

<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()" })

我对四个字段中的每一个都做了这个，我需要在编辑视图中将小数点表示为两位小数。例如，我的值现在 return 为 £15.24 而不是 £15.2400。

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

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

这确保当我 select 我的详细信息视图时，四个值中的每一个在值之前都有一个 £。

在 .NET MVC 中使用 Javascript 将十进制数格式化为两位

Format decimal number to two places using Javascript with .NET MVC

javascript

asp.net-mvc