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

  • 相关阅读:
    docker 学习操作记录 4
    docker 学习操作记录 1
    centos 旧版本镜像
    zabbix 搭建 mysql 连接报错
    js判断是否为手机或是pc
    滚动翻页vue
    note
    Vue-cli 鼠标监听事件之滚动条
    adobe Keychain mac
    HTML协义代码
  • 原文地址:https://www.cnblogs.com/insus/p/5497979.html
Copyright © 2011-2022 走看看