在ASP.NET MVC中使用Razor创建可重用的HTML视图组件

我有一个Razor助手函数，它创建了一个可重用的HTML面板，这样我就不用反复编写相同的HTML了

@helper DefaultPanel(string panelTitle) {
    <div class="panel">
        <div class="panel-logo"><img src="/logo.png"></div>
            <div class=panel-inner">
                <p class="panel-title">@panelTitle</p>
                <div class="panel-content">
                    /* Can I pass content to be rendered in here here? */
                </div>
            </div>
        </div>
    </div>
}

在使用.NET MVC时，我注意到

Html.BeginForm（）

在

@中使用
Html.BeginForm
声明中的
语句包装代码时做了类似的事情，如下所示：

@using (Html.BeginForm("Index", "Login", FormMethod.Post))
{
    <div>This content gets rendered within the <form></form> markup.</div>
}

@使用（Html.BeginForm（“Index”，“Login”，FormMethod.Post））
{
此内容在标记中呈现。
}

但是使用
@helper
方法可以做到这一点吗？如果没有，是否可以创建一个
HtmlHelper
扩展来执行类似于
Html.BeginForm（）
方法的操作

您可以使用
@部分
语法执行类似的操作，如图所示


这似乎是一件非常有用的事情，奇怪的是在组件级别上没有简单的方法可以做到这一点。
我不知道
@helper
方法是否可以做到这一点，但是
HtmlHelper
扩展肯定可以做到。您已经提到了
Html.BeginForm（）
示例，这可能是最为人所知的一个示例—它所做的只是返回一个实现
IDisposable
的对象，这意味着当调用
Dispose（）
方法时，它只调用免费的
Html.EndForm（）
方法来添加适当的结束标记

对HTML代码执行类似操作将非常简单。您可以查看ASP.NET MVC HtmlHelpers的源代码，网址为-
BeginForm（）
代码可以是特定的。
有两种方法可以实现所需的功能

1@助手

创建@helper，它接受您需要的任何参数和函数（单个对象参数，返回对象）：

@helper DefaultPanel（字符串panelTitle，Func内容）
{
@panelTitle
@内容（空）
}

用法：

@DefaultPanel("title",
@<div class="panel-content-inner">
    <p>Welcome back, please select from the following options</p>
    <a href="#">Profile</a>
    <a href="#">My Defails</a>
</div>
)

@using (Html.DefaultPanel("title2"))
{
    <div class="panel-content-inner">
        <p>Welcome back, please select from the following options</p>
        <a href="#">Profile</a>
        <a href="#">My Defails</a>
    </div>
}

@DefaultPanel（“标题”，
@
欢迎回来，请从以下选项中选择

)

例如，您的函数也可以接受参数

2。HtmlHelper扩展方法

在项目中的任意位置添加以下代码：

namespace System.Web.Mvc
{
    public static class HtmlHelperExtensions
    {
        public static HtmlDefaultPanel DefaultPanel(this HtmlHelper html, string title)
        {
            html.ViewContext.Writer.Write(
            "<div class=\"panel\">" +
            "<div class=\"panel-inner\">" +
            "<p class=\"panel-title\">" + title + "</p>" +
            "<div class=\"panel-content\">"
            );

            return new HtmlDefaultPanel(html.ViewContext);
        }
    }

    public class HtmlDefaultPanel : IDisposable
    {
        private readonly ViewContext _viewContext;
        public HtmlDefaultPanel(ViewContext viewContext)
        {
            _viewContext = viewContext;
        }
        public void Dispose()
        {
            _viewContext.Writer.Write(
            "</div>" +
            "</div>" +
            "</div>"
            );
        }
    }
}

namespace System.Web.Mvc
{
公共静态类HtmlHelperExtensions
{
公共静态HtmlDefaultPanel DefaultPanel（此HtmlHelper html，字符串标题）
{
html.ViewContext.Writer.Write(
"" +
"" +
“
“+标题+”
”+
""
);
返回新的HtmlDefaultPanel（html.ViewContext）；
}
}
公共类HtmlDefaultPanel:IDisposable
{
私有只读ViewContext _ViewContext；
公共HtmlDefaultPanel（ViewContext ViewContext）
{
_viewContext=viewContext；
}
公共空间处置（）
{
_viewContext.Writer.Write(
"" +
"" +
""
);
}
}
}

用法：

@DefaultPanel("title",
@<div class="panel-content-inner">
    <p>Welcome back, please select from the following options</p>
    <a href="#">Profile</a>
    <a href="#">My Defails</a>
</div>
)

@using (Html.DefaultPanel("title2"))
{
    <div class="panel-content-inner">
        <p>Welcome back, please select from the following options</p>
        <a href="#">Profile</a>
        <a href="#">My Defails</a>
    </div>
}

@使用（Html.DefaultPanel（“title2”））
{
欢迎回来，请从以下选项中选择

}

扩展方法直接写入上下文。诀窍是返回一个一次性对象，该Dispose方法将在
使用
块的末尾执行。
完美，第二个方法就像一个符咒！谢谢你花时间来写这样一个完整的答案。出于某种原因，第二个代码段给了我一个错误，“this”参数显然没有通过花括号中的html