ASP.NET MVC中如何通过JavaScript Ajax基于Request No自动更新Reason

第一步：修正HTML的ID冲突问题 #

原代码中包裹文本框的div与文本框本身的ID均为Reason，会导致JS获取元素错误，需修改外层容器ID：

@model HR.WorkforceRequisition.Models.ResignationRequester
<table style="border: 1px solid black;width:100%;">
     <tr>
         <td style="width: 50%; font-weight: bold; padding-top: 10px;">
             <div class="form-group hover">
                 @Html.LabelFor(model => model.RequestNo, htmlAttributes: new { @class = "control-label col-md-5" })
                 <div class="col-md-7" id="RequestNo">
                     @Model.RequestNo
                 </div>
             </div>
         </td>
         <td>
<div class="col-md-7" id="ReasonContainer"> <!-- 修改容器ID，避免与文本框冲突 -->
                @Html.TextAreaFor(model => model.Reason, new { id = "Reason", @class = "form-control" })
</div>
        </td>
     </tr>
</table>
@Html.AntiForgeryToken() <!-- 添加CSRF令牌，MVC POST请求必须验证 -->

第二步：完整的自动保存JavaScript代码 #

使用input事件监听输入，加入防抖逻辑避免频繁请求，通过AJAX调用控制器接口：

<script type="text/javascript">
// 防抖函数：停止输入500ms后再执行保存，减少服务器请求
function debounce(func, delay) {
    let timeoutId;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, arguments), delay);
    };
}

// 核心保存逻辑
function saveReason() {
    const requestNo = document.getElementById("RequestNo").innerHTML.trim();
    const reason = document.getElementById("Reason").value.trim(); // 文本框内容用value而非innerHTML

    // 空内容不提交
    if (!reason || !requestNo) return;

    // 发送POST请求
    fetch('/Resignation/Edit', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        },
        body: JSON.stringify({
            RequestNo: parseInt(requestNo),
            Reason: reason
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            console.log("保存成功");
            // 可在此添加前端提示，比如：alert("保存成功")
        } else {
            console.error("保存失败：", data.message);
        }
    })
    .catch(error => {
        console.error("请求异常：", error);
    });
}

// 绑定文本框输入事件，加入防抖
document.getElementById("Reason").addEventListener('input', debounce(saveReason, 500));
</script>

第三步：修正控制器的Edit方法 #

添加HttpPost特性，完善响应状态设置，确保请求能正常处理：

[HttpPost] // 明确只接受POST请求
public JsonResult Edit(ResignationRequester req)
{
    dynamic responseData = new ExpandoObject();
    responseData.success = false;
    responseData.message = "";

    try
    {
        // 执行数据库更新逻辑
        ResignationRequester workforceRequest = ResignationupdateReason((int)req.RequestNo, req.Reason);
        responseData.success = true;
        responseData.message = "保存成功";
    }
    catch (Exception ex)
    {
        responseData.message = $"保存失败：{ex.Message}";
        // 可在此添加日志记录
    }

    return Json(responseData);
}

关键注意事项 #

• 防抖逻辑：避免用户每输入一个字符就发送请求，减轻服务器压力。
• CSRF验证：MVC默认会验证POST请求的CSRF令牌，必须在请求头中携带，否则请求会被拒绝。
• 文本框取值：文本框的输入内容需通过value属性获取，innerHTML用于获取元素的HTML结构，不适用表单控件。
• ID唯一性：页面元素ID必须唯一，否则JS无法正确定位目标元素。

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