那些遇到过的问题

以编程方式将 Razor 页面呈现为 HTML 字符串

Snæ*_*ørn 3 c# razorengine asp.net-core razor-pages asp.net-core-3.1

目标

  • 我正在尝试在后端生成一个 HTML 字符串，因为我想使用 HtmlToPDF 库将其转换为 PDF。
  • 我还希望能够在浏览器中轻松查看生成的 HTML，以便进行调试/调整。该页面仅在IsDevelopment().
  • 我希望它尽可能简单。

我正在使用 ASP.NET Core 3.1

方法

剃刀页

我想我会尝试新的Razor Pages，因为它们被宣传为非常简单。

@page
@using MyProject.Pages.Pdf
@model IndexModel

<h2>Test</h2>
<p>
    @Model.Message
</p>
Run Code Online (Sandbox Code Playgroud) 
namespace MyProject.Pages.Pdf
{
    public class IndexModel : PageModel
    {
        private readonly MyDbContext _context;

        public IndexModel(MyDbContext context)
        {
            _context = context;
        }

        public string Message { get; private set; } = "PageModel in C#";

        public async Task<IActionResult> OnGetAsync()
        {
            var count = await _context.Foos.CountAsync();

            Message += $" Server time is { DateTime.Now } and the Foo count is { count }";

            return Page();
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

这适用于浏览器 - 是的！

渲染并获取 HTML 字符串

我发现Render a Razor Page to string似乎可以做我想要的。

但这就是麻烦开始的地方:(

问题

首先，我觉得很奇怪，当你发现页面通过_razorViewEngine.FindPage它不知道如何填充ViewContext或Model。我认为的工作IndexModel是填充这些。我希望可以向 ASP.NET 请求IndexModel页面，就是这样。

无论如何……下一个问题。为了呈现页面，我必须手动创建一个，ViewContext并且必须为它提供一个Model. 但 Page 是模型，因为它是一个页面，所以它不是一个简单的 ViewModel。它依赖于 DI 并且它期望OnGetAsync()被执行以填充模型。这几乎是一个catch-22。

我还尝试通过获取视图而不是页面，_razorViewEngine.FindView但这也需要一个模型，所以我们又回到了 catch-22。

另一个问题。调试/调整页面的目的是轻松查看生成的内容。但是如果我必须创建一个Model外部，IndexModel那么它不再代表某处服务中实际生成的内容。

这一切让我怀疑我是否走在正确的道路上。或者我错过了什么？

Zhi*_* Lv 5

请参考以下步骤将局部视图渲染为字符串：

  1. 向名为 IrazorPartialToStringRenderer.cs 的 Services 文件夹添加一个接口。

     public interface IRazorPartialToStringRenderer
 {
     Task<string> RenderPartialToStringAsync<TModel>(string partialName, TModel model);
 }
    Run Code Online (Sandbox Code Playgroud)

  2. 使用以下代码将 C# 类文件添加到名为 RazorPartialToStringRenderer.cs 的 Services 文件夹：

     using System;
 using System.IO;
 using System.Linq;
 using System.Threading.Tasks;
 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;

 namespace RazorPageSample.Services
 {
     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());
         }
     }
 }
    Run Code Online (Sandbox Code Playgroud)

  3. ConfigureServices在Startup类中的方法中注册服务：

     public void ConfigureServices(IServiceCollection services)
 {
     services.AddRazorPages(); 
     services.AddTransient<IRazorPartialToStringRenderer, RazorPartialToStringRenderer>();
 }
    Run Code Online (Sandbox Code Playgroud)

  4. 使用 RenderPartialToStringAsync() 方法将 Razor 页面呈现为 HTML 字符串：

     public class ContactModel : PageModel
 {
     private readonly IRazorPartialToStringRenderer _renderer;
     public ContactModel(IRazorPartialToStringRenderer renderer)
     {
         _renderer = renderer; 
     }
     public void OnGet()
     { 
     }
     [BindProperty]
     public ContactForm ContactForm { get; set; }
     [TempData]
     public string PostResult { get; set; }

     public async Task<IActionResult> OnPostAsync()
     {
         var body = await _renderer.RenderPartialToStringAsync("_ContactEmailPartial", ContactForm);  //transfer model to the partial view, and then render the Partial view to string.
         PostResult = "Check your specified pickup directory";
         return RedirectToPage();
     }
 }
 public class ContactForm
 {
     public string Email { get; set; }
     public string Message { get; set; }
     public string Name { get; set; }
     public string Subject { get; set; }
     public Priority Priority { get; set; }
 }
 public enum Priority
 {
     Low, Medium, High
 }
    Run Code Online (Sandbox Code Playgroud)

调试截图如下：

在此处输入图片说明

更详细的步骤，请查看此博客Rendering A Partial View To A String。

Snæ*_*ørn 5

我成功破解了它！毕竟我走错了路......解决方案是使用ViewComponent. 但它仍然很时髦！

谢谢

解决方案

将 PageModel 转换为 ViewComponent

namespace MyProject.ViewComponents
{
    public class MyViewComponent : ViewComponent
    {
        private readonly MyDbContext _context;

        public MyViewComponent(MyDbContext context)
        {
            _context = context;
        }

        public async Task<IViewComponentResult> InvokeAsync()
        {
            var count = await _context.Foos.CountAsync();

            var message = $"Server time is { DateTime.Now } and the Foo count is { count }";

            return View<string>(message);
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

视图放置在Pages/Shared/Components/My/Default.cshtml中

@model string

<h2>Test</h2>
<p>
    @Model
</p>
Run Code Online (Sandbox Code Playgroud)

服务

@model string

<h2>Test</h2>
<p>
    @Model
</p>
Run Code Online (Sandbox Code Playgroud)

用法

来自 Razor 页面（调试/调整页面）

注意文件后面没有代码

@page
@using MyProject.ViewComponents

@await Component.InvokeAsync(typeof(MyViewComponent))
Run Code Online (Sandbox Code Playgroud)

使用路线数据

@page "{id}"
@using MyProject.ViewComponents

@await Component.InvokeAsync(typeof(MyViewComponent), RouteData.Values["id"])
Run Code Online (Sandbox Code Playgroud)

来自控制器

using System;
using System.IO;
using System.Text.Encodings.Web;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Abstractions;
using Microsoft.AspNetCore.Mvc.ModelBinding;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewEngines;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Routing;

public class RenderViewComponentService
{
    private readonly IServiceProvider _serviceProvider;
    private readonly ITempDataProvider _tempDataProvider;
    private readonly IViewComponentHelper _viewComponentHelper;

    public RenderViewComponentService(
        IServiceProvider serviceProvider,
        ITempDataProvider tempDataProvider,
        IViewComponentHelper viewComponentHelper
    )
    {
        _serviceProvider = serviceProvider;
        _tempDataProvider = tempDataProvider;
        _viewComponentHelper = viewComponentHelper;
    }

    public async Task<string> RenderViewComponentToStringAsync<TViewComponent>(object args)
        where TViewComponent : ViewComponent
    {
        var viewContext = GetFakeViewContext();
        (_viewComponentHelper as IViewContextAware).Contextualize(viewContext);

        var htmlContent = await _viewComponentHelper.InvokeAsync<TViewComponent>(args);
        using var stringWriter = new StringWriter();
        htmlContent.WriteTo(stringWriter, HtmlEncoder.Default);
        var html = stringWriter.ToString();

        return html;
    }

    private ViewContext GetFakeViewContext(ActionContext actionContext = null, TextWriter writer = null)
    {
        actionContext ??= GetFakeActionContext();
        var viewData = new ViewDataDictionary(new EmptyModelMetadataProvider(), new ModelStateDictionary());
        var tempData = new TempDataDictionary(actionContext.HttpContext, _tempDataProvider);

        var viewContext = new ViewContext(
            actionContext,
            NullView.Instance,
            viewData,
            tempData,
            writer ?? TextWriter.Null,
            new HtmlHelperOptions());

        return viewContext;
    }

    private ActionContext GetFakeActionContext()
    {
        var httpContext = new DefaultHttpContext
        {
            RequestServices = _serviceProvider,
        };

        var routeData = new RouteData();
        var actionDescriptor = new ActionDescriptor();

        return new ActionContext(httpContext, routeData, actionDescriptor);
    }

    private class NullView : IView
    {
        public static readonly NullView Instance = new NullView();
        public string Path => string.Empty;
        public Task RenderAsync(ViewContext context)
        {
            if (context == null) { throw new ArgumentNullException(nameof(context)); }
            return Task.CompletedTask;
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

使用 FromRoute

@page
@using MyProject.ViewComponents

@await Component.InvokeAsync(typeof(MyViewComponent))
Run Code Online (Sandbox Code Playgroud)

奇怪的

非常不幸的是，注入的东西IViewComponentHelper不能开箱即用。

所以我们做了这个非常不直观的事情来让它发挥作用。

@page "{id}"
@using MyProject.ViewComponents

@await Component.InvokeAsync(typeof(MyViewComponent), RouteData.Values["id"])
Run Code Online (Sandbox Code Playgroud)

这会导致一系列奇怪的事情，例如假货ActionContext，并且ViewContext需要 aTextWriter但它不用于任何用途！事实上这个洞ViewContext根本没有被使用。它只需要存在:(

另外NullView...由于某种原因Microsoft.AspNetCore.Mvc.ViewFeatures.NullView，Internal我们基本上必须将其复制/粘贴到我们自己的代码中。

也许将来会有所改善。

无论如何：在我看来，这比使用它更简单，IRazorViewEngine它几乎出现在每个网络搜索中:)

  • 这种方法比较繁琐。前面的答案为您提供了无限的广泛使用机会。假设您想从 get 方法中调用引擎的地方直接传递模型，您会怎么做？因为可以肯定的是，您需要显示与当前请求相关的值，而不仅仅是数据库中存储的一些数据 (2认同)

归档时间：

查看次数：

1688 次

最近记录：

5 年，3 月 前
将Razor页面渲染为字符串 15
Asp.Net Core 将 ViewComponent 渲染为变量 5
更多相关链接
相关归档
C#中的Java Map等价物 146
C#中的System.Type和System.RuntimeType有什么区别？ 79
按IP地址获取用户位置 70
如何更新C#中List <>中的对象 64
嵌入式语句不能是声明或带标签的语句 52
ASP.Net Core MVC - 自定义属性的客户端验证 25
asp.net核心自定义模型绑定器只适用于一个属性 7
如何让 Gitlab CI 支持 Asp.net Core 3.1？ 6
带有标识的 ASP.NET Core 2.0 中的 Cookie 到期 5
在 Blazor 中本地化日期时间（和数字） 5
难疑归档
如何检查jQuery中是否选中了复选框？ 4390
如何将某些内容附加到数组中？ 2895
在Windows命令行上是否有相应的"哪个"？ 2231
如何在Java中拆分字符串 1564
无法打开与身份验证代理的连接 1473
在调用instanceof之前需要进行空检查吗？ 1287
如何使用Sublime Text 2重新格式化HTML代码？ 1282
处理"java.lang.OutOfMemoryError:PermGen space"错误 1215
如何在同一元素上组合背景图像和CSS3渐变？ 1203
将先前的提交分解为多个提交 1113