ASP.NET Core中如何将值存入Session：视图文本框数据暂存Session后经AJAX提交至控制器

核心逻辑说明 #

Session是服务端专属的会话级存储，无法直接通过前端JS写入，完整实现链路完全匹配需求：

1. 前端采集两个文本框的输入值，通过轻量AJAX请求发送到服务端
2. 服务端接收输入值后，将其写入当前访问用户的专属Session中，完成本地暂存
3. 用户触发正式提交动作时，前端发送AJAX请求到正式提交接口
4. 服务端直接从Session中读取之前暂存的输入值，执行后续业务处理，处理完成后按需清理Session中的暂存数据

第一步：搭建基础视图页面 #

页面包含两个输入文本框、两个操作按钮，分别对应「暂存输入」「提交暂存数据」的动作，示例代码：

<!-- 两个文本框 -->
<div class="form-item">
  <label>输入项1</label>
  <input type="text" id="inputBox1" placeholder="请输入第一部分内容">
</div>
<div class="form-item">
  <label>输入项2</label>
  <input type="text" id="inputBox2" placeholder="请输入第二部分内容">
</div>
<!-- 操作按钮 -->
<button id="saveBtn">暂存到Session</button>
<button id="submitBtn">提交暂存内容</button>

第二步：编写服务端暂存接口 #

在对应控制器中新增一个Action，专门接收前端传来的输入值，写入当前用户的Session，示例代码（以ASP.NET MVC为例）：

public ActionResult SaveToSession(string input1, string input2)
{
    // 基础参数校验
    if (string.IsNullOrWhiteSpace(input1) || string.IsNullOrWhiteSpace(input2))
    {
        return Json(new { code = -1, msg = "输入内容不能为空" }, JsonRequestBehavior.AllowGet);
    }
    // 写入Session完成暂存
    Session["TempInput1"] = input1;
    Session["TempInput2"] = input2;
    return Json(new { code = 0, msg = "暂存成功" }, JsonRequestBehavior.AllowGet);
}

第三步：编写正式提交接口 #

新增一个正式处理业务的Action，直接从Session中读取之前暂存的数值，完成业务逻辑后清理暂存数据，示例代码：

public ActionResult SubmitTempData()
{
    // 从Session读取暂存值
    var tempInput1 = Session["TempInput1"]?.ToString() ?? string.Empty;
    var tempInput2 = Session["TempInput2"]?.ToString() ?? string.Empty;
    // 兜底校验Session值
    if (string.IsNullOrWhiteSpace(tempInput1) || string.IsNullOrWhiteSpace(tempInput2))
    {
        return Json(new { code = -1, msg = "暂存数据已过期，请重新输入" }, JsonRequestBehavior.AllowGet);
    }
    // 此处编写实际业务逻辑，比如持久化到数据库、调用第三方接口等
    // ...
    // 业务处理完成后清理Session暂存值，避免重复提交
    Session.Remove("TempInput1");
    Session.Remove("TempInput2");
    return Json(new { code = 0, msg = "提交成功", data = new { tempInput1, tempInput2 } }, JsonRequestBehavior.AllowGet);
}

第四步：前端实现AJAX交互逻辑 #

用原生JS实现两个按钮的交互，无需依赖第三方库：

1. 暂存按钮逻辑：采集两个输入框的值，发送AJAX到暂存接口

document.getElementById('saveBtn').addEventListener('click', function() {
    // 获取输入值并做前端校验
    const input1 = document.getElementById('inputBox1').value.trim();
    const input2 = document.getElementById('inputBox2').value.trim();
    if (!input1 || !input2) {
        alert('请把两个文本框的内容填写完整');
        return;
    }
    // 发送AJAX请求到暂存接口
    fetch('/YourController/SaveToSession', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: `input1=${encodeURIComponent(input1)}&input2=${encodeURIComponent(input2)}`
    }).then(res => res.json()).then(result => {
        if (result.code === 0) {
            alert('内容已暂存');
            // 暂存成功后清空输入框，避免误操作
            document.getElementById('inputBox1').value = '';
            document.getElementById('inputBox2').value = '';
        } else {
            alert(result.msg);
        }
    })
})

2. 提交按钮逻辑：直接发AJAX到正式提交接口，无需再从输入框采集值

document.getElementById('submitBtn').addEventListener('click', function() {
    fetch('/YourController/SubmitTempData', {method: 'POST'})
        .then(res => res.json())
        .then(result => {
            if (result.code === 0) {
                alert(`提交成功，暂存内容为：${result.data.tempInput1}、${result.data.tempInput2}`);
            } else {
                alert(result.msg);
            }
        })
})

落地兜底注意事项 #

• Session超时兜底：多数框架默认Session的有效期为20分钟，超时后暂存值会被自动回收，接口必须加空值判断，给用户明确的提示，不要直接抛空引用异常。
• 敏感数据防护：如果输入的是手机号、身份证号这类敏感信息，暂存时不要将明文长期保留在Session中，提交完成后第一时间删除对应的Session键，降低数据泄露风险。
• 重复提交防护：业务处理完成后及时清空Session中的暂存值，用户重复点击提交按钮时直接提示“已完成提交”，避免重复执行业务逻辑。
• 跨域场景适配：如果是前后端分离的跨域部署场景，需要配置AJAX请求自动携带跨域凭证，否则服务端无法识别用户的SessionID，会出现暂存成功但提交时读不到值的问题。

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