Ajax 发布返回成功但在调试时未在 VS 中达到断点答案

【问题标题】：Ajax post returning success but not hitting the break point in VS while debuggingAjax 发布返回成功但在调试时未在 VS 中达到断点
【发布时间】：2021-09-28 00:31:25
【问题描述】：

我正在使用剃须刀页面编写一个 .net core 3.1 项目，并且我有一个表单，该表单具有类型按钮的输入，我在该表单上为 onclick 事件编写了一个 ajax 帖子。测试按钮时单击 ajax 请求的成功功能正在执行，但我的断点在 Visual Studio 中没有被击中

我的表格

            @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();
        }
    }
}

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

【问题讨论】：

你的突破点在哪里？

标签： jquery .net asp.net-core razor-pages

【解决方案1】：

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

接下来，

网址：'/?handler=OnPostModelAsync'

应该是

url: '/?handler=Model'

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

其他：

从方法中删除HttpPost 属性。根据作为 Razor Pages 中方法名称一部分的动词，方法与动词匹配。
删除ValidateAntiForgeryToken 属性。默认情况下，它们在 Razor 页面中经过验证。
在您的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-");
            }

        })
    })
})

【讨论】：