ASP.NET MVC Razor thêm khoảng trống được hiển thị

Question

Trong Asp.net MVC, Razor chèn thêm khoảng trống giữa các khối văn bản. Tôi muốn hiển thị danh sách theo cách này: "1, 2, 3" nhưng nhận được "1, 2, 3".

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

Có cách nào để xóa thêm khoảng trống không?

Answer 1

Tôi muốn làm một danh sách như sau: "1, 2, 3"

Nhanh chóng và bẩn:

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

Rõ ràng là một helper tùy chỉnh có vẻ thích hợp hơn đối với công việc của định dạng một cái gì đó trong giao diện:

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

và sau đó chỉ cần:

@Html.FormatList(Model.MyList) 

Answer 2

Thay vì viết ra các đoạn văn bản ở các vị trí khác nhau mỗi lần vòng lặp, bạn có thể tích lũy tất cả văn bản trong một StringBuilder, sau đó bên ngoài vòng lặp làm @stringBuilderObject.ToString().

Answer 3

Tôi có thể giả định rằng nó không phải là vấn đề của Razor, mà là phần tử được hiển thị với một số lề.

1. Mở FireBug (hoặc Chrome hoặc bất kỳ thứ gì) và thấy rằng đó thực sự là vấn đề đánh dấu.
2. Trong bạn css tập tin thử để thêm

text {margin: 0}

Answer 4

Vấn đề là với các nguồn mà được tạo ra. Khi bạn nhìn vào các nguồn thực tế bạn nhận được:

 
    1 
    , 
    2 
    , 
    3 

Như bạn có thể thấy có rất nhiều khoảng trắng trong đó mà trình duyệt sụp đổ xuống đến một không gian duy nhất (nhìn vào definition for normal).

Sử dụng StringBuilder hoặc string.Join là cách để khắc phục điều này nếu tất cả những gì bạn đang làm là xuất ba số này. Nhưng nếu bạn đang cố gắng làm một cái gì đó khác và đây là một ví dụ đơn giản sau đó see this blog post cho một cách để làm điều đó bằng cách sử dụng ol/ul và li s.

Answer 5

Bạn đang nhìn thấy khoảng trắng thêm giữa số và dấu phẩy bởi vì mẫu dao cạo của bạn bao gồm một ngắt dòng (hiển thị như khoảng trắng trong trình duyệt) giữa số và dấu phẩy:

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

Tôi thích Darin's answer và tôi sẽ đề xuất xóa vòng lặp của bạn và thay thế bằng tuyên bố khai báo hơn, nhưng nếu bạn không muốn đi xa, hãy thử ít nhất là xóa ngắt dòng:

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