从字符串渲染Tag Helper html

问题描述 投票:2回答:1

我们有很多标记帮助程序,并希望其他开发人员可以尝试通过代码编辑器创建页面,在那里他们编写一些标记帮助程序,在提交时,我们想要渲染输出。我们想创造像w3这样的东西

以asp.net文档中的最小示例为例,如下所示:

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

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

<email>[email protected]<email>

我想执行这个标记帮助器并从中呈现HTML字符串,它应该是:

<a>[email protected]</a>

事情可能变得非常复杂,你可以想象。

有没有办法从MVC控制器的字符串中呈现Tag Helper?

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

有任何想法吗?

c# .net asp.net-core tag-helpers asp.net-core-tag-helpers
1个回答
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

© www.soinside.com 2019 - 2024. All rights reserved.