首页 > 解决方案 > Blazor WASM 中的 MudSelect 问题

问题描述

我是 Blazor WASM 的新手,我正在开发一个使用 MudBlazor 的项目。但是,我对 MudSelect 有疑问。我想在 MudSelect 中显示部门名称。但是,我需要绑定DepartmentID. 下面的代码部分工作,但当我想编辑个人时,只显示DepartmentID. 它没有转换为部门名称,但是当我单击屏幕时它会转动DepatmentName

我在哪里做错了?提前致谢。

<MudSelect @bind-Value="personal.DepartmentID" Label="Select Department"  Variant="Variant.Outlined"  OffsetY="true">

    @foreach (var department in departments){
          <MudSelectItem  Value="@(department.DepartmentID)">@item.DepartmentName</MudSelectItem>
    }
</MudSelect>       

@代码部分

@code{
     [Parameter] public List<Department> departments { get; set; } = new List<Department>();

      protected async override Task OnInitializedAsync()
      {
            departments = await departmentRepository.GetDepartment();
      }
}

存储库

    public async Task<List<Department>> GetDepartment()
    {
        var response = await httpService.Get<List<Department>>(url);
        
        if (!response.Success)
        {
            throw new ApplicationException(await response.GetBody());
        }

        return response.Response;   
    }

控制器

   [HttpGet]
    public async Task<ActionResult<List<Department>>> Get() 
    {
        return  await context.Departments.ToListAsync();
    }

标签: c#blazorblazor-webassembly

解决方案


您可以直接Department用作 MudSelect 的值。您需要做的就是确保 Department 类具有合适的相等性覆盖。我创建了一个工作演示,您可以在以下位置在线执行:https ://try.mudblazor.com/snippet/cEwFFmbgRxLbvVQg

<MudSelect @bind-Value="_selectedDepartment" Label="Select Department"  Variant="Variant.Outlined"  OffsetY="true">

    @foreach (var department in departments){
          <MudSelectItem  Value="@department">@department.DepartmentName</MudSelectItem>
    }
</MudSelect>
<br/><br/>
Selected Department: @_selectedDepartment?.DepartmentName

@code {
    Department _selectedDepartment;

    IEnumerable<Department> departments = new List<Department>()
    {
        new Department() {DepartmentID = 1, DepartmentName = "Biology"},
        new Department() {DepartmentID = 2, DepartmentName = "Physics"},
        new Department() {DepartmentID = 3, DepartmentName = "Chemistry"},
        new Department() {DepartmentID = 4, DepartmentName = "Mathematics"},
        new Department() {DepartmentID = 5, DepartmentName = "Law"},
        new Department() {DepartmentID = 6, DepartmentName = "Sociology"}
    };

    public class Department
    {
        public int DepartmentID { get; set; }
        public string DepartmentName { get; set; }
        public override bool Equals(object o) {
            var other = o as Department;
            return other?.DepartmentID==DepartmentID;
        }
        public override int GetHashCode() => DepartmentID.GetHashCode();        
        public override string ToString() {
            return DepartmentName;
        }
    }
} 

推荐阅读