create a html helper for mvc - asp.net-mvc-3

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

Answer 1

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>

Answer 2

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.