Blazor supports DisplayName for models

src/Components/Web/src/Forms/DisplayNameLabel.cs

@@ -0,0 +1,79 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+using System.Linq.Expressions;
+using System.Reflection;
+using Microsoft.AspNetCore.Components.Rendering;
+
+namespace Microsoft.AspNetCore.Components.Forms;
+
+/// <summary>
+/// Displays the display name for a specified field, reading from <see cref="DisplayAttribute"/>
+/// or <see cref="DisplayNameAttribute"/> if present, or falling back to the property name.
+/// </summary>
+/// <typeparam name="TValue">The type of the field.</typeparam>
+public class DisplayNameLabel<TValue> : ComponentBase
+{
+    private Expression<Func<TValue>>? _previousFieldAccessor;
+    private string? _displayName;
+
+    /// <summary>
+    /// Gets or sets a collection of additional attributes that will be applied to the created element.
+    /// </summary>
+    [Parameter(CaptureUnmatchedValues = true)]
+    public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    /// <summary>
+    /// Specifies the field for which the display name should be shown.
+    /// </summary>
+    [Parameter, EditorRequired]
+    public Expression<Func<TValue>>? For { get; set; }
+
+    /// <inheritdoc />
+    protected override void OnParametersSet()
+    {
+        if (For == null)
+        {
+            throw new InvalidOperationException($"{GetType()} requires a value for the " +
+                $"{nameof(For)} parameter.");
+        }
+
+        if (For != _previousFieldAccessor)
+        {
+            _displayName = GetDisplayName(For);
+            _previousFieldAccessor = For;
+        }
+    }
+
+    /// <inheritdoc />
+    protected override void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        builder.AddContent(0, _displayName);
+    }
+
+    private static string GetDisplayName(Expression<Func<TValue>> expression)
+    {
+        if (expression.Body is MemberExpression memberExpression)
+        {
+            var member = memberExpression.Member;
+
+            var displayAttribute = member.GetCustomAttribute<DisplayAttribute>();
+            if (displayAttribute?.Name != null)
+            {
+                return displayAttribute.Name;
+            }
+
+            var displayNameAttribute = member.GetCustomAttribute<DisplayNameAttribute>();
+            if (displayNameAttribute?.DisplayName != null)
+            {
+                return displayNameAttribute.DisplayName;
+            }
+
+            return member.Name;
+        }
+
+        return string.Empty;
+    }
+}

src/Components/Web/src/PublicAPI.Unshipped.txt

@@ -40,3 +40,11 @@ Microsoft.AspNetCore.Components.Web.Media.MediaSource.MediaSource(byte[]! data,
 Microsoft.AspNetCore.Components.Web.Media.MediaSource.MediaSource(System.IO.Stream! stream, string! mimeType, string! cacheKey) -> void
 Microsoft.AspNetCore.Components.Web.Media.MediaSource.MimeType.get -> string!
 Microsoft.AspNetCore.Components.Web.Media.MediaSource.Stream.get -> System.IO.Stream!
+Microsoft.AspNetCore.Components.Forms.DisplayNameLabel<TValue>
+Microsoft.AspNetCore.Components.Forms.DisplayNameLabel<TValue>.AdditionalAttributes.get -> System.Collections.Generic.IReadOnlyDictionary<string!, object!>?
+Microsoft.AspNetCore.Components.Forms.DisplayNameLabel<TValue>.AdditionalAttributes.set -> void
+Microsoft.AspNetCore.Components.Forms.DisplayNameLabel<TValue>.DisplayNameLabel() -> void
+Microsoft.AspNetCore.Components.Forms.DisplayNameLabel<TValue>.For.get -> System.Linq.Expressions.Expression<System.Func<TValue>!>?
+Microsoft.AspNetCore.Components.Forms.DisplayNameLabel<TValue>.For.set -> void
+override Microsoft.AspNetCore.Components.Forms.DisplayNameLabel<TValue>.BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder! builder) -> void
+override Microsoft.AspNetCore.Components.Forms.DisplayNameLabel<TValue>.OnParametersSet() -> void

src/Components/Web/test/Forms/DisplayNameLabelTest.cs

@@ -0,0 +1,206 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+using Microsoft.AspNetCore.Components.Rendering;
+using Microsoft.AspNetCore.Components.Test.Helpers;
+
+namespace Microsoft.AspNetCore.Components.Forms;
+
+public class DisplayNameLabelTest
+{
+    [Fact]
+    public async Task ThrowsIfNoForParameterProvided()
+    {
+        // Arrange
+        var rootComponent = new TestHostComponent
+        {
+            InnerContent = builder =>
+            {
+                builder.OpenComponent<DisplayNameLabel<string>>(0);
+                builder.CloseComponent();
+            }
+        };
+
+        var testRenderer = new TestRenderer();
+        var componentId = testRenderer.AssignRootComponentId(rootComponent);
+
+        // Act & Assert
+        var ex = await Assert.ThrowsAsync<InvalidOperationException>(
+            async () => await testRenderer.RenderRootComponentAsync(componentId));
+        Assert.Contains("For", ex.Message);
+        Assert.Contains("parameter", ex.Message);
+    }
+
+    [Fact]
+    public async Task DisplaysPropertyNameWhenNoAttributePresent()
+    {
+        // Arrange
+        var model = new TestModel();
+        var rootComponent = new TestHostComponent
+        {
+            InnerContent = builder =>
+            {
+                builder.OpenComponent<DisplayNameLabel<string>>(0);
+                builder.AddComponentParameter(1, "For", (System.Linq.Expressions.Expression<Func<string>>)(() => model.PlainProperty));
+                builder.CloseComponent();
+            }
+        };
+
+        // Act
+        var output = await RenderAndGetOutput(rootComponent);
+
+        // Assert
+        Assert.Equal("PlainProperty", output);
+    }
+
+    [Fact]
+    public async Task DisplaysDisplayAttributeName()
+    {
+        // Arrange
+        var model = new TestModel();
+        var rootComponent = new TestHostComponent
+        {
+            InnerContent = builder =>
+            {
+                builder.OpenComponent<DisplayNameLabel<string>>(0);
+                builder.AddComponentParameter(1, "For", (System.Linq.Expressions.Expression<Func<string>>)(() => model.PropertyWithDisplayAttribute));
+                builder.CloseComponent();
+            }
+        };
+
+        // Act
+        var output = await RenderAndGetOutput(rootComponent);
+
+        // Assert
+        Assert.Equal("Custom Display Name", output);
+    }
+
+    [Fact]
+    public async Task DisplaysDisplayNameAttributeName()
+    {
+        // Arrange
+        var model = new TestModel();
+        var rootComponent = new TestHostComponent
+        {
+            InnerContent = builder =>
+            {
+                builder.OpenComponent<DisplayNameLabel<string>>(0);
+                builder.AddComponentParameter(1, "For", (System.Linq.Expressions.Expression<Func<string>>)(() => model.PropertyWithDisplayNameAttribute));
+                builder.CloseComponent();
+            }
+        };
+
+        // Act
+        var output = await RenderAndGetOutput(rootComponent);
+
+        // Assert
+        Assert.Equal("Custom DisplayName", output);
+    }
+
+    [Fact]
+    public async Task DisplayAttributeTakesPrecedenceOverDisplayNameAttribute()
+    {
+        // Arrange
+        var model = new TestModel();
+        var rootComponent = new TestHostComponent
+        {
+            InnerContent = builder =>
+            {
+                builder.OpenComponent<DisplayNameLabel<string>>(0);
+                builder.AddComponentParameter(1, "For", (System.Linq.Expressions.Expression<Func<string>>)(() => model.PropertyWithBothAttributes));
+                builder.CloseComponent();
+            }
+        };
+
+        // Act
+        var output = await RenderAndGetOutput(rootComponent);
+
+        // Assert
+        // DisplayAttribute should take precedence per MVC conventions
+        Assert.Equal("Display Takes Precedence", output);
+    }
+
+    [Fact]
+    public async Task WorksWithDifferentPropertyTypes()
+    {
+        // Arrange
+        var model = new TestModel();
+        var intComponent = new TestHostComponent
+        {
+            InnerContent = builder =>
+            {
+                builder.OpenComponent<DisplayNameLabel<int>>(0);
+                builder.AddComponentParameter(1, "For", (System.Linq.Expressions.Expression<Func<int>>)(() => model.IntProperty));
+                builder.CloseComponent();
+            }
+        };
+        var dateComponent = new TestHostComponent
+        {
+            InnerContent = builder =>
+            {
+                builder.OpenComponent<DisplayNameLabel<DateTime>>(0);
+                builder.AddComponentParameter(1, "For", (System.Linq.Expressions.Expression<Func<DateTime>>)(() => model.DateProperty));
+                builder.CloseComponent();
+            }
+        };
+
+        // Act
+        var intOutput = await RenderAndGetOutput(intComponent);
+        var dateOutput = await RenderAndGetOutput(dateComponent);
+
+        // Assert
+        Assert.Equal("Integer Value", intOutput);
+        Assert.Equal("Date Value", dateOutput);
+    }
+
+    private static async Task<string> RenderAndGetOutput(TestHostComponent rootComponent)
+    {
+        var testRenderer = new TestRenderer();
+        var componentId = testRenderer.AssignRootComponentId(rootComponent);
+        await testRenderer.RenderRootComponentAsync(componentId);
+
+        var batch = testRenderer.Batches.Single();
+        var displayLabelComponentFrame = batch.ReferenceFrames
+            .First(f => f.FrameType == RenderTree.RenderTreeFrameType.Component &&
+                       f.Component is DisplayNameLabel<string> or DisplayNameLabel<int> or DisplayNameLabel<DateTime>);
+
+        // Find the text content frame within the component
+        var textFrame = batch.ReferenceFrames
+            .First(f => f.FrameType == RenderTree.RenderTreeFrameType.Text);
+
+        return textFrame.TextContent;
+    }
+
+    private class TestHostComponent : ComponentBase
+    {
+        public RenderFragment InnerContent { get; set; }
+
+        protected override void BuildRenderTree(RenderTreeBuilder builder)
+        {
+            InnerContent(builder);
+        }
+    }
+
+    private class TestModel
+    {
+        public string PlainProperty { get; set; } = string.Empty;
+
+        [Display(Name = "Custom Display Name")]
+        public string PropertyWithDisplayAttribute { get; set; } = string.Empty;
+
+        [DisplayName("Custom DisplayName")]
+        public string PropertyWithDisplayNameAttribute { get; set; } = string.Empty;
+
+        [Display(Name = "Display Takes Precedence")]
+        [DisplayName("This Should Not Be Used")]
+        public string PropertyWithBothAttributes { get; set; } = string.Empty;
+
+        [Display(Name = "Integer Value")]
+        public int IntProperty { get; set; }
+
+        [Display(Name = "Date Value")]
+        public DateTime DateProperty { get; set; }
+    }
+}

src/Components/test/E2ETest/Tests/FormsTest.cs

@@ -555,6 +555,28 @@ public void ErrorsFromCompareAttribute()
         Browser.Empty(confirmEmailValidationMessage);
     }
 
+    [Fact]
+    public void DisplayNameLabelReadsAttributesCorrectly()
+    {
+        var appElement = Browser.MountTestComponent<DisplayNameLabelComponent>();
+
+        // Check that DisplayAttribute.Name is displayed
+        var displayNameLabel = appElement.FindElement(By.Id("product-name-label"));
+        Browser.Equal("Product Name", () => displayNameLabel.Text);
+
+        // Check that DisplayNameAttribute is displayed
+        var priceLabel = appElement.FindElement(By.Id("price-label"));
+        Browser.Equal("Unit Price", () => priceLabel.Text);
+
+        // Check that DisplayAttribute takes precedence over DisplayNameAttribute
+        var stockLabel = appElement.FindElement(By.Id("stock-label"));
+        Browser.Equal("Stock Quantity", () => stockLabel.Text);
+
+        // Check fallback to property name when no attributes present
+        var descriptionLabel = appElement.FindElement(By.Id("description-label"));
+        Browser.Equal("Description", () => descriptionLabel.Text);
+    }
+
     [Fact]
     public void InputComponentsCauseContainerToRerenderOnChange()
     {

src/Components/test/testassets/BasicTestApp/FormsTest/DisplayNameLabelComponent.razor

@@ -0,0 +1,30 @@
+@using System.ComponentModel
+@using System.ComponentModel.DataAnnotations
+@using Microsoft.AspNetCore.Components.Forms
+
+<div>
+    <p id="product-name-label"><DisplayNameLabel For="@(() => _product.Name)" /></p>
+    <p id="price-label"><DisplayNameLabel For="@(() => _product.Price)" /></p>
+    <p id="stock-label"><DisplayNameLabel For="@(() => _product.StockQuantity)" /></p>
+    <p id="description-label"><DisplayNameLabel For="@(() => _product.Description)" /></p>
+</div>
+
+@code {
+    private Product _product = new Product();
+
+    class Product
+    {
+        [Display(Name = "Product Name")]
+        public string Name { get; set; } = "Sample";
+
+        [DisplayName("Unit Price")]
+        public decimal Price { get; set; } = 99.99m;
+
+        [Display(Name = "Stock Quantity")]
+        [DisplayName("Stock Amount")] // This should be ignored, Display takes precedence
+        public int StockQuantity { get; set; } = 100;
+
+        // No attributes - should fall back to property name
+        public string Description { get; set; } = "Test";
+    }
+}

src/Components/test/testassets/BasicTestApp/Index.razor

@@ -52,6 +52,7 @@
         <option value="BasicTestApp.MediaTest.VideoTestComponent">Video component tests</option>
         <option value="BasicTestApp.MediaTest.FileDownloadTestComponent">File download component tests</option>
         <option value="BasicTestApp.FormsTest.TypicalValidationComponentUsingExperimentalValidator">Typical validation using experimental validator</option>
+        <option value="BasicTestApp.FormsTest.DisplayNameLabelComponent">DisplayNameLabel component</option>
         <option value="BasicTestApp.FormsTest.ValidationComponentDI">Validation with Dependency Injection</option>
         <option value="BasicTestApp.FormsTest.InputFileComponent">Input file</option>
         <option value="BasicTestApp.FormsTest.InputRangeComponent">Input range</option>