Razor view engine 基础语法

qqjavagood

浏览: 99063 次
性别:
来自: 深圳

最近访客更多访客>>

bosencn

wangchh8134

胖嘟嘟喵星人

zhuqinglin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java
Razor view engine 基础语法

Razor view engine 基础语法 java 工作

在asp.net MVC3中，引入了razor view engine ，更加方便，快捷的进行页面开发。

下面是razor的简单的语法信息：

一下文章转载自：http://www.cnblogs.com/highend/archive/2011/04/09/aspnet_mvc3_razor_engine.html

所有以 @开头或 @{ /* 代码体 */ } (在@与{直接不得添加任何空格) 的部分代码都会被ASP.NET引擎进行处理.

在 @{ /*代码体*/ } 内的代码每一行都必须以";"结束,如 
@{ 
 var i = 10; 
 var y = 20; 
} 
而 @xxx 则不需要以";"作为结束符,如 
@i 输出 10 
@y; 输出 20; 代码区内字母分大小写. 

字符类型常量必须用""括起例如: @{ string str = "my string"; } -注意-

如需要在页面输出”@”字符 
可以使用HTML ASCII编码&#64; 
当然Razor也提供智能分析功能: 如果在@的前一个字符若是非空白字符,则ASP.NET不会对其进行处理 
如:text@i xx 输出 text@i xx 
单行语法: 
@{ var I = 10; } 
多行语法:

<div id="codeSnippetWrapper" style="margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; font-size: 8pt; text-align: left; background-color: #f4f4f4; line-height: 12pt; width: 650px; font-family: 'Courier New', courier, monospace; direction: ltr; cursor: text; padding: 4px; border: 1px solid silver;">
<div id="codeSnippet" style="line-height: 12pt; width: 650px; direction: ltr; font-size: 8pt; border-style: none; padding: 0px; margin: 0px;">

<pre> var I = 10;</pre>
<pre> Var y = 20;</pre>
<pre>}</pre>

1. 使用局部变量,Razor不支持访问修饰符(public,private等,这个没任何意义) 
在单行上定义局部变量 
@{ var total = 7; } 
@{ var myMessage = "Hello World";} 
在多行上定义局部变量
<div id="codeSnippetWrapper" style="margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; font-size: 8pt; text-align: left; background-color: #f4f4f4; line-height: 12pt; width: 650px; font-family: 'Courier New', courier, monospace; direction: ltr; cursor: text; padding: 4px; border: 1px solid silver;">
<div id="codeSnippet" style="line-height: 12pt; width: 650px; direction: ltr; font-size: 8pt; border-style: none; padding: 0px; margin: 0px;">

<pre> var greeting = "Welcome to our site!";</pre>
<pre> var weekDay = DateTime.Now.DayOfWeek;</pre>
<pre> var greetingMessage = greeting + " Today is: " + weekDay;</pre>
<pre>}</pre>

 
在上下文中使用变量

<div id="codeSnippetWrapper" style="margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; font-size: 8pt; text-align: left; background-color: #f4f4f4; line-height: 12pt; width: 675px; font-family: 'Courier New', courier, monospace; direction: ltr; cursor: text; padding: 4px; border: 1px solid silver;">
<div id="codeSnippet" style="line-height: 12pt; width: 675px; direction: ltr; font-size: 8pt; border-style: none; padding: 0px; margin: 0px;">
<pre><
p
>
The value of your account is: @total </
p
>
</pre>
<pre><
p
>
The value of myMessage is: @myMessage</
p
>
</pre>

 
注意
:
变量拼接输出 
@{ var i = 10; } 
text @i text 将输出 text 10 text 
但是如果你想要输出 text10text 呢?

<div id="codeSnippetWrapper" style="margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; font-size: 8pt; text-align: left; background-color: #f4f4f4; line-height: 12pt; width: 675px; font-family: 'Courier New', courier, monospace; direction: ltr; cursor: text; padding: 4px; border: 1px solid silver;">
<div id="codeSnippet" style="line-height: 12pt; width: 675px; direction: ltr; font-size: 8pt; border-style: none; padding: 0px; margin: 0px;">
<pre><
p
>
text@{@i}text</
p
>
即可</pre>
<pre><
p
>
text@i text</
p
>
将输出 text@i text</pre>
<pre><
p
>
text@itext</
p
>
将输出 text@itext</pre>
<pre><
p
>
text @itext</
p
>
将报错</pre>

如果是输出的是变量的方法名则不需要用@{}括住也可生效,但注意在@字符前记得加空格
如: 
text @i.ToString()text 
使用变量对象可直接写: @var1 @var2 @myObject.xx

<div id="codeSnippetWrapper" style="margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; font-size: 8pt; text-align: left; background-color: #f4f4f4; line-height: 12pt; width: 675px; font-family: 'Courier New', courier, monospace; direction: ltr; cursor: text; padding: 4px; border: 1px solid silver;">
<div id="codeSnippet" style="line-height: 12pt; width: 675px; direction: ltr; font-size: 8pt; border-style: none; padding: 0px; margin: 0px;">
<pre>@{</pre>
<pre> if (xx)</pre>
<pre> {</pre>
<pre> //do something</pre>
<pre> }</pre>
<pre> else</pre>
<pre> {</pre>
<pre> //do anything</pre>
<pre> }</pre>
<pre>}</pre>

3. 在@{... }内部使用html标记
<div id="codeSnippetWrapper" style="margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; font-size: 8pt; text-align: left; background-color: #f4f4f4; line-height: 12pt; width: 675px; font-family: 'Courier New', courier, monospace; direction: ltr; cursor: text; padding: 4px; border: 1px solid silver;">
<div id="codeSnippet" style="line-height: 12pt; width: 675px; direction: ltr; font-size: 8pt; border-style: none; padding: 0px; margin: 0px;">

<pre> <
p
>
text</
P
>
</pre>
<pre> <
div
>
div1</
div
>
</pre>
<pre>}</pre>

4. 在@{...}内部输出文本 
利用@:进行单行输出:
<div id="codeSnippetWrapper" style="margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; font-size: 8pt; text-align: left; background-color: #f4f4f4; line-height: 12pt; width: 675px; font-family: 'Courier New', courier, monospace; direction: ltr; cursor: text; padding: 4px; border: 1px solid silver;">
<div id="codeSnippet" style="line-height: 12pt; width: 675px; direction: ltr; font-size: 8pt; border-style: none; padding: 0px; margin: 0px;">

<pre> @:This is some text</pre>
<pre> @:This is text too</pre>
<pre> @:@i 也可输出变量</pre>
<pre>}</pre>

利用<text />进行多行输出:
<div id="codeSnippetWrapper" style="margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; font-size: 8pt; text-align: left; background-color: #f4f4f4; line-height: 12pt; width: 675px; font-family: 'Courier New', courier, monospace; direction: ltr; cursor: text; padding: 4px; border: 1px solid silver;">
<div id="codeSnippet" style="line-height: 12pt; width: 675px; direction: ltr; font-size: 8pt; border-style: none; padding: 0px; margin: 0px;">

<pre> <
text
>
</pre>
<pre> tomorrow is good</pre>
<pre> some girl is nice</pre>
<pre> </
text
>
</pre>
<pre>}</pre>

5. 在@{...}内部使用注释
<div id="codeSnippetWrapper" style="margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; font-size: 8pt; text-align: left; background-color: #f4f4f4; line-height: 12pt; width: 675px; font-family: 'Courier New', courier, monospace; direction: ltr; cursor: text; padding: 4px; border: 1px solid silver;">
<div id="codeSnippet" style="line-height: 12pt; width: 658px; direction: ltr; font-size: 8pt; border-style: none; padding: 0px; margin: 0px;">

<pre> //单行注释</pre>
<pre> var i = 10;</pre>
<pre> //defg</pre>
<pre>}</pre>
<pre> </pre>
<pre> @* 多行注释 *@</pre>
<pre> @* </pre>
<pre> 多行注释</pre>
<pre> 多行注释 </pre>
<pre> *@</pre>
<pre> </pre>
<pre> </pre>
<pre>@{</pre>
<pre> @*</pre>
<pre> 多行注释</pre>
<pre> 多行注释 </pre>
<pre> *@</pre>
<pre> var i = 10; @* asdfasf *@</pre>
<pre>}</pre>
<pre> </pre>
<pre>
</pre>
<pre> </pre>
<pre>@{</pre>
<pre> /*</pre>
<pre> 多行注释 </pre>
<pre> */</pre>
<pre>}</pre>

若在@{ ... }内部使用注释,则会输出到页面之中,如果在内部使用@变量,则会被处理 
@{ 
 
} 
输出: >

AsInt(), IsInt() 
AsBool(),IsBool() 
AsFloat(),IsFloat() 
AsDecimal(),IsDecimal() 
AsDateTime(),IsDateTime() 
ToString() 
例子:
<div id="codeSnippetWrapper" style="margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; font-size: 8pt; text-align: left; background-color: #f4f4f4; line-height: 12pt; width: 675px; font-family: 'Courier New', courier, monospace; direction: ltr; cursor: text; padding: 4px; border: 1px solid silver;">
<div id="codeSnippet" style="line-height: 12pt; width: 675px; direction: ltr; font-size: 8pt; border-style: none; padding: 0px; margin: 0px;">

<pre> var i = “10”;</pre>
<pre>}</pre>
<pre> </pre>
<pre><
p
>
i = @i.AsInt() </
p
>

</pre>

7. 使用循环
<div id="codeSnippetWrapper" style="margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; font-size: 8pt; text-align: left; background-color: #f4f4f4; line-height: 12pt; width: 675px; font-family: 'Courier New', courier, monospace; direction: ltr; cursor: text; padding: 4px; border: 1px solid silver;">
<div id="codeSnippet" style="line-height: 12pt; width: 658px; direction: ltr; font-size: 8pt; border-style: none; padding: 0px; margin: 0px;">
<pre>
</pre>
<pre>@for (int i = 10; i <
11; i++)</pre>
<pre>{</pre>
<pre> @:@i</pre>
<pre>}</pre>
<pre>
</pre>
<pre>@{</pre>
<pre> for (int i = 10; i <
11; i++)</pre>
<pre> {</pre>
<pre> //do something</pre>
<pre> }</pre>
<pre>}</pre>
<pre> </pre>

0
顶

0
踩

分享到：

44个灵感来自于“大自然”的网站设计（上 ... | Struts2 jQuery Plugin Showcase 学习笔记

2011-12-06 14:23
浏览 967
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论