9

Here the property in my ViewModel:

[Display(Name = "Ext.")]
[MaxLength(6, ErrorMessage = "Must be a maximum of 6 characters")]
[StringLength(6)]
public string Extension { get; set; }

And in my View:

@Html.EditorFor(model => model.Extension)

And it renders:

<input class="text-box single-line" data-val="true" data-val-length="The field Ext. must be a string with a maximum length of 6." data-val-length-max="6" id="Extension" name="Extension" type="text" value="" />

Should this be setting the maxlength attribute on my textbox? If not, how can I do that with DataAttributes?

5
  • Have you verified if you can post a string longer than 6 characters? Feb 6, 2013 at 22:22
  • I do get a validation error, but I want it to actually set the maxlength attribute.
    – Mike Cole
    Feb 6, 2013 at 22:23
  • If you change it to TextBoxFor you can pass in HTML options. Feb 6, 2013 at 22:36
  • Yes, but I'd like the attribute that I set in the ViewModel to control this if possible.
    – Mike Cole
    Feb 6, 2013 at 22:57
  • 2
    If you are using unobtrusive validation this post could be helpful Feb 7, 2013 at 5:44

3 Answers 3

5

Essentially based on Brad's answer, wrapped in an extension on the Html helper using lambda syntax so you don't pollute your Razor views with reflection stuff:

using System;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Linq.Expressions;
using System.Reflection;
using System.Web.Mvc;

public static class HtmlHelper
{
    public static int? MaxLength<TModel, TProperty>(
        this HtmlHelper<TModel> htmlHelper,
        Expression<Func<TModel, TProperty>> expression)
    {
        MemberExpression memberExpression = (MemberExpression)expression.Body;

        PropertyInfo property = typeof(TModel)
            .GetProperty(memberExpression.Member.Name);

        StringLengthAttribute attribute = (StringLengthAttribute)property
            .GetCustomAttributes(typeof(StringLengthAttribute), true)
            .FirstOrDefault();

        if (attribute != null)
        {
            return attribute.MaximumLength;
        }

        return null;
    }
}

Use it like such:

@Html.TextBoxFor(x => x.Name, new { maxlength = Html.MaxLength(x => x.Name) })

where x refers to your model.

If the StringLengthAttribute is not declared for the property, null will be returned and the maxlength attribute will be empty on the textbox element.

Remember to include using in your razor page so you can access the method.

@using HtmlHelper

You also need to use none null-able result for the method to overcome compile error.

4

I'd like the attribute that I set in the ViewModel to control this if possible.

ASP.NET MVC provides an extensible system for doing exactly this. Here is what you need to do:

  1. Implement a custom ModelMetadataProvider.
  2. Look for the StringLengthAttribute or the MaxLengthAttribute, extract the information and add it to the ModelMetadata.
  3. Provide a custom Editor template that makes use of the information.

Step 1: Implement a custom ModelMetadataProvider.

Create a class that derives from ModelMetadataProvider. Typically you would derive from the DataAnnotationsModelMetadataProvider as this provides some default functionality which means you only have to override a single method called CreateMetadata.

Step 2: Extract the information:

To get the information, you need to look for the attribute, extract the maximum length information and add it to the AdditionalValues dictionary of the ModelMetadata. The implementation would look something like this (this is the entire implementation):

public class CustomModelMetadataProvider : DataAnnotationsModelMetadataProvider
{
    protected override ModelMetadata CreateMetadata(
        IEnumerable<Attribute> attributes, 
        Type containerType, 
        Func<object> modelAccessor, 
        Type modelType, 
        string propertyName)
    {
        // Call the base class implementation to create the default metadata...
        var metadata = base.CreateMetadata(
            attributes, 
            containerType, 
            modelAccessor, 
            modelType, 
            propertyName);

        // Extract the stringLengthAttribute (you can do the same for the
        // MaxLengthAttribute if you want).
        var attr = attributes
            .OfType<StringLengthAttribute>()
            .First();

        // This could be getting called on a property that doesn't have the
        // attribute so make sure you check for null!
        if (attr != null)
        {
            metadata.AdditionalValues["maxLength"] = attr.MaximumLength;
        }

        return metadata;
    }
}

In order for ASP.NET MVC to use this you need to register it in the Application_Start method in Global.asax.

ModelMetadataProviders.Current = new CustomModelMetadataProvider();

Step 3: Create a custom editor template.

You now need to create a view that uses the information. Create a new view called String in the Views\Shared\ folder.

String.cshtml

@{
    object maxLength;
    if (!ViewData.ModelMetadata.AdditionalValues
            .TryGetValue("maxLength", out maxLength))
    {
        maxLength = 0;
    }

    var attributes = new RouteValueDictionary
    {
        {"class", "text-box single-line"},
        { "maxlength", (int)maxLength },
    };
}

@Html.TextBox("", ViewContext.ViewData.TemplateInfo.FormattedModelValue, attributes)

When you run your application you will get the following HTML output by calling @Html.EditorFor.

<input class="text-box single-line" id="Extension" maxlength="6" name="Extension" type="text" value="" />

If you want to know more about the model metadata provider system, Brad Wilson has a series of blog posts that detail how it works (these were written prior to the Razor view engine so some of the view Syntax is a bit funky but otherwise the information is sound).

1
  • 1
    Benjamin, you are a machine today!
    – Mike Cole
    May 10, 2013 at 20:51
2

I ran into something similar, here was my quick and dirty solution:

at the top of your .cshtml file add the line:

@{
var max = ((System.ComponentModel.DataAnnotations.StringLengthAttribute)(typeof(MyType))
.GetProperty("MyProp")
.GetCustomAttributes(typeof(System.ComponentModel.DataAnnotations.StringLengthAttribute), true)[0]).MaximumLength;    
}

below that in your html replace the EditorFor with:

@Html.TextBoxFor(model => model.Extension, htmlAttributes: new {maxlength=max })

I eventually decided I'd rather just do it in script:

<script>
    $(function ()
    {
        var max = $("#myinput").attr("data-val-length-max");
        $("#myinput").attr("maxlength", max);
    });
</script>

but if you don't want to to add script the first example should work.

1
  • This code works, but you might want to keep your Razor views cleaner using something like a helper. See my answer for an example of that.
    – Jules
    Oct 13, 2016 at 19:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.