Ajax在调试时返回了成功，但没有达到VS中的断点

Question

我使用razor页面编写了一个.net core 3.1项目，我有一个表单，它有type按钮的输入，我在上面为onclick事件写了一篇ajax文章。当测试按钮点击时，ajax请求的成功功能正在执行，但我的断点在visualstudio中没有被击中

我的表格

@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}

<div class="text-center">
<form method="post">
<div class="form-group row">
<div class="col-md-3">
<label asp-for="Model.Name"></label>
</div>
<div class="col-md-9">
<input asp-for="Model.Name" id="Name" value="" class="form-control" />
</div>
</div>

<div class="col-md-12">
<input type="button" class="submit btn btn-primary" value="Submit" />
</div>
</form>
</div>
@section scripts{
<script src="~/js/test.js"></script>
}

我的jquery

$(document).ready(function () {
$(".submit").on('click', function () {
var formData = new FormData();
formData.append('name', $('#Name').val());
$.ajax({
url: '/?handler=OnPostModelAsync',
type: 'POST',
async:true,
contentType: 'application/json',
//dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
data: JSON.stringify(formData),
success: function () {
alert("success");
},
failure: function () {
alert("failure-");
}
})
})
})

我的服务器端代码

using AjaxPostRazorPages.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;
using System.Threading.Tasks;
namespace AjaxPostRazorPages.Pages
{
public class IndexModel : PageModel
{
private readonly ILogger<IndexModel> _logger;
public IndexModel(ILogger<IndexModel> logger)
{
_logger = logger;
}

public TestModel Model { get; set; }
public async Task<IActionResult> OnGetAsync()
{
return Page();
}
[ValidateAntiForgeryToken]
[HttpPost]
public async Task<IActionResult> OnPostModelAsync([FromBody] TestModel model)
{
return Page();
}
}
}

我做错了什么，任何帮助都将不胜感激

Answer 1

首先，没有充分的理由将JSON发布到Razor页面。如果您想在应用程序中使用JSON，您应该使用API控制器。只需发布表单内容即可。

接下来，

url:'/？handler=OnPostModelAsync'

应为

url: '/?handler=Model'

处理程序名称中不包括处理程序方法名称的OnPost、OnGet或Async部分：https://www.learnrazorpages.com/razor-pages/handler-methods#named-处理程序方法

其他事项：

1. 从方法中删除HttpPost属性。方法与动词匹配，该动词是Razor Pages中方法名称的一部分
2. 删除ValidateAntiForgeryToken属性。默认情况下，它们在Razor Pages中进行验证
3. 在Model属性上使用BindProperty属性，而不是添加它的另一个实例作为处理程序方法参数

这是一个修订的PageModel:

public class IndexModel : PageModel
{
[BindProperty]
public TestModel Model { get; set; }
public void OnGet()
{
}
public IActionResult OnPostModelAsync()
{
return Page();
}
}

这是修改后的jQuery:

$(document).ready(function () {
$(".submit").on('click', function (e) {
e.preventDefault();
$.ajax({
url: '/?handler=Model',
type: 'POST',
data: $(this).closest('form').serialize(),
success: function () {
alert("success");
},
failure: function () {
alert("failure-");
}
})
})
})