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

需要要视图中Razor语法,循环产生一些html代码。

产生后的html是这样的:


 <li data-transition="fade" data-slotamount="7" data-masterspeed="1500">
                    <img src="~/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 src="~/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代码。

原文地址:https://www.cnblogs.com/insus/p/5497979.html