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>

Answer 2

我喜欢Darin提供的上述解决方案。我要做的唯一改变是在RoundedCorner类中有两个私有方法，它们将开始和结束标记写入视图上下文，而不是将其中的一部分写入类中，而将另一部分放在帮助器中。然后帮助器只返回一个新的RoundedCorner实例。

为mvc创建一个html帮助器

2 个答案: