Summary

This PR adds the DisplayName<TValue> component to enable displaying property display names from [Display] and [DisplayName] attributes in Blazor applications, addressing the feature gap identified in issue #49147.

Background

Blazor currently lacks a built-in mechanism to display property names from metadata attributes like MVC's @Html.DisplayNameFor() helper. This forces developers to either:

• Hardcode label text (violating DRY principles and making localization difficult)
• Build custom reflection-based solutions
• Duplicate display name information across models and views

The new DisplayName<TValue> component provides an attribute-based solution that follows the same familiar pattern as other Blazor form components like ValidationMessage<TValue>.

Fixes #49147

Changes

Public API

namespace Microsoft.AspNetCore.Components.Forms;

public class DisplayName<TValue> : ComponentBase
{
    [Parameter]
    [EditorRequired]
    public Expression<Func<TValue>>? For { get; set; }
}

Implementation Details

The component extracts the property name from the expression and reads display metadata:

1. First checks for DisplayAttribute.Name (System.ComponentModel.DataAnnotations)
2. Falls back to DisplayNameAttribute.DisplayName (System.ComponentModel)
3. Uses the property name itself if no attributes are present

Tests

Unit tests in src/Components/Web/test/Forms/DisplayNameTest.cs:

• ✅ Throws when For parameter is missing
• ✅ Reads DisplayAttribute.Name correctly
• ✅ Reads DisplayNameAttribute.DisplayName correctly
• ✅ DisplayAttribute takes precedence over DisplayNameAttribute
• ✅ Falls back to property name when no attributes present
• ✅ Works with different property types (string, decimal, DateTime, int)

E2E test in src/Components/test/E2ETest/Tests/FormsTest.cs:

• ✅ DisplayNamelReadsAttributesCorrectly() - Verifies the component renders correctly in a browser with all attribute scenarios

API usage

Basic form usage:

<EditForm Model="@product">
    <div class="mb-3">
        <label class="form-label">
            <DisplayName For="@(() => product.Name)" />
        </label>
        <InputText @bind-Value="product.Name" class="form-control" />
        <ValidationMessage For="@(() => product.Name)" />
    </div>
</EditForm>

Table headers:

<table class="table">
    <thead>
        <tr>
            <th><DisplayName For="@(() => product.Name)" /></th>
            <th><DisplayName For="@(() => product.Price)" /></th>
            <th><DisplayName For="@(() => product.ReleaseDate)" /></th>
        </tr>
    </thead>
</table>

Model example:

public class Product
{
    [Display(Name = "Product Name")]
    public string Name { get; set; }
    
    [DisplayName("Unit Price")]
    public decimal Price { get; set; }
    
    [Display(Name = "Release Date")]
    public DateTime ReleaseDate { get; set; }
}