How can I get my select list to render without HTML coding
@{
var noiceList = new SelectList(new[] { new {ID = "", Name = ""},
new {ID = "y", Name = "Yes after3Space"},
"ID", "Name");
}
@Html.DropDownList("noice", @noiceList )
rendered
..
<option value="y">Yes&nbsp;&nbsp;&nbsp;3Space</option>
...
How do I get it to instead render
<option value="y">Yes after3Space</option>
The easiest way to achieve this in C# is to use \xA0 instead of so you can avoid all that extra code.
Credit goes to this answer: How to retain spaces in DropDownList - ASP.net MVC Razor views
Unfortunately, this behavior is not built-in. The Html.DropDownList method (and most other HtmlHelper methods) always escapes all input text.
There are workarounds, however. For example, you could create your own HtmlHelper method that allows unescaped HTML.
But if your needs are as simple as your example, here's a simple workaround:
Use a placeholder, such as |, and then replace it with , like this:
@{
var noiceList = new SelectList(new[] { new {ID = "", Name = ""},
new {ID = "y", Name = "Yes|||after3Space"},
"ID", "Name");
}
@Html.Raw(Html.DropDownList("noice", @noiceList).ToString().Replace("|", " "))
Note, you could also create a simple extension method to really reduce the amount of code required:
public static HtmlString Replace(this HtmlString input, string findAll, string replaceWith) {
return new HtmlString(input.ToString().Replace(findAll, replaceWith));
}
This simplifies your Html code to:
@Html.DropDownList("noice", @noiceList).Replace("|", " ")
It's because Razor always outputs entity-encoded html. You should be able to call (VS is updating on my machine right now, so I can't do a quick test) Html.Raw() in this context, like so:
var noiceList = new SelectList(new[] { new {ID = "", Name = ""},
new {ID = "y", Name = Html.Raw("Yes after3Space")},
"ID", "Name");
EDIT: This does not work.
SelectList produces a list of SelectListItems, which uses a regular old string for Name and Value. So, this won't work :(
SelectListItem.Name could be a HtmlString instead? However, I don't think this is a "pretty" solution, because it should only be used for simple markup.
<select id="noice"><option value="y">Yes&nbsp;&nbsp;&nbsp;3Space</option></select>