在 SignalR Hub 中将部分视图呈现为字符串

Question

我正在尝试通过 SignalR Hub 在我的一个视图中动态加载部分视图内容以更新客户端数据。为此，我必须在 SignalR Hub 中将部分视图呈现为字符串，并将该字符串发送到客户端。我知道如何在控制器内将部分视图呈现为字符串，但我如何在控制器外执行此操作？

Answer 1

SignalR 让我们有机会摆脱 Razor Pages 并使用 Plain Javascript 呈现 Html 异步。因此，如果您想呈现 html 的模板，只需编写一个函数模板，其中 returns 您想要的 html 代码

function messageMeTemplate(user, message) {
return `
    <div class="d-flex justify-content-end ms-auto">
        <p class="p-3 bg-primary shadow-1-strong text-white rounded-3" style="max-width: 533px">
            ${message}
            <small class="float-end mt-4">${user}</small>
        </p>
        <img src="https://mdbootstrap.com/img/new/avatars/1.jpg" class="rounded-circle ms-2" style="width: 30px; height: 30px" alt="" />
    </div>
`;
}

您还可以在该命令的剃刀页面中编写一个带有脚本的部分，以加载 div 中的部分视图，您希望将其用于 Javascript。

$('#AREA_PARTIAL_VIEW').load('@Url.Action("Insert_Partial_View","Customers")');

这两个示例都需要一个模板来呈现它。我想提一下，我们谈论的是 SignalR Core。

Answer 2

I am trying to dynamically load partial view contents in one of my views via a SignalR Hub to update client side data. For this I have to render the Partial view as a string in the SignalR Hub and send this string to the client side.

如果您想在 hub 方法中将 view/partial 视图呈现为 html 字符串，可以参考 this blog with example that demonstrates how to render a Partial View to string.

我在我的 SignalR 应用程序中使用示例代码 RazorPartialToStringRenderer 进行了测试，这对我来说效果很好。

private readonly IRazorPartialToStringRenderer _renderer;
public ChatHub(IRazorPartialToStringRenderer renderer)
{
    _renderer = renderer;
}
public async Task SendMessage(string user, string message)
{

    var view_result_mes = await _renderer.RenderPartialToStringAsync<string>("_SayHelloPartialView", null);

    //...

上面博客引用的代码

public interface IRazorPartialToStringRenderer
{
    Task<string> RenderPartialToStringAsync<TModel>(string partialName, TModel model);
}

public class RazorPartialToStringRenderer : IRazorPartialToStringRenderer
{
    private IRazorViewEngine _viewEngine;
    private ITempDataProvider _tempDataProvider;
    private IServiceProvider _serviceProvider;
    public RazorPartialToStringRenderer(
        IRazorViewEngine viewEngine,
        ITempDataProvider tempDataProvider,
        IServiceProvider serviceProvider)
    {
        _viewEngine = viewEngine;
        _tempDataProvider = tempDataProvider;
        _serviceProvider = serviceProvider;
    }
    public async Task<string> RenderPartialToStringAsync<TModel>(string partialName, TModel model)
    {
        var actionContext = GetActionContext();
        var partial = FindView(actionContext, partialName);
        using (var output = new StringWriter())
        {
            var viewContext = new ViewContext(
                actionContext,
                partial,
                new ViewDataDictionary<TModel>(
                    metadataProvider: new EmptyModelMetadataProvider(),
                    modelState: new ModelStateDictionary())
                {
                    Model = model
                },
                new TempDataDictionary(
                    actionContext.HttpContext,
                    _tempDataProvider),
                output,
                new HtmlHelperOptions()
            );
            await partial.RenderAsync(viewContext);
            return output.ToString();
        }
    }
    private IView FindView(ActionContext actionContext, string partialName)
    {
        var getPartialResult = _viewEngine.GetView(null, partialName, false);
        if (getPartialResult.Success)
        {
            return getPartialResult.View;
        }
        var findPartialResult = _viewEngine.FindView(actionContext, partialName, false);
        if (findPartialResult.Success)
        {
            return findPartialResult.View;
        }
        var searchedLocations = getPartialResult.SearchedLocations.Concat(findPartialResult.SearchedLocations);
        var errorMessage = string.Join(
            Environment.NewLine,
            new[] { $"Unable to find partial '{partialName}'. The following locations were searched:" }.Concat(searchedLocations)); ;
        throw new InvalidOperationException(errorMessage);
    }
    private ActionContext GetActionContext()
    {
        var httpContext = new DefaultHttpContext
        {
            RequestServices = _serviceProvider
        };
        return new ActionContext(httpContext, new RouteData(), new ActionDescriptor());
    }
}

测试结果

Answer 3

这是我想出的解决方案，感谢非寒

RazorPartialToStringRenderer class:

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Abstractions;
using Microsoft.AspNetCore.Mvc.ModelBinding;
using Microsoft.AspNetCore.Mvc.Razor;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewEngines;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Routing;
using System;
using System.IO;
using System.Linq;
using System.Threading.Tasks;

public interface IRazorPartialToStringRenderer
{
    Task<string> RenderPartialToStringAsync<TModel>(string partialName, TModel model);
}

public class RazorPartialToStringRenderer : IRazorPartialToStringRenderer
{
    private IRazorViewEngine _viewEngine;
    private ITempDataProvider _tempDataProvider;
    private IServiceProvider _serviceProvider;
    public RazorPartialToStringRenderer(
        IRazorViewEngine viewEngine,
        ITempDataProvider tempDataProvider,
        IServiceProvider serviceProvider)
    {
        _viewEngine = viewEngine;
        _tempDataProvider = tempDataProvider;
        _serviceProvider = serviceProvider;
    }
    public async Task<string> RenderPartialToStringAsync<TModel>(string partialName, TModel model)
    {
        var actionContext = GetActionContext();
        var partial = FindView(actionContext, partialName);
        using (var output = new StringWriter())
        {
            var viewContext = new ViewContext(
                actionContext,
                partial,
                new ViewDataDictionary<TModel>(
                    metadataProvider: new EmptyModelMetadataProvider(),
                    modelState: new ModelStateDictionary())
                {
                    Model = model
                },
                new TempDataDictionary(
                    actionContext.HttpContext,
                    _tempDataProvider),
                output,
                new HtmlHelperOptions()
            );
            await partial.RenderAsync(viewContext);
            return output.ToString();
        }
    }
    private IView FindView(ActionContext actionContext, string partialName)
    {
        var getPartialResult = _viewEngine.GetView(null, partialName, false);
        if (getPartialResult.Success)
        {
            return getPartialResult.View;
        }
        var findPartialResult = _viewEngine.FindView(actionContext, partialName, false);
        if (findPartialResult.Success)
        {
            return findPartialResult.View;
        }
        var searchedLocations = getPartialResult.SearchedLocations.Concat(findPartialResult.SearchedLocations);
        var errorMessage = string.Join(
            Environment.NewLine,
            new[] { $"Unable to find partial '{partialName}'. The following locations were searched:" }.Concat(searchedLocations));
        throw new InvalidOperationException(errorMessage);
    }
    private ActionContext GetActionContext()
    {
        var httpContext = new DefaultHttpContext
        {
            RequestServices = _serviceProvider
        };
        return new ActionContext(httpContext, new RouteData(), new ActionDescriptor());
    }
}

Hub 和 HubMethods classes:

using System;
using System.Threading.Tasks;
using System.Timers;
using Microsoft.AspNetCore.SignalR;
using Microsoft.Extensions.DependencyInjection;

namespace WebApplication
{
    public class EBSHubMethods
    {
        private readonly IHubContext<EBSHub> _hubContext;
        private readonly IServiceScopeFactory _serviceScopeFactory;
        private readonly Timer timer = null;

        public EBSHubMethods(IHubContext<EBSHub> hubContext, IServiceScopeFactory serviceScopeFactory)
        {
            _hubContext = hubContext;
            _serviceScopeFactory = serviceScopeFactory;

            timer = new Timer();
            timer.Interval = 10000;
            timer.Elapsed += OnTimedEvent;
            timer.Start();
        }

        private async Task<string> GetEBSListViewAsString()
        {
            using (var scope = _serviceScopeFactory.CreateScope())
            {
                var _renderer = scope.ServiceProvider.GetService<IRazorPartialToStringRenderer>();
                string viewAsString = await _renderer.RenderPartialToStringAsync("~/Views/EBS/_EBSPartial.cshtml", BaseStations);
                return viewAsString;
            }
        }

        private async void OnTimedEvent(Object source, ElapsedEventArgs e)
        {
            await _hubContext.Clients.All.SendAsync("UpdateEBSList", await GetEBSListViewAsString());            
        }

        public async void SendEBSList(string connectionId)
        {
            await _hubContext.Clients.Client(connectionId).SendAsync("UpdateEBSList", await GetEBSListViewAsString());
        }
    }

    public class EBSHub : Hub
    {
        private readonly EBSHubMethods _EBSHubMethods = null;

        public EBSHub(EBSHubMethods EBSHubMethods)
        {
            _EBSHubMethods = EBSHubMethods;            
        }

        public override async Task OnConnectedAsync()
        {
            _EBSHubMethods.SendEBSList(Context.ConnectionId);
            await base.OnConnectedAsync();
        }

        public override async Task OnDisconnectedAsync(Exception exception)
        {
            await base.OnDisconnectedAsync(exception);
        }
    }
}

在 Startup.cs 文件中，我们注册了 Hub，并将 EBSHubMethods 添加为单例服务，将 RazorPartialToStringRenderer 添加为瞬态服务：

services.AddSingleton<EBSHubMethods>();
services.AddTransient<IRazorPartialToStringRenderer, RazorPartialToStringRenderer>();

在 SignalR Hub 中将部分视图呈现为字符串

Rendering Partial view as a string inside SignalR Hub

c#

asp.net-mvc

asp.net-core-2.1

asp.net-core-signalr