Create row of images with no space between using Razor
This seems to be similar to this post but I've tried the suggestions there (except for the custom helper) and it hasn't helped.
I'm trying to create a row of images in Razor so that there is no space/gap between them. My Razor view code looks like this. Model is an 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="" />
}
This is producing HTML that looks like the following.
<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="" />
Which results in the following displaying in the browser.
The line breaks in the HTML source are causing gaps between the images. What I really want is the HTML to be generated all on one long line, like this.
<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;" />
Which would result in an image like.
I know one option would be to not use a loop. My number will always be five digits, so rather than looping over each character in the string I could simply write an img tag for each digit.
I believe this works:
@{
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
If there is a fixed number of digits and rendering is an issue, I'd either drop the foreach
or try writing the whole statement on the same line.
精彩评论