ASP.NET Core MVC中调用ExecuteCommand时更新textarea值的实现方法

ASP.NET Core MVC默认是请求-响应模式，服务端无法主动给客户端推送数据，要实现服务端事件触发后自动更新前端视图，最佳方案是使用ASP.NET Core内置的SignalR组件，基于WebSocket全双工通信实现低延迟主动推送，比前端定时轮询的方案性能高、延迟更低。

1. 配置SignalR服务 #

首先在项目的Program.cs中添加SignalR相关配置：

var builder = WebApplication.CreateBuilder(args);
// 原有服务注册（控制器、日志等）保持不变
// 添加SignalR服务
builder.Services.AddSignalR();
// 注册你的ServiceClass为全局服务，单用户场景用Singleton，多用户场景用Scoped
builder.Services.AddSingleton<ServiceClass>();

var app = builder.Build();
// 原有中间件配置（静态文件、路由等）保持不变
// 映射SignalR集线器路由
app.MapHub<RequestUpdateHub>("/requestUpdateHub");

app.Run();

2. 定义SignalR集线器 #

新建RequestUpdateHub.cs集线器类：

using Microsoft.AspNetCore.SignalR;

public class RequestUpdateHub : Hub
{
    // 不需要额外定义方法，直接通过IHubContext从服务端主动推送消息即可
}

3. 修改ServiceClass类 #

注入IHubContext，在ExecuteCommand执行完成后触发推送：

using Microsoft.AspNetCore.SignalR;

public class ServiceClass
{
    public string Request {get; set;}
    private readonly IHubContext<RequestUpdateHub> _hubContext;

    // 构造函数注入Hub上下文
    public ServiceClass(IHubContext<RequestUpdateHub> hubContext)
    {
        _hubContext = hubContext;
    }
    
    // 注意将原有private方法改为public，或者内部触发执行时调用推送逻辑
    public void ExecuteCommand()
    {
        Request = "Some Text"; // 替换为你的语音识别结果赋值逻辑
        // 主动推送新的Request内容给客户端，多用户场景可改为Clients.User(userId).SendAsync仅推送给指定用户
        _hubContext.Clients.All.SendAsync("ReceiveRequestUpdate", Request);
    }
}

4. 前端视图添加SignalR客户端逻辑 #

修改Index视图代码，添加SignalR连接和事件监听：

<!-- 原有textarea代码保持不变 -->
<textarea id="story" name="story"
          rows="9" cols="80" style="margin-left: 10px; resize: none; margin-top: 10px">Here I want to update the text
</textarea>

<!-- 引入SignalR客户端JS，可自行下载到本地项目引用 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.12/signalr.min.js"></script>
<script>
// 建立SignalR连接
const connection = new signalR.HubConnectionBuilder()
    .withUrl("/requestUpdateHub")
    .build();

// 监听服务端推送的更新事件
connection.on("ReceiveRequestUpdate", function (newRequestText) {
    // 直接更新textarea内容
    document.getElementById("story").value = newRequestText;
});

// 启动连接
connection.start().catch(err => console.error(err.toString()));
</script>

• 不要在ServiceClassModel中定义ServiceClass Logic属性，视图模型仅存储需要传递给视图的纯数据，业务逻辑类统一通过依赖注入管理生命周期
• 多用户场景建议给ServiceClass绑定用户标识，推送时仅推送给对应操作用户，避免不同用户的数据串扰

内容的提问来源于stack exchange，提问作者DarthYoda