基于Ajax与ASP.NET MVC的计算器：如何将结果显示在禁用输入框

你当前的核心问题是：Ajax.BeginForm配置的UpdateTargetId是用来替换指定DOM元素的HTML内容，但控制器返回的是JSON数据而非HTML片段，所以无法直接将结果同步到禁用的输入框中。以下是具体修改方案：

步骤1：修改视图代码 #

给禁用的输入框添加唯一ID，同时调整AjaxOptions配置，移除UpdateTargetId并新增OnSuccess回调函数来处理返回的JSON数据：

@model Calculator.Models.Calculator_Model

@{ 
    ViewBag.Title = "Index";
}

@using (Ajax.BeginForm("Index", "Calculator",
    new AjaxOptions()
    {
        HttpMethod = "POST",
        OnSuccess = "handleCalculationResult" // 新增结果处理回调
    }
))
{
    <input type="number" name="Number1" value="@Model.Number1" />

    <input type="number" name="Number2" value="@Model.Number2" />

    <div>
        <!-- 给禁用输入框添加唯一ID，方便JS定位 -->
        <input type="number" id="totalInput" name="Total" value="@Model.Total" disabled />
        <!-- 原接收结果的div可保留或删除，已不再依赖它 -->
        <div id="Total"></div>
    </div>

    <button type="submit" name="calculate" value="add">+</button>
    <button type="submit" name="calculate" value="sub">-</button>
    <button type="submit" name="calculate" value="multi">*</button>
    <button type="submit" name="calculate" value="divis">/</button>
}

<script>
function handleCalculationResult(cal) {
    // 将返回的计算结果赋值给禁用输入框
    document.getElementById('totalInput').value = cal.Total;
    // 若使用jQuery可简写为：$("#totalInput").val(cal.Total);
}
</script>

步骤2：确保依赖脚本引用 #

Ajax.BeginForm需要依赖jquery.unobtrusive-ajax.js，请确认你的页面（如_Layout.cshtml）已引入该脚本：

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

控制器与模型代码无需修改 #

你的控制器返回JSON的逻辑、模型定义均无问题，保持原代码即可。

修改完成后，点击运算按钮时，Ajax请求会将计算结果以JSON形式返回，通过handleCalculationResult函数直接把结果赋值给禁用的输入框，即可实现你想要的效果。

内容的提问来源于stack exchange，提问作者Mr King