你的位置:首页 > ASP.net教程

[ASP.net教程]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代码。