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>

 

上面的圖片中，只是高亮部分不相同。

最懶的主法，循環幾次，拷貝與粘貼幾次，然后修改不相同(高亮)的代碼。


第二種方法，使用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>");
                    });

這種方法，會比第一種方法好，畢竟它已經使用了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>
                    }

 

快的原因，foreach方法，直接可以寫html代碼。