asp.net-mvc-3 - 为 mvc 创建一个 html helper

Question

我是 mvc 的新手，所以不确定这是否可能。

我有一些 html 基本上使用一些图像来创建一个漂亮的圆角框。

是否可以在 mvc3 中创建一个辅助函数，该函数将允许我调用该辅助函数并将我想要的任何内容插入到 div 标签的主要区域中。

这是我的 html

<div class="rounded">
    <div class="top">
        <div class="right">
        </div>
    </div>
    <div class="middle">
        <div class="right">
            <div class="content">
             Some how allow me to insert data into here
                <div class="Clear">
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="right">
        </div>
    </div>
</div>


</div>

我不想在任何想要使用这种样式的地方复制它，所以我希望我可以创建某种类型的帮助程序并在需要使用此框时调用它并允许我将 html 插入到

 <div class="content">
             Some how allow me to insert data into here
                <div class="Clear">
            </div>

有没有人有什么建议？

谢谢

Answer 1

对于自定义 html 助手来说，这似乎是一个很好的场景:

public class RoundedCorner : IDisposable
{
    private readonly ViewContext _viewContext;
    private bool _disposed = false;

    public RoundedCorner(ViewContext viewContext)
    {
        _viewContext = viewContext;
    }

    public void Dispose()
    {
        Dispose(true);
        GC.SuppressFinalize(this);
    }

    protected virtual void Dispose(bool disposing)
    {
        if (!_disposed)
        {
            _disposed = true;
            _viewContext.Writer.Write(
                @"<div class=""Clear"">
                  </div>
                  </div>
                  </div>
                  <div class=""bottom"">
                  <div class=""right"">
                  </div>
                  </div>
                  </div>
                  </div>"
            );
        }
    }
}

public static class HtmlExtensions
{
    public static RoundedCorner RoundedCorner(this HtmlHelper htmlHelper)
    {
        htmlHelper.ViewContext.Writer.Write(
            @"<div class=""rounded"">
            <div class=""top"">
            <div class=""right"">
            </div>
            </div>
            <div class=""middle"">
            <div class=""right"">
            <div class=""content"">"
        );
        return new RoundedCorner(htmlHelper.ViewContext);
    }
}

在您看来，简单地说:

@using (Html.RoundedCorner())
{
    <div>Some how allow me to insert data into here</div>
}

这会生成(我知道，多么丑陋的格式但完全有效的 HTML，我现在懒得修复它):

<div class="rounded">
                <div class="top">
                <div class="right">
                </div>
                </div>
                <div class="middle">
                <div class="right">
                <div class="content">    <div>Some how allow me to insert data into here</div>

<div class="Clear">
                  </div>
                  </div>
                  </div>
                  <div class="bottom">
                  <div class="right">
                  </div>
                  </div>
                  </div>
                  </div>