如何在Blazor中重置DropDownList至初始选项（仅用C#）

要实现点击按钮将DropDownList重置到初始值（ID 1的Normal Role），你只需通过状态变量控制选中状态，利用Blazor的自动渲染机制即可完成，无需手动强制重建控件。具体修改如下：

关键修改点 #

1. 同步更新选中状态变量 #

在OnSelChange方法中，除了设置SelectedRole，还要同步更新myroleID，确保下拉框的选中状态与变量保持一致：

public void OnSelChange(string role)
{
    SelectedRole = roleList.FirstOrDefault(x => x.RoleId.ToString() == role);
    // 同步更新myroleID，让下拉框选中状态和变量绑定
    if (SelectedRole != null)
    {
        myroleID = SelectedRole.RoleId;
    }
}

2. 实现重置逻辑 #

在Reset方法中，将myroleID重置为初始值1，并找到对应的角色对象赋值给SelectedRole：

public void Reset()
{
    myroleID = 1;
    SelectedRole = roleList.FirstOrDefault(x => x.RoleId == myroleID);
}

修改后的完整代码 #

@page "/"

<h3>DropDownList - ComboBox</h3>

<form>
    <select class="form-control col-6" @onchange="@(x => OnSelChange(x.Value.ToString()))">
        <option value="" disabled>--SelectName--</option>
        @foreach (var role in roleList)
        {
            @if (role.RoleId == myroleID)
            {
                <option value=@role.RoleId selected>@role.Name</option>
            }
            else
            {
                <option value=@role.RoleId>@role.Name</option>
            }
        }
    </select>

    @if (SelectedRole != null)
    {
        <p>Sel Role-Obj.Name: @SelectedRole.Name @SelectedRole.RoleId</p>
    }

    <button type="button" @onclick="@Reset">Reset DropDownList to initial value</button>
</form>

@code {
    public Role SelectedRole;
    public List<Role> roleList = new List<Role>();
    public int myroleID;

    public class Role
    {
        public int RoleId { get; set; }
        public string Name { get; set; }
        public Role(string name, int id)
        {
            RoleId = id;
            Name = name;
        }
    }

    protected override void OnInitialized()
    {
        Role normal = new Role("Normal",1);
        roleList.Add(normal);

        Role Admin = new Role("Admin",2);
        roleList.Add(Admin);

        Role Super = new Role("Super",3);
        roleList.Add(Super);

        myroleID = 1;
        // 初始化时设置默认选中的角色
        SelectedRole = roleList.FirstOrDefault(x => x.RoleId == myroleID);
    }

    public void OnSelChange(string role)
    {
        SelectedRole = roleList.FirstOrDefault(x => x.RoleId.ToString() == role);
        if (SelectedRole != null)
        {
            myroleID = SelectedRole.RoleId;
        }
    }

    public void Reset()
    {
        myroleID = 1;
        SelectedRole = roleList.FirstOrDefault(x => x.RoleId == myroleID);
    }   
}

原理说明 #

Blazor基于组件状态自动管理渲染，当myroleID和SelectedRole的值发生变化时，组件会重新生成下拉框的选项元素，其中符合role.RoleId == myroleID的选项会自动加上selected属性，从而回到初始选中状态，完全不需要使用JavaScript或手动强制重建控件。

内容的提问来源于stack exchange，提问作者Lisa