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代码。

  • 相关阅读:
    ubnt+ros 接入无线
    生成new, old的 shell script
    lua学习记录
    反编译dtsi
    抓包软件PowerSniff开发计划
    android的ArrayMap类
    京东买的5本书
    c++ 变量必须初始化吗???
    cocos2dx 很好的源码分析博文
    cocos2dx 最基本,纯色、字体、图片
  • 原文地址:https://www.cnblogs.com/insus/p/5497979.html
Copyright © 2011-2022 走看看