CODEWITHSUNDEEP
c#.netasp.net-mvc
SiberianGuy
SiberianGuy

Reputation: 25282

asp.net mvc razor extra space

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?

Upvotes: 31

Views: 31790

Answers (5)

Tim S.
Tim S.

Reputation: 56536

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

Upvotes: 2

Eddie Groves
Eddie Groves

Reputation: 34828

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

Upvotes: 10

Adam Tegen
Adam Tegen

Reputation: 25887

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(", ")
  }
}

Upvotes: 19

Chris Thoman
Chris Thoman

Reputation: 331

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.

Upvotes: 22

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

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);

Upvotes: 7

Related Questions