在创建ASP.NET MVC使用可重复使用的剃刀HTML视图组件 [英] Creating reusable HTML view components using Razor in ASP.NET MVC

问题描述

我有一个创建一个可重复使用的HTML面板，节省了我一遍又一遍地写相同的HTML剃刀助手功能。

I have a Razor helper function that creates a re-usable HTML panel that saves me writing the same HTML over and over again.

@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>
}

我想知道，是否有可能重新使用这个辅助填写 .panel含量与更多的HTML，允许更大的灵活性和code重用 - 类似以类似如下：

I'm wondering, is it possible to re-use this helper to fill .panel-content with more HTML to allow further flexibility and code reuse - similar to something like below:

@LayoutHelpers.DefaultPanel("Welcome back") {
    <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>
}

虽然使用.NET MVC我已经注意到了 Html.BeginForm（）做包装内的code时，类似的事情在 @using 的 Html.BeginForm 声明中的语句，像这样：

Whilst using .NET MVC I've noticed the Html.BeginForm() does a similar thing when wrapping the code within the @using statement within the Html.BeginForm declaration, like so:

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

但可通过使用 @helper 方法做了什么？如果没有，是否有可能创建一个的HtmlHelper 扩展做类似的事情的方式 Html.BeginForm（）方法呢？

But can this done using @helper methods? If not, is it possible to create a HtmlHelper extension to do a similar thing the way the Html.BeginForm() method does?

您可以使用 @section 语法做了非常类似的事情所看到的here

You can do a very similar thing using the @section syntax as seen here

这看起来似乎这将是，有没有简单的方法来做到这一点在组件层面真正有用的，能够做的，奇怪的。

This seems like something that would be really useful to be able to do, and odd that there's no easy way to do it on a component level.

推荐答案

有两种方法可以实现所需的功能。

There are two ways to achieve the required functionality.

1。 @helper

创建@helper它接受任何你需要的参数，再加上一个功能（单个对象参数，返回对象）：

Create @helper which accepts whatever parameters you need plus a function (single object parameter, returns object):

@helper DefaultPanel(string panelTitle, Func<object, object> content)
{
    <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">
                    @content(null)
                </div>
            </div>
    </div>
}

用法：

@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>
)

您函数也接受参数，例如这里。

Your function may also accepts parameters, example here.

2。的HtmlHelper扩展方法

任意位置添加以下code在您的项目：

Add the following code anywhere in your project:

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>"
            );
        }
    }
}

用法：

@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>
}

扩展方法直接写入到上下文。关键是要返回的一次性对象，Dispose方法将在年底执行使用块。

这篇关于在创建ASP.NET MVC使用可重复使用的剃刀HTML视图组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！