zoukankan      html  css  js  c++  java
  • 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代码。

  • 相关阅读:
    Eclipse快捷键
    vs2010有哪些快捷键
    游戏引擎列表
    移动设备开发推荐网站(J2ME开发)
    Python入门学习资料推荐
    C#中常用的几种读取XML文件的方法
    Springboot整合RabbitMq
    JAVA获取上下行网速
    java jar 指定logback.xml、application.yaml
    在CentOS7系统安装与配置RabbitMQ
  • 原文地址:https://www.cnblogs.com/insus/p/5497979.html
Copyright © 2011-2022 走看看