Use Model Display name for Blazor Validation message from Custom InputSelect

Question

As we know Blazor doesn't support Int option select for <InputSelect> (but support string & Enum) and we get the following error message:

Error: System.InvalidOperationException: Microsoft.AspNetCore.Components.Forms.InputSelect1[System.Nullable1[System.Int32]] does not support the type 'System.Nullable`1[System.Int32]'.

Therefore, I write a <CustomInputSelect>:

public class CustomInputSelect<TValue> : InputSelect<TValue>
    {
        protected override bool TryParseValueFromString(string value, out TValue result, out string validationErrorMessage)
        {
            if (typeof(TValue) == typeof(int?))
            {
                if (int.TryParse(value, out var resultInt))
                {
                    result = (TValue)(object)resultInt;
                    validationErrorMessage = null;
                    return true;
                }
                else
                {
                    result = default;
                    validationErrorMessage = $"The {FieldIdentifier.FieldName} field is Required.";
                    return false;
                }
            }
            else
            {
                return base.TryParseValueFromString(value, out result, out validationErrorMessage);
            }
        }
    }

I have the following Model:

public class Risk : ICloneable
    {
        /// <summary>
        /// Associated Legal Entity of the risk
        /// </summary>
        [Required]
        [Display(Name = "Legal Entity")]
        public int? LegalEntityId { get; set; }

        /// <summary>
        /// Associated Legal Entity Short Code of the risk
        /// </summary>
        [Required]
        [Display(Name = "Legal Entity Short Code")]
        public string LegalEntityShortCode { get; set; }
}

The following Blazor page:

    <CustomInputSelect id="ddlLegalEntity" class="form-control InputTextHeigth" @bind-Value="ShowRisk.LegalEntityId">
            @foreach (var option in LEList)
            {
                <option value="@option.Id">
                 @option.OptionName
                </option>
            }
    </CustomInputSelect>
<div class="cs-col-6">
    <ValidationMessage class="form-control" For="@(() => ShowRisk.LegalEntityId)" />
</div>

Everything is working fine. I can use int value on Option list. However, The validation error is generating as Field name instead of Display name. So I getting "The LegalEntityId field is Required." instead of "The Legal Entity field is Required".

From the first snapshot of the code, the message is generated:

validationErrorMessage = $"The {FieldIdentifier.FieldName} field is Required.";

How can I display Model Display name instead of FieldName?

github.com/dotnet/aspnetcore/issues/11414 This may have been resolved? — Alex
– Alex, Commented Feb 6, 2021 at 19:12

Bjorn De Rijcke · Accepted Answer · 2021-03-01 10:37:30Z

3

Your CustomInputSelect inherits from InputSelect. InputSelect inherits from InputBase. This abstract class has a property called DisplayName.

It should be filled by either setting it manually in the razor file or via a Display attribute on your view model.

<InputDate @bind-Value="@moveOutViewModel.MoveOutDate" DisplayName="@localize["moveout_step_date_legend"]" />

or

[Display(Name = "address_street", ResourceType = typeof(Translations))]
public string Street { get; set; }

In your custom select class, you can use the following code:

if (int.TryParse(value, out var resultInt))
{
    result = (TValue)(object)resultInt;
    validationErrorMessage = null;
    return true;
}
else
{
    result = default;
    validationErrorMessage = $"The '{this.DisplayName ?? this.FieldIdentifier.FieldName}' field is required.";
    return false;
}

edited Mar 1, 2021 at 10:37

answered Feb 25, 2021 at 10:16

Bjorn De Rijcke

70310 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Shuvra Over a year ago

Hi Bjorn, Thanks for the reply. Where you get the 'input' variable from? Looks like your solution is very close but can't really work how can I get this input variable??

Bjorn De Rijcke Over a year ago

@Shuvra I've changed the code. The original code was an extension method, hence the use of input. You can use this.DisplayName or simply DisplayName when you inherit from InputSelect.

Shuvra Over a year ago

Can't see the DisplayName property in InputBase. My Assembley: Assembly Microsoft.AspNetCore.Components.Web, Version=3.1.6.0. am I using an older version

Bjorn De Rijcke Over a year ago

@Shuvra I see. We are using version 5.0.3 of the "Microsoft.AspNetCore.Components.Forms" package. However, to use this version you need to target .Net 5.

Shuvra Over a year ago

thank you mate. you answer was very useful.

Collectives™ on Stack Overflow

Use Model Display name for Blazor Validation message from Custom InputSelect

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related