点击Save Changes后模态框不关闭及appointmentDate数据库更新问题

一、先解决模态框无法关闭的问题 #

你的closeModal函数选择器缺失预约ID，导致无法定位目标模态框，修改如下：

function closeModal(appointmentId) {
    $('#rescheduleModal-' + appointmentId).modal('hide');
}

二、添加后端更新接口 #

在控制器中新增处理重排请求的Action，实现数据库更新逻辑：

[HttpPost]
public async Task<IActionResult> Reschedule(int id, [FromForm] string newDate)
{
    var appointment = await BabyPediaContext.Appointments.FindAsync(id);
    if (appointment == null)
    {
        return NotFound();
    }
    
    if (DateTime.TryParse(newDate, out DateTime parsedDate))
    {
        appointment.AppointmentDate = parsedDate.ToString("yyyy-MM-dd"); // 匹配数据库日期格式
        await BabyPediaContext.SaveChangesAsync();
        return Ok(new { success = true, newDate = appointment.AppointmentDate });
    }
    
    return BadRequest(new { success = false, message = "Invalid date format" });
}

三、完善前端Save按钮逻辑 #

修改点击事件，添加AJAX请求完成全流程：

$(document).ready(function () {
    @foreach (var i in appointmentList)
    {
        <text>
        $('#saveChangesButton-@i.Id').on('click', function () {
            const appointmentId = '@i.Id';
            const newDate = $('#birthdate-id-' + appointmentId).val();
            
            if (!newDate) {
                alert('Please select a valid date');
                return;
            }
            
            $.post('/pediaappointment/reschedule/' + appointmentId, { newDate: newDate }, function(response) {
                if (response.success) {
                    $('#rescheduleModal-' + appointmentId).modal('hide');
                    // 更新页面上的日期显示
                    $('#date-time-' + appointmentId).text(response.newDate + ' : @i.AppointmentTime');
                    alert('Appointment rescheduled successfully');
                } else {
                    alert('Failed to reschedule: ' + response.message);
                }
            }).fail(function() {
                alert('An error occurred while rescheduling');
            });
        });
        </text>
    }
});

四、额外优化点 #

• 移除嵌套<script>标签：原代码在$(document).ready中循环生成<script>会导致语法错误，改用<text>包裹JS代码
• 确保日期格式统一：前端传递的日期格式要和后端解析逻辑匹配，避免解析失败
• 检查JS加载顺序：保证jQuery先于Bootstrap JS加载，原代码中Popper.js版本与Bootstrap 4.5.2兼容，无需调整

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