JS 调用 C# .NET 方法教程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

JS 调用 C# .NET 方法教程

2025-12-13

浏览次数：次

返回列表

J*aScript无法直接调用C#方法，需通过HTTP请求（Web API）、服务端渲染（Razor）、Blazor JS Interop或旧版Web Forms实现通信。

js 调用 c# .net 方法教程

J*aScript 无法直接调用 C# .NET 方法，因为 JS 运行在浏览器（前端），而 C# 通常运行在服务器（后端）。要实现“JS 调用 C#”，本质是通过 HTTP 请求与服务器通信，由服务器端的 C# 代码处理逻辑并返回结果。下面分常见场景说明怎么做。

Web API 方式（推荐，.NET 6+）

这是最现代、最清晰的方式：用 ASP.NET Core Web API 暴露 C# 方法为 HTTP 接口，JS 用 fetch 或 axios 调用。

在控制器中写一个 [HttpGet] 或 [HttpPost] 方法，比如：

[ApiController]
[Route("api/[controller]")]
public class CalculatorController : ControllerBase
{
    [HttpPost("add")]
    public IActionResult Add([FromBody] AddRequest request)
    {
        return Ok(new { result = request.A + request.B });
    }
}
<p>public class AddRequest
{
public int A { get; set; }
public int B { get; set; }
}

JS 中调用：

fetch('/api/calculator/add', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ A: 5, B: 3 })
})
.then(r => r.json())
.then(data => console.log(data.result)); // 输出 8

ASP.NET Core MVC 视图中混用（传统页面场景）

如果你用的是 Razor 页面或 MVC 视图，C# 代码可在服务端渲染时生成 JS 变量或内联脚本，但不是运行时调用。

例如在 .cshtml 中：

@{
    var serverTime = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
}
<script>
  const serverTime = '@serverTime'; // 注意单引号包裹，防 XSS 需转义
  console.log('Server time:', serverTime);
</script>

这种只适合初始化数据，不能响应用户点击后动态执行 C# 逻辑。

Blazor Server / WebAssembly（JS ↔ C# 混合更紧密）

Blazor 允许在浏览器中（WASM）或通过 SignalR（Server）直接运行 C#，并提供 JS Interop 机制。

在 Blazor 组件中调用 JS：
await JSRuntime.InvokeVoidAsync("alert", "Hello from C#");
在 JS 中调用 C#（需注册方法）：
C# 端：JSRuntime.InvokeAsync<string>("MyApp.getData", "user123");</string>
JS 端：window.MyApp = { getData: (id) => DotNet.invokeMethodAsync('MyAssembly', 'GetData', id) };

这种方式真正实现了双向调用，但要求项目基于 Blazor，不是普通 Web 应用。