如何在 ASP.NET Razor 页面中正确使用数据绑定来更新处理程序中的模型？

Question

我有以下两个文本区域，以及一个应该将输入文本复制到输出文本的处理程序。但是，文本区域中的 OutputText 绑定值保留其原始值。

当我按下页面上的“生成”按钮时，处理程序正确调用，正确分配新值

"Processed: Input1"

，然后在表单上我在

"Processed: Input1"

中看到正确的预期值

<div>@Model.Data.OutputText</div>

，但是在输出文本文本区域中我看到原来不变的值，我不明白为什么。我还想在这里查看模型的当前更新值。

问题：

如何正确绑定模型值，并在使用处理程序时反映模型更改？

问题及源码：

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

   <div>@Model.Data.OutputText</div>
   <div>
      <label for="outputText">Output Text:</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">Generate</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}";
    }
}

Answer 1

这是一种该死的陷阱。 TagHelper

asp-for="Data.OutputText"

实际上并不引用 PageModel 的

Data

属性，而是引用其

ModelState

字典中的条目。

由于您的输出文本区域首先不需要成为表单的一部分，所以我会跳过 TagHelper 业务并编写

<textarea id="outputText" class="form-control" rows="5" readonly>@Model.Data.OutputText</textarea>

老实说，我通常更喜欢编写自己的 HTML，但这只是我。

如果你真的讨厌 HTML，你也可以这样做：

@Html.TextArea(Model.Data.OutputText, Model.Data.OutputText, 5, 0, new { @class = "form-control", required = false, @readonly = true, id = "outputText" })