使用Razor创建没有空格的图像行

Question

这似乎与this post相似，但我在那里尝试了建议（除了自定义助手），但它没有帮助。

我正在尝试在Razor中创建一行图像，以便它们之间没有空格/间隙。我的Razor视图代码如下所示。模型是一个int。

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