Blazor InputSelect doesn't work in some cases

Question

I want to use a dropdown list (select) to pass some values later on. So,I am calling .razor components where I have InputSelect.

<EditForm Model="para">

    <Test Text="Para" Value="@para.Selected" Units="@units"></Test> <span>Selected string:  @para.Selected</span>

</EditForm>

<EditForm Model="selectParameters">   
        <TestAsParameter Para="selectParameters"></TestAsParameter> <span>Selected string:  @selectParameters.Value</span>    
</EditForm>
<br />
<button class="btn btn-primary my-2" @onclick="Calculate">Calculate</button>

@code
{
    List<string> units = new List<string>() { "m", "cm", "mm" };
    Parameters para;
    SelectParameters selectParameters { get; set; }

    protected override void OnInitialized()
    {
        // set initial values
        para = new Parameters();
        para.List = units;
        para.Selected = para.List[0];

        selectParameters = new SelectParameters();
        selectParameters.Text = "Select parameters";
        selectParameters.Value = "mm";
        selectParameters.Units = units;
    }

    private void Calculate()
    {

    }

    public class Parameters
    {
        public List<string> List { get; set; }
        public string Selected { get; set; }
    }

When I call this "Test.razor" component it does not bind "para.selected" to selected value, this value is only set at initialization time latter not.

<div class="my-2">

    @if (Text.Length > 0)
    {
        <label class="col-sm-2 col-lg-3">@Text</label>
    }
    <InputSelect @bind-Value="@Value" class="col-2">
        @foreach (var unit in Units)
        {
            <option value="@unit.ToString()">@unit</option>
        }
    </InputSelect>

</div>  

@code {
    [Parameter]
    public string Text { get; set; }

    [Parameter]
    public string Values { get; set; }

    [Parameter]
    public List<string> Units { get; set; } = new List<string>();
}

If I set new object with prameters than the bidning is OK and returned value is as is selected. Call to "TestAsParameter.razor"

<div class="my-2">
    @if (Para.Text.Length > 0)
    {
        <label class="col-sm-2 col-lg-3">@Para.Text</label>
    }
    <InputSelect @bind-Value="@Para.Value" class="col-2">
        @foreach (var unit in Para.Units)
        {
            <option value="@unit">@unit</option>
        }
    </InputSelect>
</div>


@code {

    [Parameter]
    public SelectParameters Para { get; set; }

}

Here is new object

   public class SelectParameters
    {
        public string Text { get; set; }
        public string Value {  get; set;}
        public List<string> Units { get; set; } = new List<string>();
    }

Can someone explain why InputSelect doesn't work in Test.razor but works in TestAsParameter.razor?

enet enet · Accepted Answer · 2020-10-23T14:06:54

<EditForm Model="para">

   <Test Text="Para" Value="@para.Selected" Units="@units"></Test> 
      <span>Selected string:  @para.Selected</span>

Test is a child component nested in an EditForm component. In order for Test to be part of the EditForm's logics, you must pass the Model as a parameter to the Test Component. You can do something like this:

<Test Model="para"></Test>

I've removed the following setting: Value="@para.Selected" Units="@units" as they are superfluous because the model instance para contains these values. Incidentally, the attribute parameter named Value has its counterpart defined in the Test component as Values . No error ??? I know why not, but I won't start confusing you right now. The following is how your Test component should look like:

Test.razor

<div class="my-2">

    <InputSelect @bind-Value="Model.Selected" class="col-2">
        @foreach (var unit in Model.List)
        {
           @if (unit != null && String.Equals(unit, Model.Selected, 
                                   StringComparison.OrdinalIgnoreCase))
           {
               <option selected value="@unit">@unit</option>
           }
           else
           {
               <option value="@unit.ToString()">@unit</option>
           }
        }
    </InputSelect>
 </div>  

@code {
    [Parameter]
    public Parameters Model{ get; set; }
}

And this is how you embed your Test component in the EditForm component:

    <EditForm Model="para">
       <Test Model="para"></Test><span>Selected string:  @para.Selected</span>
    </EditForm>

That is all for the Test component. If you need some enlightment about TestAsParameter.razor, tell me.

Note: I have typed the answer here without testing it...

Blazor InputSelect doesn't work in some cases

1 Answers

Test.razor