在 Razor Pages 中重复 HTML 部分

Question

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

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

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

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

Answer 1

模板标签可以提供帮助：

<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

Answer 2

如果您使用的是 .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 核心 2.x，您的 "helper" 方法是 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>;

在 Razor Pages 中重复 HTML 部分

Repeating HTML section in Razor Pages

c#

asp.net-core

razor-pages