在 Razor 页面中重复 HTML 部分答案

【问题标题】：Repeating HTML section in Razor Pages在 Razor 页面中重复 HTML 部分
【发布时间】：2023-03-13 14:23:01
【问题描述】：

我有一块 HTML 需要在页面的多个位置呈现，我正在寻找一种只定义该 HTML 一次的方法。我不能简单地依赖循环，因为 HTML 出现在不同的区域。

我知道我可以使用局部视图。但由于 HTML 块只会显示一页，我更愿意在此处定义它。

我知道我可以创建一个@functions 块来创建一个函数来呈现标记，但这是针对代码而不是标记的。我想要更多类似于 MVC 中的 @helper 函数，但这些似乎在 Razor 页面中不可用。

谁能提供其他建议来在一个地方定义一个 HTML 块，以便它可以显示在页面上的任何位置？

【问题讨论】：

尝试使用 LayoutPages 并在其中定义您的 HTML。 LayoutPages 可以显示在“n”个页面中，前提是网页与其链接。
@RohanRao：布局页面包括 Razor 页面，而不是相反。似乎局部视图比布局页面更有意义，我已经解释了为什么我认为这不适合我。除非您指的是不同类型的布局页面。
我之前在完全相同的场景中使用过部分 Html，但是如果您真的不想使用部分 html，您可以定义代码的预制件并使用 Javascript 将其插入到您需要的地方完全不依赖 C#。
@SoorenaAban：局部视图可以正常工作。但由于它只在一页上使用，我宁愿把所有东西放在一起。我更喜欢在 MVC 中使用 @helper 函数编写标记。对我来说（为了易用性、可读性、可维护性和性能）使用 JavaScript 是不值得的。
这能回答你的问题吗？ Replacement for @helper in ASP.NET Core

标签： c# asp.net-core razor-pages

【解决方案1】：

如果您使用 .NET Core 3，则可以在 @functions 块中声明的方法中包含 HTML 标记，例如

@functions{
    void Greeter()
    {
        <h3>Hello World</h3>
    }
}

然后在页面的内容部分：

@{ Greeter(); }

helper的种类也可以带参数：

void Greeter(string greeting)
{
    <div>@greeting World</div>
}

@{ Greeter("Hello"); }

如果您使用的是 ASP.NET Core 2.x，您的“帮助”方法是 Func<someType, IHtmlString>。在以下示例中，someType 是 string：

Func<string, IHtmlContent> Greeter = @<h1>Hello @item</h1>;

然后在页面的内容部分：

@Greeter("World");

someType 可以是复杂类型：

Func<Contact, IHtmlContent> Greeter = @<h1>Hello @item.FirstName</h1>;

【讨论】：

正是我想要的。不理解问题或只是不知道答案的人投票结束了这个问题。然后有人过来并提供了确切的答案。（根据问题标签，我使用的是 ASP.NET Core。）谢谢。
我得到了这个工作；但是，我收到了一堆警告。如果你好心，也许你可以看看this question。

【解决方案2】：

模板标签可以提供帮助：

<template id="block-template">
    <div>
        <p>template contents...</p>
    </div>
</template>

<div id="target1"></div>

<script>
    var tmplt = $("#block-template").html();
    $("#target1").append(tmplt);
</script>

template 标签在 HTML5 中可用，您也可以使用脚本模板：

<script id="block-template" type="text/template">
    <div>
        <p>template contents...</p>
    </div>
</template>

如果您需要将数据绑定到模板，可以使用很多插件：

http://handlebarsjs.com/

https://github.com/jcgregorio/stamp/

https://knockoutjs.com/documentation/template-binding.html

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

【讨论】：