需要要视图中Razor语法,循环产生一些html代码。
产生后的html是这样的:
<li data-transition="fade" data-slotamount="7" data-masterspeed="1500"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="~/Content/img/slider-images/XXX1111.jpg" alt="XXX2222"> <div class="tp-caption tp-resizeme sfb fadeout white-color very_large_text" data-x="center" data-y="center" data-voffset="0" data-speed="1000" data-start="1800" data-easing="Power4.easeOut"> <h1> XXX3333 </h1> </div> </li>
Source Code
上面的图片中,只是高亮部分不相同。
最懒的主法,循环几次,拷贝与粘贴几次,然后修改不相同(高亮)的代码。
第二种方法,使用C#的循环产生:
SliderEntity se = new SliderEntity(); se.Sliders().ForEach(delegate (Slider s) { WriteLiteral("<li data-transition=\"fade\" data-slotamount=\"7\" data-masterspeed=\"1500\">"); WriteLiteral("<img src=\"" + Url.Content("~/Content/img/slider-images/" + s.ImageUrl) + "\" alt=\"" + s.Description + "\"/>"); WriteLiteral("<div class=\"tp-caption tp-resizeme sfb fadeout white-color very_large_text\""); WriteLiteral("data-x=\"center\""); WriteLiteral("data-y=\"center\""); WriteLiteral("data-voffset=\"0\""); WriteLiteral("data-speed=\"1000\""); WriteLiteral("data-start=\"1800\""); WriteLiteral("data-easing=\"Power4.easeOut\">"); WriteLiteral("<h1>"); WriteLiteral(s.Title); WriteLiteral("</h1>"); WriteLiteral("</div>"); WriteLiteral("</li>"); });
Source Code
这种方法,会比第一种方法好,毕竟它已经使用了Foreach方法了。不过在创建这个方法时,也得花上不少时间。使用"\"来处理双引号的问题。
第三种,Insus.NET想到,直接使用Razor的foreach方法,它也是循环,不过它神奇的快速实现:
@foreach (var item in (new SliderEntity()).Sliders()) { <li data-transition="fade" data-slotamount="7" data-masterspeed="1500"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="~/Content/img/slider-images/@item.ImageUrl" [email protected]> <div class="tp-caption tp-resizeme sfb fadeout white-color very_large_text" data-x="center" data-y="center" data-voffset="0" data-speed="1000" data-start="1800" data-easing="Power4.easeOut"> <h1> @item.Title </h1> </div> </li> }
Source Code
快的原因,foreach方法,直接可以写html代码。
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦