如何在asp.net核心中定义返回html的函数

时间:2018-08-30 19:40:59

标签: razor asp.net-core asp.net-core-mvc

基本上我需要类似asp.net的东西

@helper MakeNote(string content) {
    <p><strong>Note</strong>&nbsp;&nbsp; @content    </p>
}

或JSX

MakeNote(note) {
   return (<div>Note {note}</div>);
}

不能选择局部视图。我对返回IHtmlString的函数或向底层编写器写入的函数感到满意。

它还需要在函数内部支持Razor语法(不仅仅是字符串连接)。

2 个答案:

答案 0 :(得分:5)

您可能正在寻找使用@functionsHtml.Raw

这里是显示两种函数样式的示例。第一个使用传统的块体,第二个使用表达式体。

它们两个都在字符串上带有$@前缀。

  • $在字符串中启用{interpoloation}
  • @构成一个逐字字符串,可以跨越多行。

第三种方式有点像黑客,它使我们可以在函数内部解析Razor。它与我们似乎能够使用原始@helper语法一样接近。

SomeRazorFile.cshtml

@using Microsoft.AspNetCore.Html

@functions 
{
    IHtmlContent MakeNote(string content) 
    {
        return Html.Raw($@"
            <p>
                <strong>Note</strong> {content}
            </p>
        ");
    }

    // an alternative that uses method shorthand
    IHtmlContent MakeNoteToo(string content) => Html.Raw($@"
        <p>
            <strong>Note</strong> {content}
        </p>
    ");
}

@{
    // an alternative that parses razor
    Func<string, IHtmlContent> MakeNoteThree = 
        @<p>
            <strong>Note</strong> {@item}
        </p>;
}

<div>
    @MakeNote("Foo")
    @MakeNoteToo("Bar")
    @MakeNoteThree("Baz")
</div>

编辑:添加了一个解析Razor的示例。有关详细信息,请参见https://github.com/aspnet/Razor/issues/715

答案 1 :(得分:2)

ASP.NET Core 3.0 起,我们可以在 Razor代码块中声明包含标记的 Local Functions 作为模板方法:< / p>

@{
    void RenderName(string name)
    {
        <p>Name: <strong>@name</strong></p>
    }

    RenderName("Mahatma Gandhi");
    RenderName("Martin Luther King, Jr.");
}

哪个呈现以下HTML代码:

<p>Name: <strong>Mahatma Gandhi</strong></p>
<p>Name: <strong>Martin Luther King, Jr.</strong></p>

文档:https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-3.0#razor-code-blocks


(仅出于完成目的)在 ASP.NET Core 2.0 中,我们可以使用模板化的Razor委托,该委托与<text></text> razor标记结合使用(显式带分隔符的过渡),使我们可以进行类似于过去的ASP.NET MVC @helper标签的操作:

@{
    Func<string, object> RenderName = @<text>
        <p>
            Name: <strong>@item</strong>
        </p>;
    </text>;
}

<div>
    @RenderName("Victor")
</div>

哪个呈现以下HTML代码:

<div>
    <p>
        Name: <strong>Victor</strong>
    </p>
</div>

文档:https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-2.0#templated-razor-delegates
文档<text></text>https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-2.0#razor-code-blocks