在剃须刀页面上添加Ajax处理程序

Question

我熟悉传统mypage.cshtml和mypage.cshtml.cs使用ongetAsync和onpostasync 方法，但是，如何将另一个处理程序添加到模型页面中，可以使用JavaScript调用，而无需进行完整的表单帖子？

Answer 1

using System.Collections.Generic;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Antiforgery;
using Microsoft.AspNetCore.Mvc;

namespace MyApp.Pages;

public class ListModel : PageModel
{
    private readonly IAntiforgery _antiForgery;

    public AntiforgeryTokenSet AntiForgeryToken {get; private set;}

    public ListModel(
        IAntiforgery antiForgery
    )
    {
        this._antiForgery = antiForgery;
    }

    public async Task OnGet()
    {
        AntiForgeryToken = _antiForgery.GetAndStoreTokens(HttpContext);
    }

    public async Task<JsonResult> OnPostWafflesAsync(bool test)
    {
        System.Console.WriteLine("Test approval result="+test);
        return new JsonResult(new {
            received = true,
            test,
        });
    }
}

<script>
const formData = new FormData();
formData.append('test', false);
fetch(
    `${window.location}?handler=Waffles`,
    {
        method: "POST",
        headers: {
            RequestVerificationToken:`@Model.AntiForgeryToken.RequestToken`,
        },
        body: formData,
});
</script>

在这种情况下，我们将JSONRESULT返回以更容易被JavaScript消耗（但此示例对结果无济于事）。

请注意，JavaScript中引用的处理程序是Waffles而不是OnpostWafflesAsync，相关

参考：

• https://learn.microsoft.com/en-us/aspnet/core/razor/razor-pages/?tabs=visual-Studio&.amp@ amp.amp@.amp@.p. -6.0＃每页多手