js里怎么写c#方法

在JavaScript中调用C#方法，可以通过使用ASP.NET的Web API、SignalR，或Blazor技术进行实现。 其中，使用ASP.NET Web API是较为常见且成熟的方法。它允许在服务器端编写C#方法，并通过HTTP请求在客户端的JavaScript中调用这些方法。具体实现如下：

一、使用ASP.NET Web API

ASP.NET Web API是一种用于构建RESTful服务的框架，它使得在服务器端编写的C#方法可以通过HTTP请求被客户端调用。以下是详细的实现步骤：

1. 创建ASP.NET Web API项目

首先，需要在Visual Studio中创建一个新的ASP.NET Web API项目。选择“ASP.NET Core Web Application”模板，然后选择“API”选项。

2. 编写C#方法

在Controllers文件夹中创建一个新的API控制器。例如，创建一个名为SampleController.cs的控制器，并在其中编写一个C#方法：

using Microsoft.AspNetCore.Mvc;

namespace YourNamespace.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class SampleController : ControllerBase
    {
        [HttpGet("GetData")]
        public IActionResult GetData()
        {
            var data = new { Name = "John Doe", Age = 30 };
            return Ok(data);
        }
    }
}

3. 配置启动文件

在Startup.cs文件中，确保已添加必要的中间件和服务配置：

public void ConfigureServices(IServiceCollection services)

{
    services.AddControllers();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

4. 在JavaScript中调用C#方法

在客户端的JavaScript代码中，可以使用fetch或其他HTTP库（如Axios）来调用C#方法。例如，使用fetch来调用上述GetData方法：

fetch('https://yourapiurl/api/sample/GetData')

    .then(response => response.json())
    .then(data => {
        console.log(data); // 输出: { Name: "John Doe", Age: 30 }
    })
    .catch(error => console.error('Error:', error));

二、使用SignalR

SignalR是一种用于实现实时Web功能的ASP.NET库，它可以在客户端和服务器之间进行双向通信。SignalR适用于需要实时更新的场景，如聊天应用、游戏和实时通知。

1. 安装SignalR

在ASP.NET项目中，通过NuGet安装SignalR包：

dotnet add package Microsoft.AspNetCore.SignalR

2. 创建Hub

在项目中创建一个Hub类，例如ChatHub.cs：

using Microsoft.AspNetCore.SignalR;

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

3. 配置SignalR

在Startup.cs文件中，添加SignalR服务并配置中间件：

public void ConfigureServices(IServiceCollection services)

{
    services.AddSignalR();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<ChatHub>("/chathub");
    });
}

4. 在JavaScript中调用Hub方法

在客户端的JavaScript代码中，使用SignalR客户端库连接到Hub并调用方法：

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.18/signalr.min.js"></script>

<script>
    const connection = new signalR.HubConnectionBuilder()
        .withUrl("/chathub")
        .build();
    connection.on("ReceiveMessage", (user, message) => {
        console.log(`${user}: ${message}`);
    });
    connection.start().then(() => {
        connection.invoke("SendMessage", "User1", "Hello, World!");
    }).catch(err => console.error(err.toString()));
</script>

三、使用Blazor

Blazor是一个用于构建交互式Web UI的框架，可以使用C#代替JavaScript来编写客户端逻辑。Blazor有两种模式：Blazor Server和Blazor WebAssembly。

1. 创建Blazor项目

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

2. 编写组件

在Blazor项目中创建一个新的组件，例如FetchData.razor，并编写C#方法：

@page "/fetchdata"

@inject HttpClient Http
<h3>Fetch Data</h3>
@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.DateFormatted</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}
@code {
    private WeatherForecast[] forecasts;
    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }
}

通过上述方法，可以在JavaScript中调用C#方法，实现前后端的交互。使用ASP.NET Web API是最常见且易于实现的方法，而SignalR和Blazor则适用于特定的实时更新和全栈C#开发需求。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来管理和协作项目，以提高开发效率。

相关问答FAQs：

1. 如何在JavaScript中调用C#方法？
在JavaScript中调用C#方法，可以使用JavaScript的Interop功能。通过在C#方法上添加特殊的Interop标记，并使用JavaScript的window对象来调用该方法。例如，你可以使用以下代码在JavaScript中调用名为"myCSharpMethod"的C#方法：

window.myCSharpMethod();

2. 如何在JavaScript中传递参数给C#方法？
要在JavaScript中将参数传递给C#方法，可以使用Interop功能来实现。在调用C#方法的时候，可以将参数作为函数的参数传递给它。例如，如果你想将名为"param1"的参数传递给C#方法"myCSharpMethod"，你可以这样写：

window.myCSharpMethod(param1);

在C#方法中，你可以通过在方法的参数列表中声明相应的参数来接收这些参数。

3. 如何在JavaScript中从C#方法中获取返回值？
要从C#方法中获取返回值，可以使用Interop功能。在C#方法中，你可以使用特殊的Interop标记来指定返回值的类型，并使用JavaScript的window对象来访问该返回值。例如，如果你想从C#方法"myCSharpMethod"中获取返回值，你可以这样写：

var returnValue = window.myCSharpMethod();

在C#方法中，你可以使用return语句来返回值。在JavaScript中，你可以通过returnValue变量来获取该返回值。请确保C#方法返回的类型与JavaScript中接收返回值的变量类型相匹配。