.NET 6中Ajax Post后TempData无法回显至同一视图的问题

核心问题分析 #

• 视图中嵌入的C#代码块（@{ ... }）是页面首次渲染时在服务器执行的，Ajax请求完成后不会重新执行，因此无法通过这种方式更新客户端DOM。
• 控制器返回View("Index")会将整个页面HTML返回给Ajax，但你没有处理返回的内容，且这不是最优方案（只需返回查询到的产品数据即可）。
• 控制器参数string value与Ajax传递的参数名inputID不匹配，导致无法正确接收用户输入的序列号。
• 只读输入框未绑定到模型属性，表单提交时该值无法被控制器接收。

修正步骤 #

1. 修改Home控制器的GetItem动作 #

将返回类型改为JsonResult，直接返回查询到的产品数据，同时修正参数名与Ajax传递的一致：

public IActionResult Index()
{
    return View(new InvItem()); // 初始化模型，避免视图报错
}

[HttpPost]
public IActionResult GetItem(string inputID)
{
    // 从数据库查询产品数据，示例代码
    string item = _dbContext.InvItems.FirstOrDefault(i => i.InputID == inputID)?.Model ?? "未找到匹配产品";

    // 返回JSON格式的数据
    return Json(new { model = item });
}

2. 修正视图中的Ajax逻辑与HTML #

• 移除视图中嵌入的服务器端C#代码块，改用Ajax的success回调更新DOM。
• 给只读输入框添加asp-for="Model"，确保表单提交时该值能绑定到模型。
• 完善Ajax的回调处理：

@using ScanForm.Models;
@model InvItem

@{
    ViewData["Title"] = "Scan Form";
}

<div>
    <form method="POST" asp-controller="Home" asp-action="Add">
        <div class="row w-50 form-group">
            <div class="col mb-3">
                <label class="col-form-label" asp-for="InputID">Serial #</label>
                <input type="text" class="form-control" id="InputID" asp-for="InputID">
                <small class="form-text text-muted"></small>
            </div>
            <div class="col mb-3">
                <label class="col-form-label" asp-for="Model">Item</label>
                <!-- 添加asp-for绑定模型，确保提交时能传递值 -->
                <input type="text" class="form-control" id="item" asp-for="Model" readonly>
                <small class="form-text text-muted"></small>
            </div>
            <div class="mb-3">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">
    function SendInput(sn) {   
        const inputValue = sn.target.value;
        if (!inputValue) {
            $('#item').val(''); // 清空输入框如果序列号为空
            return;
        }
        
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetItem")',
            data: { inputID: inputValue },
            dataType: "json",
            success: function(response) {
                // 回调中更新只读输入框的值
                $('#item').val(response.model);
            },
            error: function() {
                $('#item').val('查询失败');
            }
        });
    }

    const serial = document.getElementById('InputID');
    serial.addEventListener('input', SendInput);         
</script>

3. 补充表单提交的Add动作（可选） #

确保表单提交时能接收模型数据：

[HttpPost]
public IActionResult Add(InvItem model)
{
    if (ModelState.IsValid)
    {
        // 处理表单提交逻辑，比如保存到数据库
        _dbContext.InvItems.Add(model);
        _dbContext.SaveChanges();
        return RedirectToAction("Index");
    }
    return View("Index", model);
}

关键说明 #

• 使用JsonResult返回数据是Ajax交互的标准方式，避免返回整个页面HTML，提升性能。
• Ajax的success回调是客户端接收服务器响应并更新DOM的正确时机，服务器端代码无法直接操作客户端DOM。
• 只读输入框必须绑定模型属性（asp-for="Model"），否则表单提交时该值不会被包含在请求中。

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