Asp.net MVC 的一些总结（二）——图片显示

浏览数：17 / 时间：2015年06月09日

这里实现的是，如下图片所示的效果：

当然，当你看的下图的时候，请不要自己想当然的认为是简单的html布局！！！

（1）业务说明：图片地址是数据库里存的，图片是服务器上的。所遇到的问题是，怎么样它显示每行4张图片，不够4张的也可以正常的显示出来。

技术分享

（2）实现代码解释：

当然实现是用table实现的，表格和图片美化，这里就不说了。可以直接看if语句里面的。当得到list数据的时候，需要求得总条数和余数，

这里是每行4条数据，所以对4取余数，如果你要对几取余就需要把4换成你要取的数了，当然还有t的值。

 1 <div class="panel-body">
 2             <table class="table">
 3               @{ 
 4                   var result = ViewBag.Allimg;
 5 
 6                   IQueryable<string> strImgs = result as IQueryable<string>;
 7 
 8                   if (strImgs != null)
 9                   {
10                       List<string> strs = strImgs.ToList();
11                       //得到条数
12                       int count=strs.Count;
13                       //得到余数
14                       int yu=count%4;
15                       //得到整数部分
16                       int tiao = count - yu;
17                    
18                       //循环开始（外部循环为行数据;内部循环为列数据（这里共4列））
19                       for (int i = 0; i < count; )
20                       {
21                           //加的条数
22                           int t = 4;
23                           if (yu > 0 && i == tiao)
24                              { t = yu; }
25                          <tr>
26                             @for (int j = 0; j <t; j++)
27                             { 
28                               <td><img src=‘@Url.Content("~/images/" + strs[i + j] + "")‘ class="img-rounded" style="width:250px;height:250px;" alt="第 @(i+j) 条"/></td>
29                             }
30                          </tr>
31                           //最后一次循环，加余数，保证index正常
32                           if (i == tiao)
33                           { i += yu; }
34                           else
35                           { i += 4;}
36                        }
37                        
38                     }
39                  }
40                <tr><td colspan="4">没有图片了</td></tr>
41             </table>
42 
43 
44         </div>