创建MVC中的HTML帮助 [英] create a html helper for mvc

问题描述

我是新来的MVC所以不知道这是可能的。

I am new to mvc so not sure if this is possible.

我基本上使用了一些图像来创建一个好看的圆角方框一些HTML。

I have some html that basically uses some images to create a nice looking rounded corners box.

是否有可能在MVC3创建一个辅助功能，让我打电话给帮手和插入我想要的任何内容纳入div标签的主要区域。

Is it possible in mvc3 to create a helper function that will allow me to call the helper and insert any content I want into the main area of the div tags.

这是我的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插入

I dont want to have to copy this everywhere I want to use this styling so I am hoping I can create some type of helper and call it whenever I need to use this box and allow me to insert html into

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

有没有人有什么建议吗？

Does anyone have any suggestions?

感谢您

推荐答案

看起来像一个自定义的HTML帮助一个优秀的方案：

Seems like an excellent scenario for a custom html helper:

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，我懒得此刻修复它）：

which would generate (I know, what an ugly formatting but perfectly valid HTML, I am too lazy to fix it at the moment):

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

这篇关于创建MVC中的HTML帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！