从字符串中渲染Tag Helper html

时间:2019-02-25 19:15:08

标签: c# .net asp.net-core tag-helpers asp.net-core-tag-helpers

我们有很多标记助手,并希望允许其他开发人员尝试通过代码编辑器来创建页面,他们在其中编写一些标记助手,并且在提交后,我们希望呈现输出。我们想要创建类似w3

的东西

以asp.net文档中的最小示例为例:

    public class EmailTagHelper : TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "a";
        }
    }

当用户编写时,我们有一个代码编辑器:

<email>foo@foo.com<email>

我想执行此标记助手,并从中渲染HTML字符串,

<a>foo@foo.com</a>

您可以想象,事情会变得非常复杂。

是否可以通过MVC控制器提供的字符串来呈现Tag Helper?

我试图呈现部分视图并将视图组件显示为字符串。但是没有运气。我尝试使用Html.Raw()进行编码和解码,但也没有帮助。

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

这是一个有关如何完成此操作的基本示例。假设我们已经有电子邮件标签帮助器。 AspNetCore 2.2

Startup.cs

ConfigureServices(IServiceCollection services)中添加这段代码

services.Configure<RazorViewEngineOptions>(options =>
{
    options.AllowRecompilingViewsOnFileChange = true;
});

这允许视图引擎检测文件更改并重新编译视图。如果未设置,则Development之外的任何环境名称都将不起作用。

HomeController.cs

private readonly IHostingEnvironment _hostingEnvironment;
private readonly string _myTemplatePath;

public HomeController(IHostingEnvironment hostingEnvironment)
{
    _hostingEnvironment = hostingEnvironment;
    _myTemplatePath = Path.Combine(_hostingEnvironment.ContentRootPath, @"Views\Shared\_MyTemplate.cshtml");
}

public IActionResult Index()
{
    var myTemplateCode = System.IO.File.ReadAllText(_myTemplatePath); 

    return View(new MyTemplateViewModel
    {
        TemplateCode = myTemplateCode
    });
}

[HttpPost]
public IActionResult UpdateMyTemplate(MyTemplateViewModel viewModel)
{
    System.IO.File.WriteAllText(_myTemplatePath, viewModel.TemplateCode);

    return RedirectToAction(nameof(Index));
}

public IActionResult GetMyTemplate()
{
    return View("_MyTemplate");
}

一些简单的代码可以读取/写入_MyTemplate.cshtml文件,这将作为代码的可编辑位。

视图/主页/Index.cshtml

<form asp-action="UpdateMyTemplate" method="post">
    <textarea asp-for="TemplateCode" rows="10"></textarea><br />
    <button type="submit">Save Changes</button>
</form>

<h2>Output</h2>
<partial name="_MyTemplate" />

运行代码

enter image description here