asp.net mvc razor extra space

Question

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>
  }
}

Are there any ways to remove this extra space?

Answer 1

Since this still a problem with the <text> tag in MVC 3 RTM + Tools Update and it can be a real headache to deal with, an alternative to eddiegroves' approach of removing whitespace from the code formatting is to avoid the use of the <text> tag altogether.

First, here is a rewrite of the original code that reproduces the problem and actually prints "1 , 2 , 3":

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

Here are four alternatives that print "1, 2, 3" instead of "1 , 2 , 3", but preserve code formatting by using @something instead of <text> .

Solution #1: Using @("")

@for (int i = 1; i <= 3; i++) {
    @i
    if (i < 3) {
        @(", ")
    }
}

Solution #2: Using @var

@for (int i = 1; i <= 3; i++) {
    var s = i < 3 ? ", " : null;
    @i @s
}

Solution #3: Using @(expression)

@for (int i = 1; i <= 3; i++) {
    @i @(i < 3 ? ", " : null)
}

Solution #4: Using @helpers

@helper Item(int index) {
    @index
}

@helper Separator(int index, int count) {
    if (index < count) {
        @(", ")
    }
}

@for (int i = 1; i <= 3; i++) {
    @Item(i) @Separator(i, 3)
}

That last one is obviously overkill for the example, but might be a useful pattern for more complicated items and separators.

Answer 2

You could use @Html.Raw. The code is more readable and the output doesn't have extra whitespace

@for (int i = 1; i < 3; i++)
{
  @Html.Raw(i)
  if (i != 2)
  {
    @Html.Raw(", ")
  }
}

Answer 3

I believe that there is an issue in the ASP.NET Razor RC that unfortunately will treat whitespace inside the "code context" as literal white space to write to the response.

The above example is "fixed" by removing the whitespace inside the code blocks:

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

Or more tidy:

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

By following this thread on the asp.net site there is a discussion which has a similar issue and Andrew Nurse responds

This bug has been logged and will be considered for RTM.

So if this is the same issue, hopefully it made the list to be fixed.

This bug did not make the RTM

Answer 4

I would probably write a custom helper for this:

public static MvcHtmlString RenderNumbers(this HtmlHelper htmlHelper, int count)
{
    var text = string.Join(", ", Enumerable.Range(1, count).ToArray());
    return MvcHtmlString.Create(text);
}

and then use it in my view:

@Html.RenderNumbers(3);

Answer 5

Any of the following should work, depending on where your values actually come from:

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