.NET Core MVC Razor中Select标签助手 onChange事件数据获取方案

要实现无刷新获取对应医生的诊费并填充到文本框，需要结合AJAX异步请求和后端API接口完成，以下是具体实现步骤：

1. 修正Razor视图的Select标签语法错误 #

原代码中new { onchange = "return ToggleViewItems();" }存在语法问题，修正后的视图代码如下：

<div class="form-group row">
    <label asp-for="@Model.addAppointmentInQueue.Doctor" class="col-md-3 col-form-label-lg"></label>
    <div class="col-md-9">
        <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <select id="lstdoctor" 
                    asp-for="@Model.addAppointmentInQueue.Doctor"
                    asp-items="@Model.addAppointmentInQueue.doctorList"  
                    @onchange="ToggleViewItems()"
                    class="form-control form-control-lg selectpicker">
                <option value="">请选择医生</option>
            </select>
        </div>
    </div>
</div>
<div class="col-md-6">
    <div class="form-group row">
        <label asp-for="@Model.addAppointmentInQueue.consultationCharges" class="col-md-3 col-form-label-lg"></label>                  
        <div class="col-md-9">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input asp-for="@Model.addAppointmentInQueue.consultationCharges" 
                       class="form-control" 
                       type="text" 
                       readonly> <!-- 设置只读防止手动修改 -->
            </div>
        </div>
    </div>
</div>

说明：给默认选项添加value=""避免传递无效值；文本框设为只读更符合业务逻辑

2. 后端添加API接口 #

在对应的控制器中添加异步方法，负责从数据库查询对应医生的诊费：

[HttpGet]
public async Task<IActionResult> GetConsultationCharges(int doctorId)
{
    // 替换为你的数据库查询逻辑，比如通过仓储或DbContext获取数据
    var consultationCharges = await _dbContext.Doctors
        .Where(d => d.Id == doctorId)
        .Select(d => d.ConsultationCharges)
        .FirstOrDefaultAsync();
    
    return Ok(new { Charges = consultationCharges });
}

确保已注入DbContext或数据仓储实例

3. 编写前端AJAX请求函数 #

在视图底部添加JavaScript代码，实现下拉选择后的异步请求和文本框更新：

<script>
function ToggleViewItems() {
    const doctorId = document.getElementById('lstdoctor').value;
    const chargesInput = document.getElementById('@Html.IdFor(m => m.addAppointmentInQueue.consultationCharges)');

    // 未选择医生时清空文本框
    if (!doctorId) {
        chargesInput.value = '';
        return;
    }

    // 发送异步请求
    fetch(`/你的控制器名称/GetConsultationCharges?doctorId=${doctorId}`)
        .then(response => response.json())
        .then(data => {
            chargesInput.value = data.Charges;
        })
        .catch(error => {
            console.error('获取诊费失败:', error);
        });
}
</script>

注意替换你的控制器名称为实际控制器类名；使用@Html.IdFor避免硬编码ID，适配模型验证自动生成的元素ID

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