如何在Blazor C#中实现双下拉列表？（VB MVC迁移）

原VB代码片段解析 #

你提到的Function(m) m.PhoneNumbers, New With {.class = "pi-item-label"}是ASP.NET MVC Razor视图中的绑定逻辑：

• Function(m) m.PhoneNumbers：这是模型绑定表达式，指定下拉列表的数据源为模型的PhoneNumbers集合
• New With {.class = "pi-item-label"}：创建匿名对象，为生成的下拉列表DOM元素添加CSS类pi-item-label，用于样式控制

C# Blazor 实现方案 #

1. 模型定义 #

先定义对应的数据模型：

public class PhoneModel
{
    public List<PhoneEntry> PhoneNumbers { get; set; } = new();
    public string SelectedPhoneType { get; set; }
    public string SelectedNumber { get; set; }
}

public class PhoneEntry
{
    public string Type { get; set; }
    public string Number { get; set; }
}

2. Razor 组件代码 #

@page "/phone-selector"

<div class="phone-select-wrapper">
    <!-- 电话类型下拉列表 -->
    <select @bind="SelectedPhoneType" class="pi-item-label">
        <option value="">请选择电话类型</option>
        @foreach (var type in PhoneModel.PhoneNumbers.Select(p => p.Type).Distinct())
        {
            <option value="@type">@type</option>
        }
    </select>

    <!-- 对应号码下拉列表（实时过滤） -->
    <select @bind="SelectedNumber" class="pi-item-label" disabled="@string.IsNullOrEmpty(SelectedPhoneType)">
        <option value="">请选择号码</option>
        @foreach (var phone in PhoneModel.PhoneNumbers.Where(p => p.Type == SelectedPhoneType))
        {
            <option value="@phone.Number">@phone.Number</option>
        }
    </select>

    <!-- 操作按钮区域，按需调整布局 -->
    <div class="action-buttons">
        <button class="btn btn-primary">确认选择</button>
        <button class="btn btn-secondary" @onclick="ResetSelection">重置</button>
    </div>
</div>

@code {
    private PhoneModel PhoneModel { get; set; } = new();
    private string SelectedPhoneType { get; set; }
    private string SelectedNumber { get; set; }

    protected override void OnInitialized()
    {
        // 模拟初始化数据源
        PhoneModel.PhoneNumbers = new List<PhoneEntry>
        {
            new() { Type = "办公电话", Number = "010-12345678" },
            new() { Type = "办公电话", Number = "010-87654321" },
            new() { Type = "移动电话", Number = "13800138000" },
            new() { Type = "家庭电话", Number = "021-11112222" }
        };
    }

    private void ResetSelection()
    {
        SelectedPhoneType = string.Empty;
        SelectedNumber = string.Empty;
    }
}

3. 样式调整示例 #

如果需要保持原样式或调整按钮布局，添加以下CSS：

.pi-item-label {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 12px;
}

.action-buttons {
    margin-top: 15px;
}

.action-buttons button {
    margin-right: 8px;
}

核心逻辑说明 #

• Blazor使用@bind实现双向绑定，替代MVC的模型绑定表达式
• 通过Distinct()提取唯一电话类型，生成第一个下拉列表选项
• 第二个下拉列表根据选中的SelectedPhoneType实时过滤对应号码，添加disabled属性优化交互
• 原VB中的CSS类直接通过<select>标签的class属性设置即可

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