【问题标题】:How to define function that returns html in asp.net core如何在asp.net核心中定义返回html的函数
【发布时间】:2023-03-21 12:13:02
【问题描述】:

基本上我需要像旧的 asp.net 这样的东西

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

或 JSX

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

部分视图不是一个选项。我对返回 IHtmlString 的函数或写入底层编写器的函数感到满意。

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

【问题讨论】:

  • 您可以创建一个标签助手来返回您的自定义 HTML 标记。顺便说一句,您的 OR JSX 部分使这个问题非常广泛(至少对我而言)
  • 这只是我需要其他语言的示例,我看不出它如何使问题变得广泛。
  • 我只举了 2 个我需要的示例,但标签助手还远远不够。

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


【解决方案1】:

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

@{
    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 中,我们可以使用 Templated Razor delegates,它与 &lt;text&gt;&lt;/text&gt; 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
文档&lt;text&gt;&lt;/text&gt;:https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-2.0#razor-code-blocks

【讨论】:

  • 如果您的函数返回 void,而不是大括号内的 html 标记调用函数。像这样:@{ RenderName("Victor"); }
【解决方案2】:

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

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

它们都在字符串上具有$@ 前缀。

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

第三种方式有点像 hack,让我们在函数内部解析 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

【讨论】:

  • 它有点工作,但我想在该函数中使用 Razor,而不是字符串连接。
  • @user2029276 很高兴知道。我添加了一个在函数内部使用 Razor 的示例。让我知道这对你有什么作用。
  • 我已经在 github 上看到了,但我认为这是一种 hack,而不是官方解决方案。语法有点奇怪,参数没有命名。您可以添加更多参数吗?
  • 是的。您可以添加更多参数。不过,这样做的方法更像是一种技巧。它涉及将元组传递给函数。
  • 对于参数限制的解决方法,您可以使用元组。即Func&lt;(string name, int value), IHtmlContent&gt; CreateInput = @&lt;input name="@item.name" value="@item.value" /&gt;
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-01-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-11-17
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多