如何修复MVC中控制器求和结果无法显示在只读输入框的问题

我来帮你搞定这个提交后第三个输入框不显示求和结果的问题！核心原因是你的视图没有把控制器计算好的求和值绑定到第三个只读输入框上，而且当前实现还有个小瑕疵——提交后前两个输入框的内容会被清空，我给你两种修复方案：

方案一：快速修复（最小改动） #

不需要修改控制器代码，只需要在视图里给第三个输入框加上value属性，绑定控制器返回的模型值：

@using (Html.BeginForm()) { 
    <input id="Text1" name="txtNum1" type="text" placeholder="num 1" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/> 
    <input id="Text2" name="txtNum2" type="text" placeholder="num 2" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/> 
    <!-- 添加value="@Model"，绑定控制器返回的求和值 -->
    <input id="Text3" name="txtNum3" type="text" readonly="readonly" value="@Model" /> 
    <input id="Submit1" type="submit" value="Sum" /> 
}

原理：你在Post方法里返回View(txtNum3)，这个txtNum3会成为视图的Model对象，通过@Model就能把求和值渲染到输入框的value属性里，回发后就会显示结果了。

不过这个方案有个小缺点：提交后前两个输入框的内容会被清空，如果你想保留用户输入的数值，可以用下面的规范方案。

方案二：使用ViewModel（推荐，更符合MVC设计） #

这种方式不仅能解决求和结果不显示的问题，还能保留前两个输入框的内容，代码结构也更清晰：

1. 创建ViewModel类 #

在项目的Models文件夹下新建一个ViewModel类：

public class SumViewModel
{
    public int Num1 { get; set; }
    public int Num2 { get; set; }
    public int SumResult { get; set; }
}

2. 修改控制器代码 #

把控制器的Index方法改成强类型绑定ViewModel：

public ActionResult Index()
{
    // 初始化空的ViewModel，避免视图报错
    return View(new SumViewModel());
}

[HttpPost]
public ActionResult Index(SumViewModel model)
{
    // 计算求和结果并赋值给ViewModel的属性
    model.SumResult = model.Num1 + model.Num2;
    // 返回带结果的ViewModel到视图
    return View(model);
}

3. 修改视图代码 #

使用强类型绑定，让视图和ViewModel关联：

@model 你的项目命名空间.SumViewModel <!-- 替换成你实际的命名空间 -->

@using (Html.BeginForm()) 
{
    <!-- 用Html.TextBoxFor绑定ViewModel属性，自动保留输入值 -->
    @Html.TextBoxFor(m => m.Num1, new { placeholder = "num 1", onkeypress = "return event.charCode >= 48 && event.charCode <= 57" })
    @Html.TextBoxFor(m => m.Num2, new { placeholder = "num 2", onkeypress = "return event.charCode >= 48 && event.charCode <= 57" })
    <!-- 绑定求和结果，设置只读 -->
    @Html.TextBoxFor(m => m.SumResult, new { @readonly = "readonly" })
    <input type="submit" value="Sum" />
}

这样修改后，提交不仅会显示求和结果，前两个输入框的数值也会保留，而且代码更符合MVC的分层设计，后续维护起来也更方便。

内容的提问来源于stack exchange，提问作者Ahmed Soliman