js脚本怎么与c#脚本交互

JS脚本与C#脚本的交互可以通过以下几种方式实现：使用Web API、通过SignalR进行实时通信、利用Blazor技术、通过Node.js与C#的集成。其中，使用Web API是最常见和广泛应用的方式。通过创建Web API，前端的JS脚本可以向后端的C#脚本发送HTTP请求，并接收响应，从而实现数据交换和功能调用。

一、使用Web API

1、创建Web API项目

首先，你需要在C#中创建一个Web API项目。这可以使用ASP.NET Core来实现。打开Visual Studio，新建一个ASP.NET Core Web Application，并选择“API”模板。这样，你就有了一个基础的Web API项目。

2、编写控制器

在Web API项目中，创建一个控制器类，这个类将处理前端JS脚本发来的HTTP请求。以下是一个简单的例子：

using Microsoft.AspNetCore.Mvc;
[Route("api/[controller]")]
[ApiController]
public class SampleController : ControllerBase
{
    [HttpGet("getdata")]
    public IActionResult GetData()
    {
        var data = new { Message = "Hello from C# Web API" };
        return Ok(data);
    }
    [HttpPost("postdata")]
    public IActionResult PostData([FromBody] dynamic data)
    {
        // 处理传入的数据
        return Ok(new { Status = "Received", Data = data });
    }
}

3、前端JS脚本调用

在前端的JS脚本中，你可以使用fetch或axios等库来发送HTTP请求。例如，使用fetch的代码如下：

// GET请求
fetch('https://yourapiurl/api/sample/getdata')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
// POST请求
fetch('https://yourapiurl/api/sample/postdata', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

二、通过SignalR进行实时通信

1、安装SignalR

首先，在C#项目中，安装SignalR的NuGet包：

dotnet add package Microsoft.AspNetCore.SignalR

然后，在前端项目中安装SignalR的JavaScript客户端：

npm install @microsoft/signalr

2、配置SignalR

在C#中，配置SignalR服务和Hub：

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseSignalR(routes =>
    {
        routes.MapHub<ChatHub>("/chatHub");
    });
}

创建一个SignalR Hub类：

using Microsoft.AspNetCore.SignalR;
public class ChatHub : Hub
{
    public async Task SendMessage(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

3、前端JS脚本通信

在前端JS中，使用SignalR客户端与服务器通信：

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub")
    .build();
connection.on("ReceiveMessage", (user, message) => {
    console.log(`${user}: ${message}`);
});
connection.start().catch(err => console.error(err.toString()));
document.getElementById("sendButton").addEventListener("click", event => {
    const user = document.getElementById("userInput").value;
    const message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));
    event.preventDefault();
});

三、利用Blazor技术

Blazor是一个框架，可以让你使用C#来编写交互式Web用户界面。Blazor有两种模式：Blazor Server和Blazor WebAssembly。Blazor Server在服务器上运行C#代码，并通过SignalR与客户端通信。Blazor WebAssembly在客户端浏览器中运行C#代码。

1、创建Blazor项目

在Visual Studio中，新建一个Blazor项目，选择Blazor Server或Blazor WebAssembly模板。

2、编写Razor组件

在Blazor项目中，你可以编写Razor组件，这些组件可以包含HTML和C#代码。例如：

@page "/counter"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
    }
}

3、前端JS与Blazor交互

在Blazor中，你可以使用JavaScript与C#互操作。例如，在Razor组件中调用JS函数：

@page "/jsinterop"
@inject IJSRuntime JS
<button class="btn btn-primary" @onclick="CallJSFunction">Call JS Function</button>
@code {
    private async Task CallJSFunction()
    {
        await JS.InvokeVoidAsync("alert", "Hello from C#");
    }
}

四、通过Node.js与C#的集成

1、使用Edge.js

Edge.js是一个库，可以让你在Node.js中调用C#代码。首先，安装Edge.js：

npm install edge-js

2、编写C#代码

创建一个C#函数，并使用Edge.js将其暴露给Node.js：

const edge = require('edge-js');
const helloWorld = edge.func(function () {
    /*
    async (input) => {
        return ".NET welcomes " + input.ToString();
    }
    */
});
helloWorld('JavaScript', function (error, result) {
    if (error) throw error;
    console.log(result);
});

3、集成Node.js与C#

通过Edge.js，你可以在Node.js应用中调用C#代码，并将结果返回给前端JS脚本，从而实现与C#代码的交互。

结论

JS脚本与C#脚本的交互可以通过多种方式实现，具体选择哪种方式取决于项目的需求和技术架构。使用Web API是最常见的方式，可以很方便地实现前后端的分离和数据交互。SignalR适用于需要实时通信的场景，如在线聊天和实时通知。Blazor则是一个全新的选择，可以让你在前端使用C#代码。Edge.js提供了在Node.js环境中调用C#代码的能力，适用于特定的集成场景。无论选择哪种方式，都需要根据项目的实际需求进行权衡和选择。