Generate HTML attributes automatically in MVC 3 depending on data type

Question

I have the following property in the MVC Model:

[Range(0, double.MaxValue, ErrorMessage = "The Volume must have positive values!")]       
public decimal? Volume { get; set; }

The generated HTML is

<input type="text" value="1,00" name="Product.Volume" id="Product_Volume" data-val-range-min="0" data-val-range-max="1.79769313486232E+308" data-val-range="The Volume must have positive values!" data-val-number="The field Volume must be a number." data-val="true" class="text-box single-line">

How do I make the generated HTML be something like this:

<input type="text" value="1,00" name="Product.Volume" id="Product_Volume" data-val-range-min="0" data-val-range-max="1.79769313486232E+308" data-val-range="The Volume must have positive values!" data-val-number="The field Volume must be a number." data-val="true" class="text-box single-line" data-type="decimal" >

The difference is the additional data-type="decimal"

I want the HTML attribute to be added automatically, so I do not have to manually add it.

Mathew Thompson · Accepted Answer · 2012-05-31 09:12:31Z

10

Create your own Display Template and Editor Template views for the Decimal type, that way you can control the display of it and then any Model property that is of type Decimal will automatically use that view whenever you call Html.DisplayFor(m => m.DecimalType) or Html.EditorFor(m => m.DecimalType)

Add these Views in the folders Views > Shared > DisplayTemplates and EditorTemplates

For example, your EditorTemplate would be something like:

@model decimal
@{
    Layout = "~/Views/Shared/EditorTemplates/Template.cshtml";
}

@Html.TextBoxFor(x => x, new {data-type = "decimal"})

answered May 31, 2012 at 9:12

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dragos Durlut Over a year ago

Thank you for your answer. Do I have to then create a search/replace everywhere ? Also, what happens with the data-annotations I want to put manually ?

Mathew Thompson Over a year ago

@DragosDurlut No problems, no you don't have to search/replace everywhere as your models will automatically pick up the templates for the given type decimal. Your other data-annotations should remain intact

Dragos Durlut · Accepted Answer · 2012-08-13 12:11:22Z

My solution was an override of HTML TextBoxFor helper Method:

        public static MvcHtmlString TextBoxWithCustomHtmlAttributesFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
        {
            Type propertyType = typeof(TProperty);
            Type undelyingNullableType = Nullable.GetUnderlyingType(propertyType);
            var metadata = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);
            string prefix = ExpressionHelper.GetExpressionText(expression);
            var validationAttributes = helper.GetUnobtrusiveValidationAttributes(prefix, metadata);

            string pType = (undelyingNullableType ?? propertyType).Name.ToString().ToLower();
            if (htmlAttributes != null)
            {
                var dataTypeDict = new Dictionary<string, object>(); 
                dataTypeDict.Add("data-type", pType);
                if (validationAttributes != null && validationAttributes.Count > 0)
                {
                    foreach (var i in validationAttributes)
                    {
                        dataTypeDict.Add(i.Key, i.Value);
                    }
                }
                htmlAttributes = Combine(new RouteValueDictionary(htmlAttributes), new RouteValueDictionary(dataTypeDict));
            }
            var textBox = helper.TextBoxFor(expression, (Dictionary<string, object>)htmlAttributes);
            return textBox;
        }

Collectives™ on Stack Overflow

Generate HTML attributes automatically in MVC 3 depending on data type

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related