js怎么调用cs函数

JavaScript调用C#函数的方法有：通过Web服务、使用SignalR、通过Web API、通过Blazor等。 其中，通过Web API 是一种常见且有效的方法，它允许JavaScript代码通过HTTP请求与服务器端的C#代码进行交互。使用Web API，你可以创建RESTful服务端点，JavaScript可以通过AJAX调用这些端点，从而实现与C#函数的交互。

一、通过Web服务

1. Web服务简介

Web服务是一种标准的、独立于平台的技术，它允许不同的应用程序通过网络进行通信。使用Web服务，JavaScript可以调用服务器上的C#函数，服务器端的C#代码可以处理请求并返回结果。

2. 使用ASP.NET创建Web服务

ASP.NET是一种流行的Web开发框架，它提供了创建Web服务的简便方法。你可以使用ASP.NET创建一个Web API，然后通过JavaScript调用这个API。以下是一个简单的示例：

创建一个ASP.NET Web API项目。
添加一个控制器，例如 SampleController，并在其中定义C#函数。

using System.Web.Http;
public class SampleController : ApiController
{
    [HttpGet]
    public IHttpActionResult GetSampleData()
    {
        // 你的C#逻辑代码
        var data = new { Name = "John Doe", Age = 30 };
        return Ok(data);
    }
}

在你的HTML文件中，通过JavaScript调用这个API。

<!DOCTYPE html>
<html>
<head>
    <title>Call C# from JavaScript</title>
    <script>
        function callCSharpFunction() {
            fetch('api/sample/getsampledata')
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                })
                .catch(error => console.error('Error:', error));
        }
    </script>
</head>
<body>
    <button onclick="callCSharpFunction()">Call C# Function</button>
</body>
</html>

二、使用SignalR

1. SignalR简介

SignalR是一个用于构建实时Web应用程序的ASP.NET库。它使得服务器端代码可以将内容推送到客户端，而不需要客户端频繁轮询服务器。SignalR支持WebSocket协议，使得数据传输更加高效。

2. 使用SignalR实现JavaScript调用C#函数

在你的ASP.NET项目中添加SignalR库。

Install-Package Microsoft.AspNet.SignalR

配置SignalR。

using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRStartup))]
public class SignalRStartup
{
    public void Configuration(IAppBuilder app)
    {
        app.MapSignalR();
    }
}

创建一个Hub类来处理客户端的调用。

using Microsoft.AspNet.SignalR;
public class SampleHub : Hub
{
    public void CallCSharpFunction()
    {
        // 你的C#逻辑代码
        Clients.All.receiveMessage("Hello from C#");
    }
}

在HTML文件中，通过JavaScript调用SignalR Hub中的方法。

<!DOCTYPE html>
<html>
<head>
    <title>Call C# from JavaScript using SignalR</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.7/signalr.min.js"></script>
    <script>
        $(function () {
            const connection = new signalR.HubConnectionBuilder()
                .withUrl("/sampleHub")
                .build();
            connection.on("receiveMessage", function (message) {
                console.log(message);
            });
            connection.start().then(function () {
                connection.invoke("CallCSharpFunction");
            }).catch(function (err) {
                return console.error(err.toString());
            });
        });
    </script>
</head>
<body>
</body>
</html>

三、通过Web API

1. Web API简介

Web API是一种用于构建RESTful应用程序的框架。通过Web API，你可以轻松地将C#代码暴露为API端点，从而使得JavaScript可以通过HTTP请求调用这些端点。

2. 使用ASP.NET Web API实现JavaScript调用C#函数

创建一个ASP.NET Web API项目。
添加一个控制器，例如 SampleController，并在其中定义C#函数。

using System.Web.Http;
public class SampleController : ApiController
{
    [HttpPost]
    public IHttpActionResult PostSampleData([FromBody] SampleModel model)
    {
        // 你的C#逻辑代码
        var result = new { Success = true, Message = "Data received", Data = model };
        return Ok(result);
    }
}
public class SampleModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}

在HTML文件中，通过JavaScript调用这个API。

<!DOCTYPE html>
<html>
<head>
    <title>Call C# from JavaScript using Web API</title>
    <script>
        function callCSharpFunction() {
            const data = { Name: "Jane Doe", Age: 25 };
            fetch('api/sample/postsampledata', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                console.log(data);
            })
            .catch(error => console.error('Error:', error));
        }
    </script>
</head>
<body>
    <button onclick="callCSharpFunction()">Call C# Function</button>
</body>
</html>

四、通过Blazor

1. Blazor简介

Blazor是一个使用C#和Razor语法来构建交互式Web应用程序的框架。Blazor提供了两种模式：Blazor Server和Blazor WebAssembly。通过Blazor，你可以在浏览器中直接运行C#代码，而无需JavaScript。

2. 使用Blazor实现JavaScript调用C#函数

创建一个Blazor WebAssembly项目。
在Blazor组件中定义一个C#函数。

@page "/sample"
@inject IJSRuntime JSRuntime
<h3>Call C# Function from JavaScript</h3>
<button @onclick="CallJavaScriptFunction">Call JavaScript Function</button>
@code {
    private async Task CallJavaScriptFunction()
    {
        await JSRuntime.InvokeVoidAsync("callCSharpFunction");
    }
    [JSInvokable]
    public static void CallCSharpFunction()
    {
        Console.WriteLine("C# function called from JavaScript");
    }
}

在HTML文件中定义JavaScript函数来调用Blazor中的C#函数。

<!DOCTYPE html>
<html>
<head>
    <title>Call C# from JavaScript using Blazor</title>
    <script>
        function callCSharpFunction() {
            DotNet.invokeMethodAsync('YourAssemblyName', 'CallCSharpFunction')
                .then(data => {
                    console.log('C# function called');
                })
                .catch(error => console.error('Error:', error));
        }
    </script>
</head>
<body>
    <app>Loading...</app>
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

五、总结

通过以上几种方法，你可以在JavaScript中调用C#函数，实现客户端与服务器端的交互。其中，通过Web API 是一种常见且有效的方法，它允许你创建RESTful服务端点，JavaScript可以通过AJAX调用这些端点，从而实现与C#函数的交互。如果你需要实时通信，可以考虑使用SignalR。对于需要在客户端运行C#代码的场景，Blazor 是一个不错的选择。无论选择哪种方法，都需要根据实际需求和项目架构来进行选择。