I have an EditorFor() on my View for a field [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>
What I'd like to do is display this value with a $ whenever it is being viewed (individual record, inside grid, etc.) and have formatting occur while a user is entering a value into a field. For example, when typing 12345 I'd like the value to automatically display as 12,345 when the user is typing.
Is there a simple method to do this?
I'm using MVC5 Code-First with Bootstrap, and in my research I've found several possible options for MVC3/4, but most of them seem cumbersome to implement.
EDIT:
I'm looking for a way to display the value as currency both in my EditorFor() and within a Grid.Mvc (https://gridmvc.codeplex.com) column for the field [cost]:
@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;
}
I've defined [cost] in my model as decimal, but the grid requires the value to be a string. I think that this Convert.ToString() is keeping the annotations [DataType(DataType.Currency)] and [DisplayFormat(DataFormatString="{0:C}", ApplyFormatInEditMode=true)] on public decimal cost { get; set; } from taking effect?
[DataType(DataType.Currency)]
[DisplayFormat(DataFormatString="{0:C}", ApplyFormatInEditMode=true)]
public decimal cost { get; set; }
Ideally want to display (Ex.) the value 1222345.47 as $1,222,345.47 at all times, letting the user enter the value as a plain decimal and when clicking away from the EditorFor() have the value visually formatted into currency format.
Can anyone offer a way to go about this?
EDIT2:
I got the EditorFor() displaying the value correctly by using the custom format string below:
[DisplayFormat(DataFormatString = "{0:#,###0.00}", ApplyFormatInEditMode=true)]
As mentioned by Chris, I must strip out the "," in order for the model to accept the value as valid -- this I believe I can do when form attempts to post.
Still trying to figure out how to display the value in my MVCGrid in currency format.
