ASP.NET的视图(Razor)循环产生html代码
需要要视图中Razor语法,循环产生一些html代码。
产生后的html是这样的:
<li data-transition="fade" data-slotamount="" data-masterspeed="">
<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=""
data-speed=""
data-start=""
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="" data-masterspeed="">
<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=""
data-speed=""
data-start=""
data-easing="Power4.easeOut">
<h1>
@item.Title
</h1>
</div>
</li>
}
Source Code
快的原因,foreach方法,直接可以写html代码。
ASP.NET的视图(Razor)循环产生html代码的更多相关文章
- ASP.NET MVC 3 Razor 视图引擎 基本语法
本篇博文将进入MVC 3 的世界了,首先学习一下MVC 3 新增的Razor视图引擎的基本语法. 1. 使用 @ 字符将代码添加到页面中.正如传统的aspx视图的<% %>相同. ...
- (转)Asp.Net Mvc视图引擎Razor介绍
Asp.Net Mvc视图引擎Razor介绍 1.Razor介绍 程序园原创,转载请注明:http://www.kwstu.com/ArticleView/dabaomvc_2014082408205 ...
- ASP.NET MVC 自定义Razor视图WorkContext
概述 1.在ASP.NET MVC项目开发的过程中,我们经常需要在cshtml的视图层输出一些公用信息 比如:页面Title.服务器日期时间.页面关键字.关键字描述.系统版本号.资源版本号等 2.普通 ...
- ASP.NET MVC 3: Razor中的@:和语法
原文 ASP.NET MVC 3: Razor中的@:和语法 [原文发表地址] ASP.NET MVC 3: Razor’s @: and <text> syntax[原文发表时间] De ...
- ASP.NET MVC 视图(五)
ASP.NET MVC 视图(五) 前言 上篇讲解了视图中的分段概念.和分部视图的使用,本篇将会对Razor的基础语法简洁的说明一下,前面的很多篇幅中都有涉及到视图的调用,其中用了很多视图辅助器,也就 ...
- ASP.NET MVC 视图(四)
ASP.NET MVC 视图(四) 前言 上篇对于利用IoC框架对视图的实现进行依赖注入,最后还简单的介绍一下自定义的视图辅助器是怎么定义和使用的,对于Razor语法的细节和辅助器的使用下篇会说讲到, ...
- ASP.NET MVC 视图(三)
ASP.NET MVC 视图(三) 前言 上篇对于Razor视图引擎和视图的类型做了大概的讲解,想必大家对视图的本身也有所了解,本篇将利用IoC框架对视图的实现进行依赖注入,在此过程过会让大家更了解的 ...
- ASP.NET MVC 视图(二)
ASP.NET MVC 视图(二) 前言 上篇中对于视图引擎只是做了简单的演示,对于真正的理解视图引擎的工作过程可能还有点模糊,本篇将会对由MVC框架提供给我们的Razor视图引擎的整个执行过程做一个 ...
- ASP.NET MVC 视图(一)
ASP.NET MVC 视图(一) 前言 从本篇开始就进入到了MVC中的视图部分,在前面的一些篇幅中或多或少的对视图和视图中的一些对象的运用进行了描述,不过毕竟不是视图篇幅说的不全面,本篇首先为大家讲 ...
随机推荐
- J a v a 的“多重继承”
接口只是比抽象类“更纯”的一种形式.它的用途并不止那些.由于接口根本没有具体的实施细节——也就是说,没有与存储空间与“接口”关联在一起——所以没有任何办法可以防止多个接口合并到一起.这一点是至关重要的 ...
- Nginx学习笔记--001-Nginx快速搭建
Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄罗斯访问量第二的R ...
- BPM配置故事之案例11-操作外部数据源
小明:可以获取ERP数据了-- 老李:哦,这么快?小伙子,我非常看好你,来来,别急着走,再陪我聊会-- 小明:--您老人家不是又要改流程吧? 老李:没有没有,哎嘿嘿嘿,我们这不都是为公司效率着想嘛,这 ...
- Yeoman 学习笔记
yoeman 简介:http://www.infoq.com/cn/news/2012/09/yeoman yeoman 官网: http://yeoman.io/ yeoman 是快速创建骨架应用程 ...
- ASP.NET MVC Model绑定(四)
ASP.NET MVC Model绑定(四) 前言 前面的篇幅对于Model绑定器IModelBinder以及实现类型.Model绑定器提供程序都作了粗略的讲解,可以把Model绑定器想象成一个大的容 ...
- hibernate一对一主键双向关联
关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...
- 配置hibernate,Struts。文件
hibernate文件配置 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernat ...
- ASP.NET MVC Bundle使用 合并压缩
2017-01-06 更新 在 BundleCollection 的构造函数中添加了 3种默认规则 public BundleCollection() { BundleCollection.AddDe ...
- 常用js功能函数集合
1.获取随机时间戳 function uniqueId(){ var a=Math.random,b=parseInt; return Number(new Date( ...
- Android线程管理之AsyncTask异步任务
前言: 前面几篇文章主要学习了线程以及线程池的创建与使用,今天来学习一下AsyncTask异步任务,学习下AsyncTask到底解决了什么问题?然而它有什么弊端?正所谓知己知彼百战百胜嘛! 线程管理相 ...