title: Format EditorFor() field as Currency during View and while Editing?
body: <p>I have an <code>EditorFor()</code> on my View for a field <code>[cost]</code>: </p>
  
  <pre><code>&lt;div class="form-group"&gt;
          @*@Html.LabelFor(model =&gt; model.cost, htmlAttributes: new { @class = "control-label col-md-2" })*@
          &lt;span class="control-label col-md-2"&gt;Cost:&lt;/span&gt;
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model.cost, new { htmlAttributes = new { @class = "form-control" } })
              @Html.ValidationMessageFor(model =&gt; model.cost, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>What I'd like to do is display this value with a <code>$</code> 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 <code>12345</code> I'd like the value to automatically display as <code>12,345</code> when the user is typing.</p>
  
  <p>Is there a simple method to do this?</p>
  
  <p>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.</p>
  
  <hr>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>I'm looking for a way to display the value as <code>currency</code> both in my <code>EditorFor()</code> and within a <code>Grid.Mvc</code> (<a href="https://gridmvc.codeplex.com" rel="nofollow">https://gridmvc.codeplex.com</a>) column for the field <code>[cost]</code>:</p>
  
  <pre><code>@try
  {
      @Html.Grid(Model).Columns(columns =&gt;
      {
          columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o =&gt; @&lt;a href="/INV_Assets/Edit/@o.Id" class="btn btn-primary btn-sm noDecoration"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt; @*Edit*@&lt;/a&gt;).SetWidth(15);
          columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o =&gt; @&lt;a href="/INV_Assets/Delete/@o.Id" class="btn btn-danger btn-sm noDecoration"&gt;&lt;span class="glyphicon glyphicon-remove-circle"&gt;&lt;/span&gt; @*Delete*@&lt;/a&gt;).SetWidth(15);
          columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o =&gt; @&lt;a href="/INV_Assets/Details/@o.Id" class="btn btn-default btn-sm noDecoration"&gt;&lt;span class="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt; @*View*@&lt;/a&gt;).SetWidth(15);
          columns.Add(o =&gt; o.Status.status_description).Titled("Status").RenderValueAs(o =&gt; o.Status.status_description).Sanitized(false).Encoded(false).Sortable(true).Filterable(true).SetWidth(20);
          columns.Add(o =&gt; o.Location.location_dept).Titled("Dept").RenderValueAs(o =&gt; o.Location.location_dept).SetWidth(20);
          columns.Add(o =&gt; o.Location.location_room).Titled("Room").RenderValueAs(o =&gt; o.Location.location_room).SetWidth(20);
          columns.Add(o =&gt; o.owner).Titled("Owner").RenderValueAs(o =&gt; o.owner).SetWidth(20);
          columns.Add(o =&gt; o.Type.type_description).Titled("Type").RenderValueAs(o =&gt; o.Type.type_description).SetWidth(20);
          columns.Add(o =&gt; o.Manufacturer.manufacturer_description).Titled("Manufacturer").RenderValueAs(o =&gt; o.Manufacturer.manufacturer_description).SetWidth(20);
          columns.Add(o =&gt; o.Model.model_description).Titled("Model").RenderValueAs(o =&gt; o.Model.model_description).SetWidth(20);
          columns.Add(o =&gt; o.Vendor.vendor_name).Titled("Vendor").RenderValueAs(o =&gt; o.Vendor.vendor_name).SetWidth(20);
          columns.Add(o =&gt; o.description).Titled("Desc").RenderValueAs(o =&gt; o.description).SetWidth(20);
          columns.Add(o =&gt; o.asset_tag_number).Titled("Asset Tag #").RenderValueAs(o =&gt; o.asset_tag_number).SetWidth(20);
          columns.Add(o =&gt; o.serial_number).Titled("Serial #").RenderValueAs(o =&gt; o.serial_number).SetWidth(20);
          columns.Add(o =&gt; o.ip_address).Titled("IP Addr").RenderValueAs(o =&gt; o.ip_address).SetWidth(20);
          columns.Add(o =&gt; o.mac_address).Titled("Mac Addr").RenderValueAs(o =&gt; o.mac_address).SetWidth(20);
          columns.Add(o =&gt; o.po_number).Titled("PO #").RenderValueAs(o =&gt; o.po_number).SetWidth(20);
          columns.Add(o =&gt; o.invoice_number).Titled("Inv. #").RenderValueAs(o =&gt; Convert.ToString(o.invoice_number)).SetWidth(20);
          columns.Add(o =&gt; o.cost).Titled("Cost").RenderValueAs(o =&gt; "$" + Convert.ToString(o.cost)).SetWidth(20);
          columns.Add(o =&gt; o.note).Titled("Note").RenderValueAs(o =&gt; o.note).SetWidth(20);
          columns.Add(o =&gt; o.acquired_date).Titled("Acq. Date").RenderValueAs(o =&gt; Convert.ToString(o.acquired_date)).SetWidth(20);
          columns.Add(o =&gt; o.disposed_date).Titled("Disp. Date").RenderValueAs(o =&gt; Convert.ToString(o.disposed_date)).SetWidth(20);
          columns.Add(o =&gt; o.created_date).Titled("Crtd. Date").RenderValueAs(o =&gt; Convert.ToString(o.created_date)).SetWidth(20);
          columns.Add(o =&gt; o.created_by).Titled("By").RenderValueAs(o =&gt; o.created_by).SetWidth(20);
          columns.Add(o =&gt; o.modified_date).Titled("Mod. Date").RenderValueAs(o =&gt; Convert.ToString(o.modified_date)).SetWidth(20);
          columns.Add(o =&gt; o.modified_by).Titled("By").RenderValueAs(o =&gt; o.modified_by).SetWidth(20);
      }).WithPaging(10).Sortable().Filterable().WithMultipleFilters();
  }
  catch (NullReferenceException ex)
  {
      return;
  }
  </code></pre>
  
  <p>I've defined <code>[cost]</code> in my model as <code>decimal</code>, but the grid requires the value to be a <code>string</code>. I think that this <code>Convert.ToString()</code> is keeping the annotations <code>[DataType(DataType.Currency)]</code> and <code>[DisplayFormat(DataFormatString="{0:C}", ApplyFormatInEditMode=true)]</code> on <code>public decimal cost { get; set; }</code> from taking effect?</p>
  
  <pre><code> [DataType(DataType.Currency)]
   [DisplayFormat(DataFormatString="{0:C}", ApplyFormatInEditMode=true)]
    public decimal cost { get; set; }
  </code></pre>
  
  <p>Ideally want to display (Ex.) the value <code>1222345.47</code> as <code>$1,222,345.47</code> at all times, letting the user enter the value as a plain decimal and when clicking away from the <code>EditorFor()</code> have the value visually formatted into <code>currency</code> format.</p>
  
  <p>Can anyone offer a way to go about this?</p>
  
  <hr>
  
  <p><strong>EDIT2</strong>:</p>
  
  <p>I got the <code>EditorFor()</code> displaying the value correctly by using the custom format string below:</p>
  
  <pre><code>[DisplayFormat(DataFormatString = "{0:#,###0.00}", ApplyFormatInEditMode=true)]
  </code></pre>
  
  <p>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. </p>
  
  <p>Still trying to figure out how to display the value in my <code>MVCGrid</code> in <code>currency</code> format.</p>