Question

I am having trouble creating indented items in a Razor MultiSelectBox.

It works perfectly when I manually write the HTML:

<select name="testfoo123" multiple="multiple" size="15">
    <option value="PARENT1">Parent</option>
    <option value="CHILD1">&nbsp;I am indented</option>
    <option value="CHILD2">&nbsp;I am indented</option>
    <option value="PARENT1">Parent2</option>
    <option value="CHILD1">&nbsp;I am indented</option>
    <option value="CHILD2">&nbsp;I am indented</option>
</select>

Razor’s HTML helpers, however, literally display the preceeding non-breaking space in the form. As expected, literal space ‘ ‘ characters for indentation are completely ignored.

The code I am using to generate the multi-select box follows:

@Html.ListBoxFor(model => mySelectedValues, new MultiSelectList(myValues), new { size = "15" })

Answer 1

I found a solution. First: A multi-select box is probably not the best choices for a tree-like control, but I’ll leave that decision up to the programmer.

Solution: Add a literal non-breaking space character. These are not filtered, but the HTML equivalent (as well as a normal space character) is.

const char nonBreakingSpace = '\u00A0';

Prepend each child with this character. Using a separate list as an example:

var sendMeToTheHtmlHelper = new List<String>();
foreach(String yourString in yourCollection) {
    // If this element is a child and needs indentation:
    sendMeToTheHtmlHelper.Add(nonBreakingSpace + location);
    // else just add as normal
}