Asp.net MVC 的一些总结(二)——图片显示

时间:2021-12-25 06:37:29

  这里实现的是,如下图片所示的效果:

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

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

    Asp.net MVC 的一些总结(二)——图片显示

 

   (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>

 

  总结:如果自己不思考,就等于行尸走肉!  交流QQ:1406046087