創建使用剃刀之間沒有空間的圖像行

Question

這似乎與this post類似，但我嘗試了那裏的建議（自定義幫助器除外），並沒有幫助。

我試圖在剃刀中創建一排圖像，以便它們之間沒有空間/間隙。我的Razor視圖代碼如下所示。模型是一個整數。

string theNumber = String.Format("{0:00000}", Model); 

    foreach(char theChar in theNumber.ToCharArray()) 
    { 
<img src="/images/odometer/@{@theChar}.gif" style="border-width: 0px;height: 20px;width: 15px;" alt="" /> 
    } 

這是生成如下所示的HTML。

 <img src="/images/odometer/0.gif" style="border-width: 0px;height: 20px;width: 15px;" alt="" /> 
<img src="/images/odometer/0.gif" style="border-width: 0px;height: 20px;width: 15px;" alt="" /> 
<img src="/images/odometer/1.gif" style="border-width: 0px;height: 20px;width: 15px;" alt="" /> 
<img src="/images/odometer/9.gif" style="border-width: 0px;height: 20px;width: 15px;" alt="" /> 
<img src="/images/odometer/7.gif" style="border-width: 0px;height: 20px;width: 15px;" alt="" /> 

這導致在瀏覽器中顯示以下內容。

在HTML源的換行符使所述圖像之間的間隙。我真正想要的是將HTML生成在一條長長的線上，就像這樣。

<img src="images/odometer/0.gif" style="border-width:0px;height:20px;width:15px;" /><img src="images/odometer/0.gif" style="border-width:0px;height:20px;width:15px;" /><img src="images/odometer/1.gif" style="border-width:0px;height:20px;width:15px;" /><img src="images/odometer/9.gif" style="border-width:0px;height:20px;width:15px;" /><img src="images/odometer/7.gif" style="border-width:0px;height:20px;width:15px;" /> 

這將導致像一個圖像。

我知道一個辦法是不使用循環。我的電話號碼總是五位數字，所以不必循環字符串中的每個字符，我可以簡單地爲每個數字寫一個img標籤。

Answer 1

我相信這個工程：

@{ 
    var htmlTemplate = "<img src=\"/images/odometer/{0}.gif\" style=\"border-width: 0px;height: 20px;width: 15px;\" alt=\"\" />"; 
    string theNumber = String.Format("{0:00000}", DateTime.Now); 
} 
@foreach (char theChar in theNumber.ToCharArray()) 
{ 
    @Html.Raw(string.Format(htmlTemplate, theChar)) 
} 

HTH

Answer 2

如果有一個固定的數字位數和渲染是一個問題，我會刪除foreach或嘗試在同一行寫入整個語句。