Blazor extend InputSelect component

Question

How can I extend the InputSelect blazor component so I can preset values?

I have this enum:

enum EnumStatus {
  Published,
  Unpublished,
  Concept,
  Deleted
}

Now I want to create a InputSelectStatus that I want to bind to a EnumStatus in an EditForm. Depending on the status value I want to display different things.

I got somewhere but I ended up deleting my code because the binding wasn't reflection properly in the form.

For example if the status is Deleted then I only want the input field to be readonly. If any other case I just want it to bind to the element.

Example use case:


<InputSelectStatus @bind-Value="status" />

@code {

  private EnumStatus status;
}

I expect it to either output a <select></select> with preset options, or a <input readonly />. The @bind-Value="" should only accept a type of EnumStatus.

"The @bind-Value="" should only accept a type of EnumStatus" Do you mean that when a user adds a new record in your EditForm, the select should display 'Published' as the first option....... — enet
"I expect it to either output a <select></select> with preset options, or a <input readonly />" This can only be done when you update a given record because in that case the value of the field of type EnumStatus is known. But when you add a new record, the user has to select a value from the select element. Please clarify... — enet

Brian Parker Brian Parker · Accepted Answer · 2021-03-25T17:38:04

Here is a complete example that also supports FocusAsync() from this repo:

namespace OrakTech.Inputs.Components
{
    using System;
    using System.Collections.Generic;
    using System.Diagnostics.CodeAnalysis;
    using System.Linq;
    using Microsoft.AspNetCore.Components;
    using Microsoft.AspNetCore.Components.Forms;
    using Microsoft.AspNetCore.Components.Rendering;

    public class FInputEnum<TValue> : InputBase<TValue>, IFocusInput
    {

        public ElementReference Element { get; set; }

        [Parameter]
#pragma warning disable CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
        public RenderFragment<TValue>? ChildContent { get; set; }
#pragma warning restore CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.

        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenElement(0, "select");
            builder.AddMultipleAttributes(1, AdditionalAttributes);
            builder.AddAttribute(2, "class", CssClass);
            builder.AddAttribute(3, "value", BindConverter.FormatValue(CurrentValueAsString));
#pragma warning disable CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
            builder.AddAttribute(4, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
#pragma warning restore CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
            if (ChildContent is not null)
            {
                foreach (var enumValue in enumValues)
                {

                    builder.AddContent(1, ChildContent(enumValue));
                }
            }
            else
            {
                foreach (var enumValue in enumValues)
                {
                    builder.OpenElement(1, "option");
                    builder.AddAttribute(2, "value", enumValue);
                    builder.AddContent(3, enumValue);
                    builder.CloseElement();
                }
            }
            builder.AddElementReferenceCapture(5, (__ref) => { Element = __ref; });
            builder.CloseElement();
        }

        IReadOnlyList<TValue> enumValues => Enum.GetValues(typeof(TValue)).Cast<TValue>().ToArray();

        protected override bool TryParseValueFromString(
                string value,
                [MaybeNullWhen(false)] out TValue result,
                [NotNullWhen(false)] out string validationErrorMessage)
        {
            validationErrorMessage = "";
            var parseOk = Enum.TryParse(typeof(TValue), value, out var parseResult);
            if (parseOk)
            {
                result = (TValue)parseResult;
                return parseOk;
            }
            else
            {
                validationErrorMessage = $"Failed to pass value {value}";
                result = default;
                return false;
            }
        }
    }
}

Blazor extend InputSelect component

1 Answers