Blazor WASM 中的 MudSelect 问题

     2023-03-30     205

关键词:

【中文标题】Blazor WASM 中的 MudSelect 问题【英文标题】:MudSelect Issue in Blazor WASM 【发布时间】:2021-04-22 11:53:17 【问题描述】:

我是 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();
    

【问题讨论】:

你能分享你的@code部分吗? 您的代码显示显示@item.DepartmentName,但您的值引用@(department.DepartmentID)item 是什么?当然你应该显示@department.DepartmentName 【参考方案1】:

您可以直接使用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;
        
    
 

【讨论】:

IdentityServerBuilderConfigurationExtension 中的 Blazor WASM 托管身份验证空引用异常

】IdentityServerBuilderConfigurationExtension中的BlazorWASM托管身份验证空引用异常【英文标题】:BlazorWASMHostedAuthenticationNullReferenceExceptioninIdentityServerBuilderConfigurationExtension【发布时间】:2021-03-0122:23:30【问题描述】:我有一个使用IdentityS... 查看详情

Blazor MudSelect @bind-SelectedValues 到 id 和 value

】BlazorMudSelect@bind-SelectedValues到id和value【英文标题】:BlazorMudSelect@bind-SelectedValuestobothidandvalue【发布时间】:2021-02-2516:38:10【问题描述】:我需要知道所选项目的ID和价值。如以下示例。所以选项应该有一个选定部分的数组。<... 查看详情

具有 ReportViewer 导出功能的 Blazor (Wasm)

】具有ReportViewer导出功能的Blazor(Wasm)【英文标题】:Blazor(Wasm)withReportViewerexport【发布时间】:2021-12-0100:59:11【问题描述】:我正在按照此视频中的说明进行操作:https://www.youtube.com/watch?v=7V0Yb5drLgQ当链接直接放入我剃须刀的组件h... 查看详情

Blazor WASM 路由发布请求到 index.html

】BlazorWASM路由发布请求到index.html【英文标题】:BlazorWASMRoutePostRequesttoindex.html【发布时间】:2021-12-0622:38:00【问题描述】:我有一个使用VisualStudio模板设置的BlazorWASM应用。我在Server项目的Startup.cs文件中的路由如下所示:app.UseBl... 查看详情

Blazor WASM 在组件之间传递值

】BlazorWASM在组件之间传递值【英文标题】:BlazorWASMpassingvaluesbetweencomponents【发布时间】:2021-06-0812:34:24【问题描述】:我从微软提供的默认应用开始。我拿起柜台,在同一页上减少和增加计数。增加和减少是放置在Counter内的子... 查看详情

blazor wasm 在 program.cs Main 中注入 IJSRuntime

】blazorwasm在program.csMain中注入IJSRuntime【英文标题】:blazorwasminjectIJSRuntimeinprogram.csMain【发布时间】:2021-04-1918:31:23【问题描述】:在BlazorWebassembly中,是否可以将program.cs中的IJSRuntime注入Main方法?谢谢【问题讨论】:【参考方案... 查看详情

Blazor WASM - 流畅的验证

】BlazorWASM-流畅的验证【英文标题】:BlazorWASM-FluentValidation【发布时间】:2021-09-1719:49:24【问题描述】:我在自定义验证器中创建了以下规则:publicclassAddInvoiceParameterCommandValidator:AbstractValidator<AddInvoiceParameterCommand>publicAddInvoi... 查看详情

Blazor 客户端 (WASM) 应用程序洞察

】Blazor客户端(WASM)应用程序洞察【英文标题】:BlazorClientSide(WASM)ApplicationInsights【发布时间】:2020-05-1708:48:45【问题描述】:ApplicationInsightsSDK是否适用于BlazorWASM?我正在尝试连接我的应用程序,但它没有发送任何指标。即使在... 查看详情

Blazor WASM 视图模型

】BlazorWASM视图模型【英文标题】:BlazorWASMViewModel【发布时间】:2021-07-3009:50:10【问题描述】:过去一年我做了很多Razor页面,几周前我开始将所有页面转换为我的Blazor服务器应用程序的ViewModel。现在我认为是时候制作一个新的Bl... 查看详情

Blazor WASM 没有达到断点

】BlazorWASM没有达到断点【英文标题】:BlazorWASMdoesn\'thitbreakpoint【发布时间】:2020-08-1115:00:27【问题描述】:我有一个带有版本5程序集的BlazorWASM项目,并尝试根据这篇文章激活调试:https://docs.microsoft.com/en-us/aspnet/core/blazor/debug?v... 查看详情

Blazor Wasm 身份登录/注销事件

】BlazorWasm身份登录/注销事件【英文标题】:BlazorWasmIdentityLogin/Logoutevent【发布时间】:2021-06-0815:06:54【问题描述】:在使用来自Wasm模板的标准身份的.Net5BlazorWASM应用程序中,我想在用户登录(或注销)时执行一些操作。我已经... 查看详情

Blazor Wasm 身份验证

】BlazorWasm身份验证【英文标题】:BlazorWasmAuthentication【发布时间】:2021-11-0515:24:37【问题描述】:我正在尝试构建一个blazorwasm应用程序并尝试使用Jwt令牌进行身份验证。我面临一个有趣的问题。当我登录时,我无法访问具有[Aut... 查看详情

Blazor Wasm 独立发布到 IIS

】BlazorWasm独立发布到IIS【英文标题】:BlazorWasmstandalonepublishtoIIS【发布时间】:2021-03-2209:47:32【问题描述】:要启用IIS压缩,我使用来自以下位置的Web配置:Microsoftdocs我通过web部署将(自包含/浏览器-wasm)发布到IIS,VisualStudio... 查看详情

blazor_wasm之4:路由

Blazor_WASM之4:路由路由模板通过Router组件可在Blazor应用中路由到Razor组件。Router组件在Blazor应用的​​App​​组件中使用。App组件模板如下<RouterAppAssembly="@typeof(Program).Assembly"><FoundContext="routeData"><RouteViewRouteData="@routeDat... 查看详情

Blazor WASM 在线/活跃用户

】BlazorWASM在线/活跃用户【英文标题】:BlazorWASMonline/activeusers【发布时间】:2021-11-1617:34:45【问题描述】:我正在使用BlazorWASM+Asp.NETAPI开发出租车管理应用程序,我想知道我的哪些驱动程序在线/可用,因此我需要了解连接状态... 查看详情

Css 的 Blazor WASM 问题

】Css的BlazorWASM问题【英文标题】:BlazorWASMproblemswithcss【发布时间】:2022-01-1118:22:32【问题描述】:由于某种原因,我的BlazorWASM项目无法正确渲染视频文件。当我运行我的项目时,视频标签的CSS不适用。这是我的视频html标签:&l... 查看详情

Blazor WASM - 如何在布局内更改正文类动态

】BlazorWASM-如何在布局内更改正文类动态【英文标题】:BlazorWASM-howtochangebodyclassdynamicinsideLayout【发布时间】:2020-11-1807:07:28【问题描述】:我有一个Blazor应用程序。在我的Index.html(wwwroot)中,我有以下正文:<bodyclass="vertical-layo... 查看详情

Blazor WASM - 分成多个组件 (MudBlazor)

】BlazorWASM-分成多个组件(MudBlazor)【英文标题】:BlazoWASM-Separateintomultiplecomponents(MudBlazor)【发布时间】:2021-12-0721:38:34【问题描述】:我有一个编辑表单,里面有多个MudTabPanel。问题是,我有很多此类的属性,我们决定分成多个面... 查看详情