ASP.NET Razor页面处理程序中模型更新的数据绑定正确实现方式

我有两个textarea，还有一个本该把InputText的值复制到OutputText的处理程序，但绑定OutputText的textarea始终保留原始值。点击页面上的Generate按钮后，处理程序被正确调用，已经给OutputText赋值了新值"Processed: Input1"，在<div>@Model.Data.OutputText</div>里能看到正确的预期值，但输出文本的textarea仍显示未更改的原始值。我想知道原因，也希望这个textarea能显示模型当前的更新值。

截图显示：InputText区域显示输入内容，OutputText的textarea仍显示原始值，但旁边的div显示了更新后的处理结果。

前端代码 #

<form method="post">
   <div>
      <label for="inputText">输入文本:</label>
      <textarea id="inputText" asp-for="Data.InputText" class="form-control" rows="5"></textarea>
   </div>

   <div>@Model.Data.OutputText</div>
   <div>
      <label for="outputText">输出文本:</label>
      <textarea id="outputText" asp-for="Data.OutputText" class="form-control" rows="5" readonly></textarea>
   </div>

    <button type="submit" asp-page-handler="Generate" class="btn btn-primary">生成</button>

</form>

后端代码 #

public class ColorPickerModel : PageModel
{
    [BindProperty]
    public PageModelData Data { get; set; } = new()
    {
        InputText = "Input1",
        OutputText = "Output1"
    };

    public void OnGet()
    {
    }

    public void OnPostGenerate()
    {
        Data.OutputText = $"Processed: {Data.InputText}";
    }
}

原因 #

这是ASP.NET Razor Pages的默认行为：POST请求后渲染表单控件时，会优先使用ModelState中存储的提交值，而非你更新后的模型属性值。

当你点击“生成”按钮提交表单时，原始的OutputText值已经被存入ModelState。即便你在OnPostGenerate方法里修改了Data.OutputText，Razor渲染textarea时还是会从ModelState里取旧值，而<div>@Model.Data.OutputText</div>是直接读取模型属性，所以能正常显示更新后的内容。

解决办法 #

在更新模型值后，清除ModelState中对应的条目，或者直接清空整个ModelState，让Razor使用更新后的模型值渲染控件：

方法1：清除指定字段的ModelState（推荐，更精准）

修改OnPostGenerate方法：

public void OnPostGenerate()
{
    Data.OutputText = $"Processed: {Data.InputText}";
    // 移除OutputText对应的ModelState条目
    ModelState.Remove(nameof(Data.OutputText));
}

方法2：清空整个ModelState（适合批量更新多个字段的场景）

public void OnPostGenerate()
{
    Data.OutputText = $"Processed: {Data.InputText}";
    // 清空所有ModelState
    ModelState.Clear();
}

修改后，textarea就会正确显示更新后的Data.OutputText值了。

内容的提问来源于stack exchange，提问作者g.pickardou