在Razor Pages中如何将JavaScript数组传递给C#后端代码

前端JavaScript运行在客户端浏览器，后端C#代码运行在服务器，两者无法直接共享变量，必须通过HTTP请求把前端数据传递到后端。以下是两种常用方案：

方案1：表单提交（适合需要刷新页面的场景） #

前端修改 #

1. 在Index.cshtml中添加一个隐藏表单，用于承载数据：

<form method="post" id="activityFilterForm">
    <!-- 用隐藏字段存储数组转成的逗号分隔字符串 -->
    <input type="hidden" name="skillIds" id="skillIds" />
    <button type="submit">筛选活动</button>
</form>

2. 修改getActivity函数，将数组转为字符串并赋值给隐藏字段，然后提交表单：

function getActivity() {
    var collection = document.getElementsByClassName("skill-icon-selected");
    const splitCollection = new Array;
    for (var i = 0; i < collection.length; i++) {
        var split = collection[i].id.split("-");
        splitCollection.push(split[0]);
    }
    // 数组转逗号分隔字符串，方便后端接收
    document.getElementById("skillIds").value = splitCollection.join(",");
    // 提交表单到后端
    document.getElementById("activityFilterForm").submit();
}

后端修改 #

在Index.cshtml.cs中添加OnPost方法接收参数并处理业务逻辑：

public List<Activity> allActivities = new List<Activity>();

// 页面初始化时加载所有活动
public void OnGet()
{
    allActivities = _context.Activities.ToList();
}

// 接收表单提交的筛选参数
public void OnPost()
{
    // 将前端传递的字符串分割为数组
    var skillIds = Request.Form["skillIds"].ToString().Split(',', StringSplitOptions.RemoveEmptyEntries);
    allActivities = _context.Activities.ToList();
    
    foreach (var activity in allActivities)
    {
        if (skillIds.Contains(activity.Skill))
        {
            // 执行你的业务逻辑
        }
    }
}

方案2：AJAX异步请求（适合不刷新页面的场景） #

如果不想刷新页面，用异步方式传递数据并获取处理结果，可以用Fetch API：

前端修改 #

修改getActivity函数，发送POST请求到后端的命名处理方法：

async function getActivity() {
    var collection = document.getElementsByClassName("skill-icon-selected");
    const splitCollection = new Array;
    for (var i = 0; i < collection.length; i++) {
        var split = collection[i].id.split("-");
        splitCollection.push(split[0]);
    }

    try {
        const response = await fetch('/Index?handler=FilterActivities', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // 携带Razor Pages防伪造令牌
                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
            },
            body: JSON.stringify(splitCollection)
        });

        if (response.ok) {
            const result = await response.json();
            // 用返回的结果更新页面，比如渲染筛选后的活动
            console.log(result);
        }
    } catch (error) {
        console.error('请求失败:', error);
    }
}

注意：确保页面包含防伪造令牌，可手动添加：<input type="hidden" asp-for="__RequestVerificationToken" />

后端修改 #

在Index.cshtml.cs中添加命名POST处理方法，接收JSON数组：

using Microsoft.AspNetCore.Mvc;

public List<Activity> allActivities = new List<Activity>();

public void OnGet()
{
    allActivities = _context.Activities.ToList();
}

// 对应前端的handler=FilterActivities
public IActionResult OnPostFilterActivities([FromBody] string[] skillIds)
{
    // 筛选符合条件的活动
    var filteredActivities = _context.Activities
        .Where(a => skillIds.Contains(a.Skill))
        .ToList();
    
    // 返回JSON结果给前端
    return new JsonResult(filteredActivities);
}

关键注意点 #

• 后端OnGet方法在页面首次加载时执行，此时前端还未生成splitCollection，因此不能在OnGet中直接使用该数据，必须通过后续POST请求传递。
• 简单筛选且需要刷新页面时用表单提交；需要无刷新交互时用AJAX+JSON方案。

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