Question

I would like to create a helper to return a text one character below the other. Something like that:

S

A

M

P

L

E

The purpose of this helper is to have a table with a heading of only 1 character wide. As you can see on the picture below this is ugly:

Example below looks nice:

I would like something like:

@Html.DisplayVerticalFor(x => x.MyText)                                            

Any idea?

Thanks.

Answer 1

You can create an HTML helper DisplayVertical. (I am not adding the steps of how to create html helpers). The DisplayVertical will first split your text in character array and wrap each character inside a div or any other block level element, which can be inserted desired place.The implementation of DisplayVerticalFor can be something like this :

public static MvcHtmlString DisplayVertical (this HtmlHelper helper, string text)
{
     string OutputString = "";
     string assembleString = "<div>{0}</div>";
     char[] textarr = text.ToCharArray();

     foreach( char a in textarr )
     {
         OutputString += String.Format(assembleString, a);
     }

     return new MvcHtmlString(OutputString);
}

and in razor it will placed like this :
<div class="style-to-adjust-width-n-height"> @Html.DisplayVertical ("Sample") </div>

If you want to pass on a lambda expression to this html helper like this @Html.DisplayVerticalFor(x => x.MyText) then you need to add lambda expression parsing code to find out the text.
Lastly, this is a very rough code however you can add “TagBuilder” etc to make it more neat and clean.