ASP.NET Razor @Helpers 传递另一个 @Helper 的技巧！

引言

这个技巧快速演示了如何在 Razor 的 @Helper 方法中显示原始 HTML 标记，方法是在某个 .cshtml Razor 网站页面上使用另一个 @Helper 对象。 此解决方案解决了尝试将大量标记放入单个 string 变量的问题，而是允许快速传递 RAW 标记。 使用此解决方案，您可以创建类似“模板”的 HTML 标记解决方案，这些解决方案可以在您的网站中重复使用。

Using the Code

最近，我想使用新的带有 Razor 语法的 ASP.NET 创建一个网页。 我的想法是，我想以某种方式创建一个标准格式，有点像 ASP 的“母版页”，但更模块化，因此可以在任何网页上以更小的字节大小使用。 换句话说，这个想法是放置一些可重用的代码，我将它称为“模板”，然后将进一步的标记添加到某个“内容”部分。

考虑到这一点，我发现了 HTML5 中的“Section”语义，它允许您将 HTML 主体的一部分分割出来作为重要的部分。 然而，这对于我的解决方案来说仍然不够好。 经过进一步的研究，我发现了另一个“@Section”Razor 关键字，它更接近于解决方案。

“@Section”Razor 关键字允许您在 Razor 的“布局”页面中设置已定义的节。 这些已定义的节可以使用预定义的标记进行设置，例如使用 division '<div>' 的容器，然后定义标题 '<h>' 和段落 '<p>'。 然后，内容 .cshtml Razor 页面可以将此 '@section' 页面放到 HTML 页面中，从而允许以某种方式控制该页面。 这让我很兴奋，因为新的 Razor '@section' 语法允许您设置一个 requirement 属性，强制使用此部分；有点像策略。 但是，这仍然不是我想要的解决方案。 为什么？ 因为即使这允许我分割出整个网页的各个部分，我仍然需要一种方法在每个部分中放置更小的“模板”样式的“HTML”代码。

这然后将我带到了 Razor 的另一个关键字；'@Helpers'。 我问：“这是什么？”。 窥视 Visual Studio 的 Express 环境，我注意到我可以添加特定的“Helpers” .cshtml 类型的页面，其中包含此语法。 事实证明，helpers 就像 C# 方法，但具有将 HTML 标记直接添加到代码体中的额外好处！

下面给出了此语法的示例

@helper HeaderContainer(stri ng headerText, object contentText = null, string className = "BensStyle1")
{       
    var headerTextToSet = string.IsNullOrEmpty(headerText) ? "Set Your Header" : headerText;    
    
    <div class="@className" >
        <h2 id="Header">@headerTextToSet</h2>
        <div>
            <p id="Content">@Html.Raw(@contentText)</p>            
        </div>
    </div>
} 

现在，使用这个新的 @Helpers 语法，我现在可以将这些直接放到任何内容页面中，从而立即为我提供 HTML 标记的重用。

使用此 @Helper 的示例

<section>  

       @Helper1.HeaderContainer("Hello", "This is cool!", "erer")
       @Helper1.HeaderContainer("Third Time", "Look at this stuff!")         

</section>

但这仍然不够！！ 我现在需要一种将 RAW HTML 标记传递到方法中的方法，从而允许我用一些 RAW 标记填充任何内容部分。 我做了一个搜索，发现 Razor 有一个 HTML 帮助器叫做“@html.Raw()”，允许你传递 strings 和 'Object' 作为参数类型。 我首先尝试了 strings，它完美地工作了。 不幸的是，当您有大量要使用的 HTML 标记区域时，strings 会受到限制。 经过更多的决心，我终于找到了解决方案！！ 该解决方案很简单... 添加另一个 '@Helper' 方法，该方法仅包含您想在原始 @Helper 方法的内容部分中显示的 HTML 标记。 由于 '@HTML.Raw()' 方法调用接受 'Object' 作为参数之一，我认为这应该允许 Razor 引擎使用此对象并正确显示它。 果然，它做到了。  

下面是最终解决方案

Create the webpages content @Helper;
@helper TestThisStuffContent() {
    
     <div style="background-color:red;">
        <h1 style="color:aliceblue;">Eat This Stuff.</h1>
        <p>This is the best stuff you will every eat in your life!  Take some now, and eat at home.</p>
    </div>
}

And then pass this object into the original @Helper method as an object param;
@Helper1.HeaderContainer("Play", @TestThisStuffContent())

关注点

我在研究这个主题时发现，Razor 的视图与 .aspx 视图不同。 我最初尝试使用“Web 服务器控件”作为 Razor 视图中的模板，但很快发现此解决方案不起作用！ 这然后引导我发现了 @Helpers 方法，这打开了 HTML.Raw() 对象调用的门，并最终看到了此帮助器的 'Object' 重载。 如果不是 'Object' 重载，我传递附加 @Helper 标记调用的想法永远不会奏效！

历史

• 2013 年 4 月 30 日：初始版本。