Razor表单中无需JavaScript：基于输入ID填充禁用的患者姓名输入框

架构老林

2026-8-4

可以不使用JavaScript实现该功能

完全可以依赖Blazor的原生能力实现需求，不需要编写任何JavaScript代码。以下是具体的修改方案：

核心思路

给第一个输入框绑定变量，获取用户输入的ID值
定义变量存储患者姓名，通过Blazor的自动UI更新机制同步到第二个禁用输入框
在失焦方法中调用服务获取数据，更新姓名变量即可触发UI刷新

修改后的完整代码

HTML部分

<input type="text" class="form-control" maxlength="8" @bind="StudyId" @onblur="lostFocus" />
<input type="text" class="form-control" id="name" name="Name" value="@PatientName" disabled />

C#代码部分

@code {
    // 绑定第一个输入框的ID值
    private string StudyId { get; set; } = string.Empty;
    // 存储患者姓名，用于填充第二个输入框
    private string PatientName { get; set; } = string.Empty;

    // 推荐使用异步方法避免阻塞UI（实际项目中数据库操作应为异步）
    public async Task lostFocus()
    {
        // 清空旧数据，避免残留
        PatientName = string.Empty;

        // 验证输入不为空
        if (!string.IsNullOrWhiteSpace(StudyId))
        {
            var patient = await PatientService.GetPatientByStudyIDAsync(StudyId);
            if (patient != null)
            {
                PatientName = patient.Name;
            }
        }
    }

    // 如果你的服务只有同步方法（不推荐，会阻塞UI），可以用这个版本
    // public void lostFocus()
    // {
    //     PatientName = string.Empty;
    //     
    //     if (!string.IsNullOrWhiteSpace(StudyId))
    //     {
    //         var patient = PatientService.GetPatientByStudyID(StudyId);
    //         if (patient != null)
    //         {
    //             PatientName = patient.Name;
    //         }
    //     }
    // }
}