DisplayFormat for TextBoxFor in MVC

Question

I need to round off 4 digit decimal to 2 digits and show in MVC 3 UI

Something like this 58.8964 to 58.90

Tried following this How should I

Answer 1

This works in MVC5

@Html.TextBoxFor(m => m.TotalAmount, "{0:0.00}")

Answer 2

You should use Html.EditorFor instead of Html.TextBoxFor if you want the custom format to be taken into account:

@Html.EditorFor(m => m.TotalAmount)

Also make sure that you have set ApplyFormatInEditMode to true:

[DisplayFormat(DataFormatString = "{0:F2}", ApplyFormatInEditMode = true)]
public decimal? TotalAmount { get; set; }

The DisplayFormat attribute is intended to be used only with templated helpers such as EditorFor and DisplayFor. This is the recommended approach instead of using TextBoxFor.

Answer 3

If you need more control of the field being displayed (vs. a built in EditorFor template) create a custom EditorFor template yourself. Inside an EditorFor template, the built in Html Helpers like @Html.TextBox() can be used with automatic client side validation and Display attributes which are usually only available to EditorFor and DisplayFor.

For example looping through a List of items. The input name has to have an unbroken index.

// Optional, if you require a custom input name for binding
String fieldName = String.Format("FieldNameForBinding[{0}].Property", index)

@Html.EditorFor(m => m.Property, "MyCustomEditorTemplate", fieldName)

Then you can setup your model

[CustomValidation(..optional..)]
[DisplayFormat(DataFormatString = "{0:F2}", ApplyFormatInEditMode = true)]
public decimal? TotalAmount { get; set; }

The EditorFor template (in e.g. ~/Views/Shared/EditorFor/MyCustomEditorTemplate.cshtml) Note the name is left empty, it comes from the fieldName automatically. You can see it in the ViewData.TemplateInfo.HtmlFieldPrefix. Now you have complete control over the display of the field.

@model object
@{
    Decimal? actualValue = (Decimal?)Model;
}
// The TextBox and ValidationMessage "names" are empty, they are filled   
// from the htmlFieldName given via the @Html.EditorFor() call.
@Html.TextBox("", actualValue, new { @class = "cssClass" })
@Html.ValidationMessage("")

The idea is that you can customize the input field however you would like, and use e.g. @Html.TextBox() which outside of a custom EditorFor template would not utilize the built in client-side validation. You don't need to use the custom naming of the input field, that was simply an example of the usefulness of this solution. You can customize the way the data is presented (CSS, etc.) instead of relying on the built in EditorFor templates.

Answer 4

I solve that issue in this way:

@Html.TextBoxFor(model => model.dtArrivalDate, ModelMetadata.FromLambdaExpression(model => model.dtArrivalDate, ViewData).EditFormatString)

or create next extension:

public static class HtmlExtensions
{
    public static MvcHtmlString TextBoxWithFormatFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
    {
        return htmlHelper.TextBoxFor(expression, ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData).EditFormatString, htmlAttributes);
    }
}

But you need to set ApplyFormatInEditMode=true in DisplayFormatAttribute on your field.

Answer 5

Try like this:

@{
     var format = String.Format("{0:0.00}", Model.TotalAmount);
}
@Html.TextBoxFor(m => m.TotalAmount, format)

Hope it helps.