基于下拉选择框值自动更新文本框内容的Razor组件实现方案

需求说明 #

使用Razor组件开发学生注册详情页面，需实现选择月份后自动填充对应学期文本框的功能，例如选择月份1（一月）时，学期文本框自动显示对应的学期值（如1）。

现有模型代码 #

StudentDetails 模型 #

public partial class StudentDetails
{
    public int StudentNumber { get; set; }
    public int StudentAge { get; set; }
    public int Month { get; set; }
    public int Semester { get; set; }
    public string FName { get; set; }
}

Reg 模型 #

public partial class Reg
{
    public int Month { get; set; }
    public int Semester { get; set; }
}

现有下拉选择框代码 #

<MudSelect @bind-Value="student.Month" For="@(()=>Student.Month)" T="int"  Label="学生入学月份" AnchorOrigin="Origin.BottomCenter" Required="true">
    @foreach (var item in num)
    {
        <MudSelectItem T="int" Value="@item.Month">@item.Month</MudSelectItem>
    }  
</MudSelect>

实现方案 #

方法1：通过Reg数据匹配对应学期 #

由于你已经有Reg模型存储月份与学期的对应关系，且下拉框数据源为num（推测是Reg集合），可在月份值变更时，从num中匹配对应学期并赋值：

1. 修改下拉框添加值变更事件：

<MudSelect @bind-Value="student.Month" 
           ValueChanged="OnMonthChanged"
           For="@(()=>Student.Month)" 
           T="int"  
           Label="学生入学月份" 
           AnchorOrigin="Origin.BottomCenter" 
           Required="true">
    @foreach (var item in num)
    {
        <MudSelectItem T="int" Value="@item.Month">@item.Month</MudSelectItem>
    }  
</MudSelect>

<!-- 学期文本框示例 -->
<MudTextField @bind-Value="student.Semester" T="int" Label="学期" Disabled="true" />

2. 在组件代码块中实现事件处理方法：

@code {
    private StudentDetails student = new();
    private List<Reg> num = new(); // 你的Reg数据集合

    private void OnMonthChanged(int selectedMonth)
    {
        // 从num中查找对应月份的学期
        var regItem = num.FirstOrDefault(r => r.Month == selectedMonth);
        if (regItem != null)
        {
            student.Semester = regItem.Semester;
        }
        // 无匹配项时可清空或设置默认值
        else
        {
            student.Semester = 0;
        }
    }
}

方法2：基于固定规则计算学期 #

如果月份与学期的对应是固定逻辑（比如1-6月为学期1，7-12月为学期2），可直接通过逻辑计算：

private void OnMonthChanged(int selectedMonth)
{
    // 示例规则：1-6月对应学期1，7-12月对应学期2
    student.Semester = selectedMonth <= 6 ? 1 : 2;
}

根据实际业务需求选择对应方法即可实现自动填充功能。

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