开发者

Create row of images with no space between using Razor

开发者 https://www.devze.com 2023-02-14 01:17 出处:网络
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.

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.

Create row of images with no space between using Razor

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.

Create row of images with no space between using Razor

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消