js 怎么调用cs里的方法

在JavaScript中调用C#方法的几种方式

在现代Web开发中，前端和后端技术的交互变得越来越重要。JavaScript作为前端最常用的脚本语言，和C#作为后端广泛使用的编程语言，如何在JavaScript中调用C#方法成了许多开发者关心的问题。通过AJAX请求、Web API、SignalR、Blazor等方法可以实现JavaScript调用C#方法。本文将详细讨论这些方法，并提供实际的代码示例。

一、通过AJAX请求调用C#方法

1. 使用Ajax调用Web API

AJAX（Asynchronous JavaScript and XML）是一种创建快速动态网页的技术。通过AJAX，我们可以在不重新加载整个网页的情况下，与服务器进行异步通信。

1.1 Web API的创建

首先，我们需要在C#中创建一个Web API来处理请求。假设我们有一个简单的API控制器：

using System.Web.Http;
public class SampleController : ApiController
{
    [HttpGet]
    public string GetMessage()
    {
        return "Hello from C#";
    }
}

1.2 在JavaScript中调用这个API

接下来，我们可以在JavaScript中使用AJAX来调用这个API：

function callApi() {
    $.ajax({
        url: '/api/sample/getmessage',
        type: 'GET',
        success: function(response) {
            console.log(response);
        },
        error: function(error) {
            console.log(error);
        }
    });
}
callApi();

2. 使用Fetch API

Fetch API是现代浏览器中提供的用于发起网络请求的接口，它比传统的XMLHttpRequest更加简洁和灵活。

function callApi() {
    fetch('/api/sample/getmessage')
        .then(response => response.text())
        .then(data => console.log(data))
        .catch(error => console.log(error));
}
callApi();

二、使用SignalR进行实时通信

1. SignalR简介

SignalR是一个用于添加实时Web功能的ASP.NET库。它允许服务器端代码将即时内容推送到客户端。

2. 设置SignalR

2.1 在服务器端配置SignalR

首先，我们需要在服务器端配置SignalR：

using Microsoft.AspNet.SignalR;
using Owin;
public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        app.MapSignalR();
    }
}
public class MyHub : Hub
{
    public void Send(string message)
    {
        Clients.All.addMessage(message);
    }
}

2.2 在客户端使用SignalR

然后，我们可以在JavaScript中使用SignalR客户端库：

$(function () {
    var connection = $.hubConnection();
    var hub = connection.createHubProxy('myHub');
    hub.on('addMessage', function (message) {
        console.log(message);
    });
    connection.start().done(function () {
        hub.invoke('send', 'Hello from JavaScript');
    });
});

三、使用Blazor进行交互

1. Blazor简介

Blazor是一个用于构建交互式Web UI的框架。它允许我们使用C#代替JavaScript来构建前端。

2. Blazor服务器端调用C#方法

在Blazor中，我们可以直接在C#代码中调用JavaScript方法，反之亦然。

2.1 创建一个Blazor组件

@page "/counter"
@using Microsoft.JSInterop
@inject IJSRuntime JS
<h3>Counter</h3>
<p>Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;
    private async void IncrementCount()
    {
        currentCount++;
        await JS.InvokeVoidAsync("alert", $"Current count is {currentCount}");
    }
}

2.2 JavaScript调用C#方法

我们也可以在JavaScript中调用C#方法：

function callDotNetMethod() {
    DotNet.invokeMethodAsync('YourAssemblyName', 'YourMethodName')
        .then(data => console.log(data))
        .catch(error => console.log(error));
}

在C#中，我们需要定义这个方法：

using Microsoft.JSInterop;
public class MyComponent
{
    [JSInvokable]
    public static string YourMethodName()
    {
        return "Hello from C#";
    }
}

四、使用WebSockets进行双向通信

1. WebSockets简介

WebSockets是一种在单个TCP连接上进行全双工通信的协议。它适用于需要频繁更新数据的应用，如在线聊天、股票行情等。

2. 设置WebSocket服务器

在C#中，我们可以使用System.Net.WebSockets来创建WebSocket服务器：

using System.Net.WebSockets;
using System.Threading;
using System.Threading.Tasks;
public class WebSocketHandler
{
    private WebSocket _webSocket;
    public WebSocketHandler(WebSocket webSocket)
    {
        _webSocket = webSocket;
    }
    public async Task Handle()
    {
        var buffer = new byte[1024 * 4];
        while (_webSocket.State == WebSocketState.Open)
        {
            var result = await _webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
            if (result.MessageType == WebSocketMessageType.Close)
            {
                await _webSocket.CloseAsync(WebSocketCloseStatus.NormalClosure, string.Empty, CancellationToken.None);
            }
            else
            {
                await _webSocket.SendAsync(new ArraySegment<byte>(buffer, 0, result.Count), WebSocketMessageType.Text, result.EndOfMessage, CancellationToken.None);
            }
        }
    }
}

3. 在JavaScript中使用WebSocket

var socket = new WebSocket("ws://yourserver.com/socket");
socket.onopen = function(event) {
    socket.send("Hello from JavaScript");
};
socket.onmessage = function(event) {
    console.log(event.data);
};
socket.onclose = function(event) {
    console.log("Connection closed");
};
socket.onerror = function(error) {
    console.log("Error: " + error.message);
};

五、使用gRPC进行高性能通信

1. gRPC简介

gRPC是一种现代的高性能RPC（Remote Procedure Call）框架。它使用HTTP/2作为传输协议，并且默认使用Protocol Buffers作为接口描述语言。

2. 设置gRPC服务器

首先，我们需要在C#中定义gRPC服务：

syntax = "proto3";
option csharp_namespace = "GrpcService";
service Greeter {
  rpc SayHello (HelloRequest) returns (HelloReply);
}
message HelloRequest {
  string name = 1;
}
message HelloReply {
  string message = 1;
}

然后，我们实现这个服务：

using Grpc.Core;
using System.Threading.Tasks;
public class GreeterService : Greeter.GreeterBase
{
    public override Task<HelloReply> SayHello(HelloRequest request, ServerCallContext context)
    {
        return Task.FromResult(new HelloReply { Message = "Hello " + request.Name });
    }
}

3. 在JavaScript中使用gRPC

目前，gRPC-Web是一个用于在浏览器中使用gRPC的库。我们可以使用它来与gRPC服务进行通信。

const { HelloRequest, GreeterClient } = require('./generated/helloworld_pb');
const { GrpcWebImpl } = require('@improbable-eng/grpc-web');
const client = new GreeterClient(new GrpcWebImpl('http://yourserver.com', {}));
const request = new HelloRequest();
request.setName('JavaScript');
client.sayHello(request, {}, (err, response) => {
    if (err) {
        console.error(err);
    } else {
        console.log(response.getMessage());
    }
});

结论

通过以上几种方式，我们可以在JavaScript中调用C#方法，从而实现前后端的紧密结合。通过AJAX请求、Web API、SignalR、Blazor等方法，我们可以根据具体的需求选择合适的技术方案，确保应用的高效和稳定。不同的方法有不同的优劣，开发者应根据实际需求和项目特点进行选择。例如，对于实时通信需求，SignalR和WebSockets是不错的选择，而对于高性能需求，gRPC则更为适合。

如果在项目团队管理过程中需要更高效的协作和项目管理工具，可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile，这两个系统可以帮助团队更好地管理项目进度和任务分配，提高整体工作效率。