create a html helper for mvc

Question

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

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

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.

this is my 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>

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?

Thank you

score 6 · Accepted Answer · answered Feb 22 '11 at 22:41

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

and in your view simply:

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

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>

Sorry one more question where do I place this class? and how do I reference it, do I just need to add my namespace into the views web.config? — Diver Dan, Feb 22 '11 at 23:10
doh! ignore that, I added into a helpers folder and added reference to the namespace in the web.config — Diver Dan, Feb 22 '11 at 23:14
@Darin Dimitrov - why did you use finalizer ("protected virtual void Dispose(bool disposing)") in this class and not just "public void Dispose()" method? As I understand finalizer is unnecessary if this code will be used like this: "@using (Html.RoundedCorner()){}" from your example bacause this ensures call "public void Dispose()". Am I missing something? — Pol, Nov 21 '12 at 20:24

score 2 · Answer 2 · answered Mar 30 '11 at 19:49

I like the solution above provided by Darin. The only changes I would make is to have two private methods in the RoundedCorner class that write the opening and closing tags to the view context, rather than having part of it in the class and the other part in the helper. Then the helper just returns a new instance of RoundedCorner.

create a html helper for mvc

2 Answers2

Linked