在 asp.net 核心剃须刀页面应用程序中，ajax 调用 C# 函数的“url”是什么？

Question

在 Visual Studio 中 ASP.NET Core Razor Pages 项目的自动生成的 site.js 文件中，我尝试使用 Ajax 调用

    $.ajax
        ({
            type: "POST",
            url: "",
            data: "asdsad",
            dataType: "text",
            success: function (result) {
                alert(result);
            },
            error: function (status, ex) {
                alert("Error Code: Status: " + status + " Ex: " + ex);
            }
        });

一个 C# 函数。我的项目树如下所示：

builder.cshtml.cs 文件也是在我添加 builder.cshtml 页面时由 Visual Studio 自动生成的。在我的builder.cshtml.cs 里面有这个代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyProjectName.Pages
{
    public class Index1Model : PageModel
    {
        public string Message { get; set; } = "Initial Request";
        public void OnGet()
        {
            Message = "Test1";
        }

        public void HelloFunc()
        {
            Message = "BuilderJob";
        }
    }
}

我添加了函数HelloFunc() 和Message 变量。通过ASP.NET Core documentation by Microsoft 后，我不明白从我的Ajax 代码中调用HelloFunc 的“url”是什么。它不是/builder/HelloFunc（不起作用）。如何从我的 Ajax 调用中访问此 HelloFunc？

答案是将HelloFunc 更改为OnPostHelloFunc() 并使用此url: /builder?handler=HelloFunc，如果您只是测试而不使用验证令牌，请按照此处test .net core 2 page using Postman return 400 bad request 的说明插入[IgnoreAntiforgeryToken(Order = 1001)]

Answer 1

Razor Pages 正在为此使用页面处理程序。因此，如果您想 POST 到您的页面，请创建一个名称为 OnPost{HandlerName} 或 OnPost{HandlerName}Async 的方法（如果它是异步方法）。

例如，如果您有一个表单并想删除某些内容，您需要一个这样的页面处理程序：

public async Task<IActionResult> OnPostDeleteAsync(int id)
{
    var itemToDelete = await _mapRepo.GetByIdAsync(id);
    if (itemToDelete == null)
    {
        //...
    }

    await _mapRepo.Delete(itemToDelete);
    return RedirectToPage("Maps");
}

OnPost 声明，asp.net 核心将侦听 POST 请求，Delete 是名称，而Async 是异步处理程序的命名约定。

在您的表单中，您只需声明一个输入元素，该元素将在 onclick 事件期间调用此处理程序：

<button type="submit" class="btn btn-danger btn-block" asp-page-handler="Delete" asp-route-id="@Model.Id">Delete</button>

用 ajax 做这个：

$.ajax
({
    type: "POST",
    url: "/builder?handler=HelloFunc",
    dataType: "text",
    success: function (result) {
        alert(result);
    },
    error: function (status, ex) {
        alert("Error Code: Status: " + status + " Ex: " + ex);
    }
});

使用处理程序方法：

public void OnPostHelloFunc()
{
    //...
}

这里是命名处理程序的好读物：https://www.learnrazorpages.com/razor-pages/handler-methods

Answer 2

请参考这个Razor Pages in ASP.NET Core documentation，这里他们提到了文件名和路径映射及其匹配的url。

例如。

/Pages/Index.cshtml => // 或 /Index

/Pages/Contact.cshtml => /Contact

另一件事是 Razor 页面遵循特定的命名约定。它以“On”为前缀，后跟 HTTP 动词，如 OnGet()、OnPost() 等。但是，我们也可以指定自定义名称。例如 -

• OnGetPatientList()
• OnPostHelloFunc()

现在，如果我们讨论您的情况，那么您需要在您的 builder.cshtml.cs 文件中进行以下更改。

namespace MyProjectName.Pages
{
    public class Index1Model : PageModel
    {
        public string Message { get; set; } = "Initial Request";
        public void OnGet()
        {
            Message = "Test1";
        }

        public IActionResult OnPostHelloFunc()
        {
            return Content("BuilderJob");
        }
    }
}

你的 ajax 函数看起来像这样 -

$.ajax
({
    type: "POST",
    url: "/builder?handler=HelloFunc",
    dataType: "text",
    beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
    },
    success: function (result) {
        alert(result);
    },
    error: function (status, ex) {
        alert("Error Code: Status: " + status + " Ex: " + ex);
    }
});