Blazor:使用onchange将初始值设置为select而不绑定

时间:2019-12-22 12:16:10

标签: c# .net blazor

我们知道,使用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());

        //...
    }
}

谢谢

2 个答案:

答案 0 :(得分:1)

在HTML中,“选定”是选项的属性。 Blazor允许您使用布尔值来切换它:

<option value="@i" selected="@(i==year)">@i</option>

其余代码可以保持原样。

答案 1 :(得分:0)

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

请注意,为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

这是因为编译器添加了更改事件处理程序,以将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; }
    }
}