js 调用.net代码怎么写

在 JavaScript 中调用 .NET 代码的方法有几种，如：通过 AJAX 调用 Web API、使用 Blazor 框架、通过 SignalR 实现实时通信。其中，使用 AJAX 调用 Web API 是最常见和灵活的方法。这种方法允许您在客户端使用 JavaScript 发起 HTTP 请求，并在服务器端通过 .NET 处理请求并返回响应。下面详细描述其中一种方法，即通过 AJAX 调用 Web API。

一、AJAX 调用 Web API

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过 AJAX 调用 Web API，您可以轻松地将 JavaScript 与 .NET 代码集成。以下是实现步骤：

1、设置 Web API 项目

首先，您需要在 .NET 中创建一个 Web API 项目。这个项目将处理来自 JavaScript 的 HTTP 请求，并返回适当的响应。

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);
        }
    }
}

在上述代码中，我们创建了一个简单的控制器 SampleController，它包含一个 GET 方法 GetData，该方法返回一个 JSON 响应。

2、前端 AJAX 调用

在前端，您可以使用 JavaScript 的 fetch API 或 jQuery 的 AJAX 方法来调用上述 Web API。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Call Example</title>
</head>
<body>
    <button id="fetchDataBtn">Fetch Data</button>
    <div id="result"></div>
    <script>
        document.getElementById('fetchDataBtn').addEventListener('click', function() {
            fetch('https://yourdomain.com/api/sample/getdata')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('result').innerText = `Name: ${data.Name}, Age: ${data.Age}`;
                })
                .catch(error => console.error('Error fetching data:', error));
        });
    </script>
</body>
</html>

在这个示例中，当用户点击按钮时，JavaScript 会发起一个 GET 请求到 Web API，并将返回的数据展示在页面上。

二、使用 Blazor 框架

Blazor 是一个用于构建交互式 Web UI 的 .NET 框架。它允许您使用 C# 而不是 JavaScript 来编写客户端逻辑。

1、创建 Blazor 项目

首先，您需要创建一个 Blazor 项目。在 Visual Studio 中，选择“创建新项目”，然后选择“Blazor WebAssembly App”。

2、创建组件

在 Blazor 项目中，您可以创建一个组件来调用 .NET 代码。

@page "/fetchdata"
@inject HttpClient Http
<PageTitle>Fetch Data</PageTitle>
<h3>Fetch Data</h3>
<button @onclick="FetchData">Fetch Data</button>
<p>@message</p>
@code {
    private string message;
    private async Task FetchData()
    {
        var response = await Http.GetFromJsonAsync<Data>("api/sample/getdata");
        message = $"Name: {response.Name}, Age: {response.Age}";
    }
    public class Data
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

在上述代码中，当用户点击按钮时，Blazor 会发起一个 GET 请求到 Web API，并将返回的数据展示在页面上。

三、通过 SignalR 实现实时通信

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

1、设置 SignalR 项目

首先，您需要在 .NET 中创建一个 SignalR 项目。

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

2、前端 SignalR 调用

在前端，您可以使用 JavaScript 的 SignalR 客户端库来连接到 SignalR 服务。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SignalR Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.11/signalr.min.js"></script>
</head>
<body>
    <input type="text" id="userInput" placeholder="Name" />
    <input type="text" id="messageInput" placeholder="Message" />
    <button id="sendMessageBtn">Send Message</button>
    <ul id="messagesList"></ul>
    <script>
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/chathub")
            .build();
        connection.on("ReceiveMessage", function (user, message) {
            const li = document.createElement("li");
            li.textContent = `${user}: ${message}`;
            document.getElementById("messagesList").appendChild(li);
        });
        connection.start().catch(err => console.error(err.toString()));
        document.getElementById("sendMessageBtn").addEventListener("click", function () {
            const user = document.getElementById("userInput").value;
            const message = document.getElementById("messageInput").value;
            connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));
        });
    </script>
</body>
</html>

在这个示例中，用户可以输入消息并发送到服务器，服务器会将消息广播给所有连接的客户端。

四、使用 .NET Core 中间件

1、创建中间件

在 .NET Core 中，您可以创建自定义中间件来处理特定的请求。

public class CustomMiddleware
{
    private readonly RequestDelegate _next;
    public CustomMiddleware(RequestDelegate next)
    {
        _next = next;
    }
    public async Task InvokeAsync(HttpContext context)
    {
        // Custom logic
        await context.Response.WriteAsync("Hello from custom middleware!");
    }
}

2、注册中间件

在 Startup.cs 中注册中间件。

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseMiddleware<CustomMiddleware>();
}

3、前端调用

前端可以使用 fetch API 调用中间件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Middleware Example</title>
</head>
<body>
    <button id="callMiddlewareBtn">Call Middleware</button>
    <div id="result"></div>
    <script>
        document.getElementById('callMiddlewareBtn').addEventListener('click', function() {
            fetch('/custom')
                .then(response => response.text())
                .then(data => {
                    document.getElementById('result').innerText = data;
                })
                .catch(error => console.error('Error calling middleware:', error));
        });
    </script>
</body>
</html>

五、总结

通过 AJAX 调用 Web API、使用 Blazor 框架、通过 SignalR 实现实时通信以及使用 .NET Core 中间件，都是在 JavaScript 中调用 .NET 代码的有效方法。每种方法都有其独特的优势和适用场景，您可以根据具体需求选择最适合的解决方案。如果需要更高效的项目管理和团队协作，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。