Blazor supports DisplayName for models

src/Components/Web/src/Forms/DisplayName.cs

@@ -0,0 +1,112 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using System.Collections.Concurrent;
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+using System.Linq.Expressions;
+using System.Reflection;
+using Microsoft.AspNetCore.Components.HotReload;
+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 DisplayName<TValue> : IComponent
+{
+    private static readonly ConcurrentDictionary<MemberInfo, string> _displayNameCache = new();
+
+    private RenderHandle _renderHandle;
+    private string? _displayName;
+
+    /// <summary>
+    /// Specifies the field for which the display name should be shown.
+    /// </summary>
+    [Parameter, EditorRequired]
+    public Expression<Func<TValue>>? For { get; set; }
+
+    static DisplayName()
+    {
+        if (HotReloadManager.Default.MetadataUpdateSupported)
+        {
+            HotReloadManager.Default.OnDeltaApplied += ClearCache;
+        }
+    }
+
+    /// <inheritdoc />
+    void IComponent.Attach(RenderHandle renderHandle)
+    {
+        _renderHandle = renderHandle;
+    }
+
+    /// <inheritdoc />
+    Task IComponent.SetParametersAsync(ParameterView parameters)
+    {
+        parameters.SetParameterProperties(this);
+
+        if (For is null)
+        {
+            throw new InvalidOperationException($"{GetType()} requires a value for the " +
+                $"{nameof(For)} parameter.");
+        }
+
+        var newDisplayName = GetDisplayName(For);
+
+        // Only re-render if the display name string has actually changed
+        if (newDisplayName != _displayName)
+        {
+            _displayName = newDisplayName;
+            _renderHandle.Render(BuildRenderTree);
+        }
+
+        return Task.CompletedTask;
+    }
+
+    private void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        builder.AddContent(0, _displayName);
+    }
+
+    private static string GetDisplayName(Expression<Func<TValue>> expression)
+    {
+        if (expression.Body is not MemberExpression memberExpression)
+        {
+            throw new ArgumentException(
+                $"The provided expression contains a {expression.Body.GetType().Name} which is not supported. " +
+                $"{nameof(DisplayName<TValue>)} only supports simple member accessors (fields, properties) of an object.",
+                nameof(expression));
+        }
+
+        var member = memberExpression.Member;
+
+        return _displayNameCache.GetOrAdd(member, static m =>
+        {
+            var displayAttribute = m.GetCustomAttribute<DisplayAttribute>();
+            if (displayAttribute is not null)
+            {
+                var name = displayAttribute.GetName();
+                if (name is not null)
+                {
+                    return name;
+                }
+            }
+
+            var displayNameAttribute = m.GetCustomAttribute<DisplayNameAttribute>();
+            if (displayNameAttribute?.DisplayName is not null)
+            {
+                return displayNameAttribute.DisplayName;
+            }
+
+            return m.Name;
+        });
+    }
+
+    private static void ClearCache()
+    {
+        _displayNameCache.Clear();
+    }
+}

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

@@ -40,3 +40,7 @@ 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.DisplayName<TValue>
+Microsoft.AspNetCore.Components.Forms.DisplayName<TValue>.DisplayName() -> void
+Microsoft.AspNetCore.Components.Forms.DisplayName<TValue>.For.get -> System.Linq.Expressions.Expression<System.Func<TValue>!>?
+Microsoft.AspNetCore.Components.Forms.DisplayName<TValue>.For.set -> void

src/Components/Web/test/Forms/DisplayNameTest.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 DisplayNameTest
+{
+    [Fact]
+    public async Task ThrowsIfNoForParameterProvided()
+    {
+        // Arrange
+        var rootComponent = new TestHostComponent
+        {
+            InnerContent = builder =>
+            {
+                builder.OpenComponent<DisplayName<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<DisplayName<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<DisplayName<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<DisplayName<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<DisplayName<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<DisplayName<int>>(0);
+                builder.AddComponentParameter(1, "For", (System.Linq.Expressions.Expression<Func<int>>)(() => model.IntProperty));
+                builder.CloseComponent();
+            }
+        };
+        var dateComponent = new TestHostComponent
+        {
+            InnerContent = builder =>
+            {
+                builder.OpenComponent<DisplayName<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 DisplayName<string> or DisplayName<int> or DisplayName<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 DisplayNameReadsAttributesCorrectly()
+    {
+        var appElement = Browser.MountTestComponent<DisplayNameComponent>();
+
+        // 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/DisplayNameComponent.razor

@@ -0,0 +1,30 @@
+@using System.ComponentModel
+@using System.ComponentModel.DataAnnotations
+@using Microsoft.AspNetCore.Components.Forms
+
+<div>
+    <p id="product-name-label"><DisplayName For="@(() => _product.Name)" /></p>
+    <p id="price-label"><DisplayName For="@(() => _product.Price)" /></p>
+    <p id="stock-label"><DisplayName For="@(() => _product.StockQuantity)" /></p>
+    <p id="description-label"><DisplayName 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

@@ -27,6 +27,7 @@
         <option value="BasicTestApp.CustomElementsComponent">Custom elements</option>
         <option value="BasicTestApp.DataDashComponent">data-* attribute rendering</option>
         <option value="BasicTestApp.DispatchingComponent">Dispatching to sync context</option>
+        <option value="BasicTestApp.FormsTest.DisplayNameComponent">DisplayName component</option>
         <option value="BasicTestApp.DuplicateAttributesComponent">Duplicate attributes</option>
         <option value="BasicTestApp.DynamicComponentRendering">DynamicComponent rendering</option>
         <option value="BasicTestApp.ElementFocusComponent">Element focus component</option>