將部分視圖渲染為 SignalR 集線器內的字符串

Question

我正在嘗試通過 SignalR 集線器在我的一個視圖中動態加載部分視圖內容，以更新客戶端數據。 為此，我必須在 SignalR 集線器中將部分視圖呈現為字符串並將此字符串發送到客戶端。 我知道如何在 controller 內將部分視圖呈現為字符串，但我將如何在 controller 之外執行此操作？

Answer 1

我正在嘗試通過 SignalR 集線器在我的一個視圖中動態加載部分視圖內容，以更新客戶端數據。 為此，我必須在 SignalR 集線器中將部分視圖呈現為字符串並將此字符串發送到客戶端。

如果您想在您的 hub 方法中將視圖/部分視圖呈現為 html 字符串，您可以參考此博客的示例，該示例演示了如何將部分視圖呈現為字符串。

我在我的 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 2

SignalR 讓我們有機會擺脫 Razor 頁面並使用普通 Javascript 來呈現您 Z3135D14AAE777FAE0135D。 因此，如果您想渲染 html 的模板，只需編寫一個 function 模板，它會返回您想要的 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>
`;
}

您也可以在此命令的 razor 頁面中使用腳本編寫部分，以將部分視圖加載到您想要用於 Javascript 的 div 中。

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

這兩個示例都需要一個模板來呈現它。 我想提一下，我們談論的是 SignalR Core。

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 類：

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 添加為 singleton 服務和 RazorPartialToStringRenderer 作為臨時服務：

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