如何无需点击提交按钮更新ASP.NET MVC中最后工作日输入值？

需求说明 #

开发ASP.NET MVC项目时，需要在**最后工作日（LastWorkingDate）输入值发生变更时，根据申请编号（Request No）**异步更新该字段，计划通过jQuery Ajax调用Resignation控制器的Edit Action，传递包含Request No和LastWorkingDate的对象。

后端Edit Action 完善 #

补充Edit Action的实际更新逻辑，确保接收请求后完成数据库操作并返回响应：

// 需提前注入项目的DbContext，示例中为private readonly YourDbContext _db;
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<JsonResult> Edit(ResignationRequester req)
{
    if (ModelState.IsValid)
    {
        try
        {
            // 根据RequestNo查询对应离职申请记录
            var resignation = await _db.Resignations.FirstOrDefaultAsync(r => r.RequestNo == req.RequestNo);
            if (resignation != null)
            {
                // 更新最后工作日字段
                resignation.LastWorkingDate = req.LastWorkingDate;
                await _db.SaveChangesAsync();
                return Json(new { success = true, message = "最后工作日更新成功" });
            }
            return Json(new { success = false, message = "未找到对应的申请记录" });
        }
        catch (Exception ex)
        {
            // 可在此添加日志记录逻辑
            return Json(new { success = false, message = "更新失败：" + ex.Message });
        }
    }
    // 模型验证失败时返回错误信息
    var errors = ModelState.Values.SelectMany(v => v.Errors.Select(e => e.ErrorMessage));
    return Json(new { success = false, message = "输入验证失败：" + string.Join("；", errors) });
}

注：需根据项目实际情况调整DbContext及数据集名称，确保实体包含RequestNo和LastWorkingDate字段。

前端jQuery Ajax 实现 #

在Razor视图中添加脚本，监听LastWorkingDate输入框的变更事件，触发异步请求：

1. 确保页面引入jQuery（若布局页已包含可跳过）：

<script src="~/Scripts/jquery-3.6.0.min.js"></script>

2. 添加自定义处理脚本：

<script>
$(function() {
    // 监听LastWorkingDate输入框的变更事件
    $('#LastWorkingDate').on('change', function() {
        // 获取申请编号
        var requestNo = $('#RequestNo').text().trim();
        // 获取新的最后工作日值
        var lastWorkingDate = $(this).val();
        
        // 构造请求参数
        var data = {
            RequestNo: parseInt(requestNo),
            LastWorkingDate: lastWorkingDate
        };
        
        // 获取防伪令牌，匹配后端的[ValidateAntiForgeryToken]验证
        var token = $('input[name="__RequestVerificationToken"]').val();
        
        // 发送Ajax请求
        $.ajax({
            url: '@Url.Action("Edit", "Resignation")',
            type: 'POST',
            data: JSON.stringify(data),
            contentType: 'application/json; charset=utf-8',
            headers: {
                'RequestVerificationToken': token
            },
            success: function(response) {
                response.success ? alert(response.message) : alert('错误：' + response.message);
                // 实际项目可替换alert为更友好的提示组件（如Bootstrap Toast）
            },
            error: function(xhr, status, error) {
                alert('请求失败：' + error);
            }
        });
    });
});
</script>

视图适配说明 #

• @Html.EditorFor会自动生成与属性名一致的ID（即LastWorkingDate），因此jQuery选择器$('#LastWorkingDate')可正确定位输入框。
• 申请编号容器ID为RequestNo，通过$('#RequestNo').text()可直接获取对应值。
• 若页面未自动生成防伪令牌，需在视图中添加@Html.AntiForgeryToken()。

额外注意事项 #

• 日期格式：后端模型配置了yyyy-MM-dd的格式，前端输入框返回的日期格式与后端要求一致，无需额外转换。
• 错误处理：可根据项目UI规范替换alert为更美观的提示方式。

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