如何在MudBlazor对话框列表中实现选中项高亮与选中状态记忆功能？

我来帮你搞定这三个高亮相关的需求，咱们直接修改你的代码就能实现，具体方案如下：

完整修改后的代码 #

<div class="d-flex"> 
    <MudButton OnClick="OpenDialog" Variant="Variant.Filled" Color="Color.Primary" Class="mr-2">Edit</MudButton> 
    <MudTextField @bind-Value="@paymentTerm"></MudTextField> 
</div> 

<MudDialog @bind-IsVisible="visible"> 
    <DialogContent> 
        <MudList Clickable="true" Dense="true" DisableGutters="false"> 
            @foreach (var pytrm in paymentTermList) { 
                <MudListItem 
                    Text="@pytrm" 
                    Selected="@(selectedPaymentTerm == pytrm)"
                    OnClick="@(()=>{
                        paymentTerm = pytrm;
                        selectedPaymentTerm = pytrm;
                        visible = false;
                    })"/> 
            } 
        </MudList> 
    </DialogContent> 
</MudDialog> 

@code{ 
    string paymentTerm; 
    private bool visible;
    // 新增变量：跟踪当前选中的列表项
    string selectedPaymentTerm;
    List<string> paymentTermList = new List<string>() { "Cash", "Credit", "Cheque - Cheque" }; 

    private void OpenDialog() {
        visible = true;
        // 打开对话框时，同步输入框的值到选中项，实现自动高亮
        selectedPaymentTerm = paymentTerm;
    } 
}

功能实现说明 #

咱们逐个拆解三个需求的实现逻辑：

1. 点击列表项时高亮显示
   MudBlazor的MudListItem组件自带Selected属性，我们把它绑定到selectedPaymentTerm == pytrm的判断结果——当当前项和选中项匹配时，组件会自动应用高亮样式。

2. 切换项时取消原高亮、高亮新项
   点击新项时，我们把selectedPaymentTerm更新为当前点击的pytrm：原来的项因为不再和selectedPaymentTerm匹配，Selected属性会自动变为false，高亮状态取消；新项的Selected属性变为true，自动触发高亮。

3. 打开对话框时自动高亮输入框对应项
   在OpenDialog方法里，我们把selectedPaymentTerm赋值为当前paymentTerm的值（也就是输入框里的内容），这样对话框打开时，列表中与输入框值匹配的项会自动触发Selected=true，实现自动高亮。

这样修改后，你的三个需求就都完美实现啦！

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