Skip to content

Conversation

@tomerqodo
Copy link

Benchmark PR dotnet#64636

Type: Corrupted (contains bugs)

Original PR Title: Blazor supports DisplayName for models
Original PR Description: # 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 dotnet#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 dotnet#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>

renders e.g. as:

<label class="form-label">Product Name</label>

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>

renders e.g. as:

<table class="table">
    <thead>
        <tr>
            <th>Product Name</th>
            <th>Product Price</th>
            <th>Release Date</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; }
}

Original PR URL: dotnet#64636

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants