ASP.NET的视图(Razor)循环产生html代码

需要要视图中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" alt=@item.Description>                            <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代码。