使用 Razor 进行 ajax 调用时，绑定属性为空答案

【问题标题】：Binded Property is null on ajax call using Razor使用 Razor 进行 ajax 调用时，绑定属性为空
【发布时间】：2020-09-14 16:38:42
【问题描述】：

假设我有一个绑定的文本区域：

.cshtml：

<div class="form-group"><textarea class="form-control" asp-for="Header" rows="3> </textarea>
</div>
<button type="button" id="printTestButton" asp-page-handler="PrintPreview" class="btn btn-primary"> button </button>

我没有向你展示 ajax 代码.. 因为这不是问题。

代码行为 .cs：

public class IndexModel : PageModel
{
    [BindProperty]
    public string Header { get; set; }

    public void OnGet()
    {
        this.Header = "Foo";
    }

    public ActionResult OnGetTest()
    {
        console.log(this.Header);

        return new JsonResult("Received " + header + " at " + DateTime.Now);
    }
}

所以当我调用网页时，会调用 OnGet 函数。然后我将 Header 属性设置为等于“Foo”。奇迹发生了，我可以在 UI 上看到 textarea 包含字符串“Foo”。

现在的问题：当我按下按钮然后我用 Ajax 调用函数 OnGetTest() 时，属性 Header 为空。

如果我只是将它设置为等于“Foo”，为什么 Header 为空？在 UI 上，我们可以看到“Foo”。为什么此时绑定属性不起作用？

【问题讨论】：

您是否使用 JavaScript 方法来处理 printTestButton 的点击？我认为您需要共享该代码，因为您的 AJAX 调用似乎没有提交数据。如果是“提交”类型的按钮，则数据会自动提交到服务器。

标签： razor razor-pages

【解决方案1】：

默认情况下，BindProperty 属性仅支持在POST 请求中绑定属性值。您必须选择支持GET 请求：

[BindProperty(SupportsGet=true)]
public string Header { get; set; }

参考：https://www.learnrazorpages.com/razor-pages/model-binding#binding-data-from-get-requests¹

¹（我拥有 Learn Razor Pages 网站）

【讨论】：

我试过但没用。我仍然需要通过 Ajax 数据对象传递所有参数才能访问该属性。