创建使用剃刀之间没有空间的图像行

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或尝试在同一行写入整个语句。