如何在JavaScript中调用C#方法并传递变量？

1. ASP.NET Core（Razor Pages/MVC） #

后端（C#）实现 #

在Razor Page的PageModel或MVC Controller中定义接收数据的处理方法：

// Razor Page 的 PageModel
public class IndexModel : PageModel
{
    public IActionResult OnPostProcessData([FromBody] MyDataModel data)
    {
        // 处理传入的数据
        var result = $"接收到的数据：{data.Name}，年龄：{data.Age}";
        return new JsonResult(result);
    }
}

// 数据模型类
public class MyDataModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}

前端（JavaScript）调用 #

通过Fetch API发送POST请求传递JSON数据：

// 构造要传递的JS变量
const userData = {
    Name: "张三",
    Age: 28
};

// 调用后端方法
fetch('/Index?handler=ProcessData', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
    },
    body: JSON.stringify(userData)
})
.then(response => response.json())
.then(result => console.log(result))
.catch(error => console.error('请求失败:', error));

注：必须携带防伪造令牌__RequestVerificationToken，避免400错误。

2. Blazor（Server/WASM） #

Blazor内置JS与C#互操作能力，步骤如下：

后端（C#）标记可调用方法 #

给C#方法添加[JSInvokable]特性，确保方法为public：

public class DataProcessor
{
    [JSInvokable]
    public static string ProcessData(MyDataModel data)
    {
        return $"Blazor接收到：{data.Name}，年龄{data.Age}";
    }
}

// 数据模型类同上
public class MyDataModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}

前端（JavaScript）调用 #

使用DotNet.invokeMethodAsync调用指定C#方法：

const userData = {
    Name: "李四",
    Age: 30
};

// 调用C#静态方法，替换为你的项目程序集名称
DotNet.invokeMethodAsync('你的项目程序集名称', 'ProcessData', userData)
.then(result => console.log(result))
.catch(error => console.error('调用失败:', error));

如果是实例方法，需先获取C#对象引用再调用。

3. ASP.NET Web Forms #

使用[WebMethod]标记后台方法，允许前端直接调用：

后端（C#）代码 #

public partial class Default : System.Web.UI.Page
{
    [System.Web.Services.WebMethod]
    public static string ProcessData(MyDataModel data)
    {
        return $"Web Forms接收到：{data.Name}，年龄{data.Age}";
    }
}

public class MyDataModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}

前端（JavaScript）调用 #

通过PageMethods调用：

const userData = {
    Name: "王五",
    Age: 25
};

PageMethods.ProcessData(userData, 
    function(result) { console.log(result); },
    function(error) { console.error(error); }
);

注：页面需启用ScriptManager并设置EnablePageMethods="true"。

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