.NET 6 Razor Pages中如何将JArray返回值传递给AJAX请求

提交按钮绑定的jQuery代码如下：

function SubmitFilter()
{ 
    var transactionNumb = $("#transactionNumber").val();
    var cardHolderName = $("#cardHolder").val();
    $.ajax({
    type: "GET",
    url: "https://localhost:7197/Transactions?transaction_number="+transactionNumb+"&cardholder="+cardHolderName,
    
    contentType: "application/json; charset=utf-8",
    dataType: "html",
    success: function (data) 
    {
      alert(data);
    }
    });

}

后端采用Razor Pages实现，当前问题：AJAX请求发送后只会触发默认OnGet页面渲染方法，无法直接调用内部GetTransactions方法，需要在AJAX的success回调中获取GetTransactions返回的JArray值。
原后端代码如下：

public void OnGet(int CurrentPage,int transaction_number, string cardholder)
    {
            this.Authorize = HttpContext.Session.GetString("Roles");
            this.CurrentPage = CurrentPage; 
            if(CurrentPage==0)
            {
               this.CurrentPage = 1;         
            }
            ViewData["Title"] = "Transactions List";
          
            Transactions =  GetTransactions(this.CurrentPage,transaction_number,cardholder);   
           
    }
    public JArray GetTransactions(int currentPage,int transaction_number , string cardholder)
    {

        using (var client = new HttpClient())
        {
            client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("bearer", HttpContext.Session.GetString("JwtToken"));            

            var url = $"{BaseApiUrl}/transactions?page={currentPage}&limit={PageSize}";    
            var filters ="";
            
            var requestUri = new Uri(url);

            var responseTask = client.GetAsync(requestUri);
            responseTask.Wait();
            var result = responseTask.Result;
            
            // this.TotalResults = result.Headers.GetValues("X-Paging-Pages");
            this.TotalResults = "5";

            if (result.IsSuccessStatusCode)
            {
                var reportResults = Task.Run(async() => await result.Content.ReadAsAsync<JArray>()).Result;                  
                return reportResults;
            }
        }

        return JArray.Parse("[]");
    }

核心原因 #

• Razor Pages不会将普通public方法映射为可请求的路由端点，只有符合OnGet/OnPost[HandlerName]命名约定的处理方法才能被请求匹配，你写的GetTransactions是类内部方法，无法直接通过HTTP请求调用。
• 原有OnGet方法返回值为void，执行完成后框架会自动返回渲染完成的整页HTML，因此你之前的AJAX只能拿到页面HTML，拿不到结构化的JArray数据。
• 前端AJAX的dataType设置为html，也不符合你要获取JSON数据的需求。

修改步骤 #

1. 后端新增AJAX专用处理方法 #

保留原有OnGet方法用于正常页面渲染，新增GET请求处理方法返回JSON格式数据：

// 方法名对应handler路由参数为TransactionsData
public JsonResult OnGetTransactionsData(int CurrentPage, int transaction_number, string cardholder)
{
    this.Authorize = HttpContext.Session.GetString("Roles");
    if(CurrentPage == 0)
    {
        CurrentPage = 1;
    }
    // 复用原有业务逻辑获取JArray数据
    JArray result = GetTransactions(CurrentPage, transaction_number, cardholder);
    // 直接返回JSON格式结果
    return new JsonResult(result);
}

2. 前端修改AJAX请求配置 #

调整请求地址匹配后端handler，修改dataType为json自动解析返回结果：

function SubmitFilter()
{ 
    var transactionNumb = $("#transactionNumber").val();
    var cardHolderName = $("#cardHolder").val();
    $.ajax({
        type: "GET",
        // 新增handler=TransactionsData匹配后端新增的处理方法，补全需要的CurrentPage参数
        url: "/Transactions?handler=TransactionsData&transaction_number="+transactionNumb+"&cardholder="+cardHolderName+"&CurrentPage=1",
        contentType: "application/json; charset=utf-8",
        // 改为json类型，自动解析返回的JArray为JS对象
        dataType: "json",
        success: function (data) 
        {
            // data即为解析完成的数组对象，可直接遍历使用
            console.log("返回数据：", data);
            alert("请求成功，返回数据条数：" + data.length);
        },
        error: function(xhr) {
            console.error("请求失败：", xhr);
        }
    });
}

优化建议 #

• 原有GetTransactions方法中使用.Wait()、.Result同步阻塞异步代码，容易引发线程池死锁，建议将方法改为异步实现（返回Task<JArray>），处理方法也对应改为异步OnGetTransactionsDataAsync。
• 如果项目开启了全局防伪造令牌校验，POST请求需要在请求头中携带RequestVerificationToken，当前使用GET请求无需额外处理。

内容的提问来源于stack exchange，提问作者Vasanth R