选择控制集初始值

Question

我们知道InputSelect 不能同时使用@bind-value 和@onchange...

但是如果我们使用后者（使用select 而不是InputSelect），我们如何设置与第一个不同的初始值？ （例如，在这个设置为 2018 年的样本中，变量的值）

类似if (i == month) => selected

<select @onchange="ChangeYear">
    @for (int i = 2015; i < DateTime.Now.Year + 1; i++)
    {
        <option value="@i">@i</option>
    }
</select>

@code {

    int year = 2018;

    void ChangeYear(ChangeEventArgs e)
    {
        int year = Convert.ToInt32(e.Value.ToString());

        //...
    }
}

Answer 1

您可以通过多种方式实现它，例如，定义一个绑定到 select 元素的 value 属性的局部变量 SelectedYear，以及一个更新 SelectedYear 的更改事件。这实际上创建了一个双向数据绑定。

请注意，SelectedYear 的默认值是 2018

<select value="@SelectedYear" @onchange="ChangeYear">
    @for (int i = 2015; i < DateTime.Now.Year + 1; i++)
    {
        <option value="@i">@i</option>
    }
</select>

<p>@SelectedYear</p>

@code
 {
    private int SelectedYear { get; set; } = 2018;

    void ChangeYear(ChangeEventArgs e)
    {
        SelectedYear = Convert.ToInt32(e.Value.ToString());

    }
}

我们知道使用 InputSelect 我们不能同时使用 @bind-value 和 @onchange

这是因为编译器添加了change事件处理函数来更新InputSelect组件的Value（注意是@bind-Value，而不是@bind-value）属性为新选择的值。这就是为什么你可以做这样的事情：

<p>@SelectedYear</p>

<EditForm Model="@employees">
    <DataAnnotationsValidator />
     <div>   
        <InputSelect @bind-Value="SelectedYear" Id="SelectedYear" Class="form-control">
            @for (int i = 2015; i < DateTime.Now.Year + 1; i++)
            {
                <option value="@i">@i</option>
            }
        </InputSelect>


    </div>
    <button type="submit">Ok</button>

</EditForm>

@code
 {
    private string SelectedYear { get; set; } = "2018";

    public List<Employee> employees = new List<Employee>();


    public class Employee
    {
        public int YearBorn { get; set; }
        public string Name { get; set; }
    }
}