ASP.NET MVC Razor extra whitespace rendered

Question

In Asp.net MVC, Razor inserts extra space between text blocks. I want to render a list this way: "1, 2, 3" but get "1 , 2 , 3".

@for (int i = 1; i < 3; i++)
{
  <text>@i</text>
  if (i != 2)
  {
    <text>, </text>
  }
}

Is there any ways to remove extra whitespace ?

Answer 1

I want to render a list this way: "1, 2, 3"

Quick and dirty:

@string.Join(", ", Enumerable.Range(1, 3))

Obviously a custom helper seems more appropriate to the job of formatting something in the view:

public static class HtmlExtensions
{
    public static IHtmlString FormatList(this HtmlHelper html, IEnumerable<int> list)
    {
        return MvcHtmlString.Create(string.Join(", ", list));
    }
}

and then simply:

@Html.FormatList(Model.MyList)

Answer 2

You are seeing the extra whitespace between the number and the comma because your razor template includes a line break (which displays as whitespace in the browser) between the number and the comma:

@for (int i = 1; i < 3; i++)
{
  <text>@i</text> >LINE BREAK HERE<
  if (i != 2)
  {
    <text>, </text>
  }
}

I like Darin's answer, and I would suggest removing your loop and replacing it with a more declarative statement, but if you don't want to go that far, try at least removing the line break:

@for (int i = 1; i < 3; i++)
{
    <text>@i</text>if (i != 2){<text>, </text>}
}

Answer 3

Instead of writing out bits of text in different places each time round the loop, you could accumulate all the text in a StringBuilder, then outside the loop do @stringBuilderObject.ToString().