为mvc创建一个html帮助器

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>