Asp – How to override the string representation the HTML helper methods use for a model’s properties

asp.net-mvc

The html helper methods check the ViewDataDictionary for a value. The value can either be in the dictionary or in the Model, as a property. To extract the value, an internal sealed class named the ViewDataEvaluator uses PropertyDescriptor to get the value. Then, Convert.ToString() is called to convert the object returned to a string.

Desired code in Controller action

The controller action should only populate the Model, not format it (formatting the model is global).

Desired code in View

The view can render a HTML textbox and extract the string representation of the property with this line of code:

<%=Html.TextBox(“Date”) %>
<%=Html.TextBox(“Time”) %>
<%=Html.TextBox(“UnitPrice”) %>

Binding Model's Property to HtmlHelper.TextBox()

For the textbox’s value, the UnitPrice property’s value from the model instance is converted to a string. I need to override this behavior with my own conversion to a string, which is per property – not per type. For example, I need a different string representation of a decimal for UnitPrice and another string representation of a decimal for UnitQuantity.

For example, I need to format the UnitPrice's decimal precision based on the market.

string decimalPlaces = ViewData.Model.Precision.ToString ();
<%=Html.TextBox(“UnitPrice”, ViewData.Model.TypeName.UnitPrice.ToString("N" + decimalPlaces)) %>

2-way databinding please

Just like the IModelBinder is the Parse for each property of the model, I need a Format for each property, kinda like Windows Forms binding, but based on the model instead of the control. This would enable the model to round-trip and have proper formatting. I would prefer a design where I could override the default formatting. In addition, my model is in a separate assembly, so attributed properties specifying a formatter are not an option.

Please note I need property specific formatting for a model, not type specific formatting.

Best Answer

There's no way to specify a format with the helpers themselves. The approach you've taken will work. Another approach is to add the value pre-formatted into the ModelState.

EDIT: Are you sure you even want to format a text input with the currency? For example, what you would see in the input is:

<input type="text" name="UnitPrice" value="$1.23" />

When you post that back to the server, we won't understand it. Instead, I'd put the currency symbol outside of the text input. For example:

$<%= Html.TextBox("UnitPrice") %>

I'm sure there's an easy method to render "$" without hard-coding it so it's localizable, but I don't know what it is offhand.

EDIT AGAIN A comment from a developer on my team:

Well, to be fair, this isn’t that bad. Often when you format a number or a date it’s still understandable coming back in. For example, padding a number (like a ZIP code) to 5 digits, padding a decimal to the hundredths, formatting a date to be yyyy-mm-dd, etc. will come in just fine. Adding extra characters like currency symbols will break, but normally input fields don’t take or display currency symbols anyway – it’s implied.

Related Solutions

Asp.net-mvc – MVC DateTime binding with incorrect date format

I've just found the answer to this with some more exhaustive googling:

Melvyn Harbour has a thorough explanation of why MVC works with dates the way it does, and how you can override this if necessary:

http://weblogs.asp.net/melvynharbour/archive/2008/11/21/mvc-modelbinder-and-localization.aspx

When looking for the value to parse, the framework looks in a specific order namely:

RouteData (not shown above)

URI query string

Request form

Only the last of these will be culture aware however. There is a very good reason for this, from a localization perspective. Imagine that I have written a web application showing airline flight information that I publish online. I look up flights on a certain date by clicking on a link for that day (perhaps something like http://www.melsflighttimes.com/Flights/2008-11-21), and then want to email that link to my colleague in the US. The only way that we could guarantee that we will both be looking at the same page of data is if the InvariantCulture is used. By contrast, if I'm using a form to book my flight, everything is happening in a tight cycle. The data can respect the CurrentCulture when it is written to the form, and so needs to respect it when coming back from the form.

Html – How to use dashes in HTML-5 data-* attributes in ASP.NET MVC

This problem has been addressed in ASP.Net MVC 3. They now automatically convert underscores in html attribute properties to dashes. They got lucky on this one, as underscores are not legal in html attributes, so MVC can confidently imply that you'd like a dash when you use an underscore.

For example:

@Html.TextBoxFor(vm => vm.City, new { data_bind = "foo" })

will render this in MVC 3:

<input data-bind="foo" id="City" name="City" type="text" value="" />

If you're still using an older version of MVC, you can mimic what MVC 3 is doing by creating this static method that I borrowed from MVC3's source code:

public class Foo {
    public static RouteValueDictionary AnonymousObjectToHtmlAttributes(object htmlAttributes) {
        RouteValueDictionary result = new RouteValueDictionary();
        if (htmlAttributes != null) {
            foreach (System.ComponentModel.PropertyDescriptor property in System.ComponentModel.TypeDescriptor.GetProperties(htmlAttributes)) {
                result.Add(property.Name.Replace('_', '-'), property.GetValue(htmlAttributes));
            }
        }
        return result;
    }
}

And then you can use it like this:

<%: Html.TextBoxFor(vm => vm.City, Foo.AnonymousObjectToHtmlAttributes(new { data_bind = "foo" })) %>

and this will render the correct data-* attribute:

<input data-bind="foo" id="City" name="City" type="text" value="" />