在查看和编辑期间将 EditorFor() 字段格式化为货币？

Question

我的视图中有一个EditorFor() 字段[cost]：

<div class="form-group">
        @*@Html.LabelFor(model => model.cost, htmlAttributes: new { @class = "control-label col-md-2" })*@
        <span class="control-label col-md-2">Cost:</span>
        <div class="col-md-10">
            @Html.EditorFor(model => model.cost, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.cost, "", new { @class = "text-danger" })
        </div>
    </div>

我想做的是在查看此值时使用$ 显示该值（单个记录、内部网格等），并在用户将值输入字段时进行格式化。例如，当输入12345 时，我希望在用户输入时自动显示为12,345。

有没有简单的方法可以做到这一点？

我将 MVC5 Code-First 与 Bootstrap 结合使用，在我的研究中，我发现了 MVC3/4 的几个可能选项，但其中大多数似乎实施起来很麻烦。

---

编辑：

我正在寻找一种方法在我的EditorFor() 和Grid.Mvc (https://gridmvc.codeplex.com) 字段[cost] 的列中将值显示为currency：

@try
{
    @Html.Grid(Model).Columns(columns =>
    {
        columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o => @<a href="/INV_Assets/Edit/@o.Id" class="btn btn-primary btn-sm noDecoration"><span class="glyphicon glyphicon-pencil"></span> @*Edit*@</a>).SetWidth(15);
        columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o => @<a href="/INV_Assets/Delete/@o.Id" class="btn btn-danger btn-sm noDecoration"><span class="glyphicon glyphicon-remove-circle"></span> @*Delete*@</a>).SetWidth(15);
        columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o => @<a href="/INV_Assets/Details/@o.Id" class="btn btn-default btn-sm noDecoration"><span class="glyphicon glyphicon-eye-open"></span> @*View*@</a>).SetWidth(15);
        columns.Add(o => o.Status.status_description).Titled("Status").RenderValueAs(o => o.Status.status_description).Sanitized(false).Encoded(false).Sortable(true).Filterable(true).SetWidth(20);
        columns.Add(o => o.Location.location_dept).Titled("Dept").RenderValueAs(o => o.Location.location_dept).SetWidth(20);
        columns.Add(o => o.Location.location_room).Titled("Room").RenderValueAs(o => o.Location.location_room).SetWidth(20);
        columns.Add(o => o.owner).Titled("Owner").RenderValueAs(o => o.owner).SetWidth(20);
        columns.Add(o => o.Type.type_description).Titled("Type").RenderValueAs(o => o.Type.type_description).SetWidth(20);
        columns.Add(o => o.Manufacturer.manufacturer_description).Titled("Manufacturer").RenderValueAs(o => o.Manufacturer.manufacturer_description).SetWidth(20);
        columns.Add(o => o.Model.model_description).Titled("Model").RenderValueAs(o => o.Model.model_description).SetWidth(20);
        columns.Add(o => o.Vendor.vendor_name).Titled("Vendor").RenderValueAs(o => o.Vendor.vendor_name).SetWidth(20);
        columns.Add(o => o.description).Titled("Desc").RenderValueAs(o => o.description).SetWidth(20);
        columns.Add(o => o.asset_tag_number).Titled("Asset Tag #").RenderValueAs(o => o.asset_tag_number).SetWidth(20);
        columns.Add(o => o.serial_number).Titled("Serial #").RenderValueAs(o => o.serial_number).SetWidth(20);
        columns.Add(o => o.ip_address).Titled("IP Addr").RenderValueAs(o => o.ip_address).SetWidth(20);
        columns.Add(o => o.mac_address).Titled("Mac Addr").RenderValueAs(o => o.mac_address).SetWidth(20);
        columns.Add(o => o.po_number).Titled("PO #").RenderValueAs(o => o.po_number).SetWidth(20);
        columns.Add(o => o.invoice_number).Titled("Inv. #").RenderValueAs(o => Convert.ToString(o.invoice_number)).SetWidth(20);
        columns.Add(o => o.cost).Titled("Cost").RenderValueAs(o => "$" + Convert.ToString(o.cost)).SetWidth(20);
        columns.Add(o => o.note).Titled("Note").RenderValueAs(o => o.note).SetWidth(20);
        columns.Add(o => o.acquired_date).Titled("Acq. Date").RenderValueAs(o => Convert.ToString(o.acquired_date)).SetWidth(20);
        columns.Add(o => o.disposed_date).Titled("Disp. Date").RenderValueAs(o => Convert.ToString(o.disposed_date)).SetWidth(20);
        columns.Add(o => o.created_date).Titled("Crtd. Date").RenderValueAs(o => Convert.ToString(o.created_date)).SetWidth(20);
        columns.Add(o => o.created_by).Titled("By").RenderValueAs(o => o.created_by).SetWidth(20);
        columns.Add(o => o.modified_date).Titled("Mod. Date").RenderValueAs(o => Convert.ToString(o.modified_date)).SetWidth(20);
        columns.Add(o => o.modified_by).Titled("By").RenderValueAs(o => o.modified_by).SetWidth(20);
    }).WithPaging(10).Sortable().Filterable().WithMultipleFilters();
}
catch (NullReferenceException ex)
{
    return;
}

我在我的模型中将[cost] 定义为decimal，但网格要求该值是string。我认为这个Convert.ToString() 使public decimal cost { get; set; } 上的注释[DataType(DataType.Currency)] 和[DisplayFormat(DataFormatString="{0:C}", ApplyFormatInEditMode=true)] 无法生效？

 [DataType(DataType.Currency)]
 [DisplayFormat(DataFormatString="{0:C}", ApplyFormatInEditMode=true)]
  public decimal cost { get; set; }

理想情况下，希望始终将值1222345.47 显示为（例如）$1,222,345.47，让用户以纯小数形式输入值，并且在远离EditorFor() 的位置单击时，将值直观地格式化为@ 987654344@ 格式。

任何人都可以提供解决此问题的方法吗？

---

EDIT2：

我得到EditorFor() 使用下面的自定义格式字符串正确显示值：

[DisplayFormat(DataFormatString = "{0:#,###0.00}", ApplyFormatInEditMode=true)]

正如克里斯所提到的，我必须去掉“，”，以便模型接受该值作为有效值——我相信当表单尝试发布时我可以做到这一点。

仍在尝试弄清楚如何以currency 格式显示我的MVCGrid 中的值。

Answer 1

这是一个两管齐下的答案。就查看数据而言，您可以简单地用以下方式装饰您的财产：

[DisplayFormat(DataFormatString = "{0:C}")]
public Decimal cost { get; set; }

或者

[DataType(DataType.Currency)]
public Decimal cost { get; set; }

同样有效。

但是，对于编辑值，事情有点复杂。除了DataFormatString 之外，DisplayFormat 还接受一个名为ApplyInEditMode 的参数。将此设置为true，将导致 Razor 呈现的值也采用所选格式。但是，在您执行此操作之前，这里的问题是诸如“$1,234.56”之类的发布值将无法由模型绑定器作为十进制值处理。

对于此功能以及您想要的“即打即用”功能，您应该简单地使用 JavaScript。有大量的 JavaScript 插件可以格式化输入值。只需谷歌诸如“javascript格式输入值”之类的东西，您就会得到比您想要的更多的结果。找到适合您的并使用它。

Answer 2

我认为您问题的编辑部分已经得到了很好的回答。

Grid MVC 允许您使用 .Format() 选项来格式化小数，如下所示：

columns.Add(model => model.Cost).Titled("Cost PA").Format("£{0:#,###0.00}").SetWidth(10); columns.Add(model => model.CoTermDays).Titled("Days").SetWidth(10);

结果如下所示： currency format in grid