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

Posted 2023-03-27

【中文标题】Ajax 发布返回成功但在调试时未在 VS 中达到断点

【英文标题】：Ajax post returning success but not hitting the break point in VS while debugging

【发布时间】：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();
        
    

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

【问题讨论】：

你的突破点在哪里？

【参考方案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-");
            

        )
    )
)