使用Javascript和.NET MVC將十進制數字格式設置為兩位

Question

我有4個字段，分別是貨幣1、2、3和總計，當在貨幣1、2、3內放置一個值時，會自動進行計算，並顯示在總計字段中。 但是，當我單擊編輯鏈接時，所有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

解決了我的問題。 我刪除了

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

我為需要在編輯視圖中將小數點表示為兩個小數位的四個字段中的每個字段執行此操作。 舉例來說，我的價值現在為£15.24，而不是£15.2400。

此外，對於需要用TextBoxFor替換的每個字段，我還修改了這些字段所在的模型，以便它們現在看起來像

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

這樣可以確保當我選擇“詳細信息視圖”時，四個值中的每個值在值之前都帶有£。

Answer 2

使用Money類型，您可以調用ToString（“ C”）; C代表貨幣。 我將這些設置為在Javascript運行之前在每個框中顯示為貨幣。 以這個相關問題為例：

在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);