How do I display the DisplayAttribute.Description attribute value?

Question

I have a model class, with a property like this:

[Display(Name = \"Phone\", Description=\"Hello World!\")]
public string Phone1 { get; set; }

Answer 1

In ASP.NET MVC Core you can use the new Tag Helpers, that makes your HTML look like... HTML :)

Like this:

Note 1: You can use the aria-describedby attribute in the input element as that id will be created automatically in the span element with asp-description-for attribute.

Note 2: In Bootstrap 4, the classes form-text and text-muted replaces the v3 help-block class for block-level help text.

For this magic to happen, you just need to create a new Tag Helper:

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;

/// 

///  implementation targeting <span> elements with an asp-description-for attribute.
/// Adds an id attribute and sets the content of the <span> with the Description property from the model data annotation DisplayAttribute.
/// 
[HtmlTargetElement("span", Attributes = DescriptionForAttributeName)]
public class SpanDescriptionTagHelper : TagHelper
{
    private const string DescriptionForAttributeName = "asp-description-for";

    /// 

    /// Creates a new .
    /// 
    /// The .
    public SpanDescriptionTagHelper(IHtmlGenerator generator)
    {
        Generator = generator;
    }

    /// 
    public override int Order
    {
        get
        {
            return -1000;
        }
    }

    [HtmlAttributeNotBound]
    [ViewContext]
    public ViewContext ViewContext { get; set; }

    protected IHtmlGenerator Generator { get; }

    /// 

    /// An expression to be evaluated against the current model.
    /// 
    [HtmlAttributeName(DescriptionForAttributeName)]
    public ModelExpression DescriptionFor { get; set; }

    /// 
    /// Does nothing if  is null.
    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        if (context == null)
        {
            throw new ArgumentNullException(nameof(context));
        }

        if (output == null)
        {
            throw new ArgumentNullException(nameof(output));
        }

        var metadata = DescriptionFor.Metadata;

        if (metadata == null)
        {
            throw new InvalidOperationException(string.Format("No provided metadata ({0})", DescriptionForAttributeName));
        }

        output.Attributes.SetAttribute("id", metadata.PropertyName + "-description");

        if( !string.IsNullOrWhiteSpace( metadata.Description))
        {
            output.Content.SetContent(metadata.Description);
            output.TagMode = TagMode.StartTagAndEndTag;
        }
    }
}

And make your Tag Helpers available to all our Razor views. Add the addTagHelper directive to the Views/_ViewImports.cshtml file:

@addTagHelper "*, YourAssemblyName"

Note 1: Replace YourAssemblyName with the assembly name of your project.

Note 2: You just need to do this once, for all your Tag Helpers!

More information on Tag Helpers here: https://docs.asp.net/en/latest/mvc/views/tag-helpers/intro.html

That’s it! Have fun with the new Tag Helpers!