ASP.NET中的Razor语法简介
Razor 不是一种编程语言。它是服务器端的标记语言。可以让您将基于服务器的代码(Visual Basic 和 C#)嵌入到网页中。
当服务器读取页面时,它首先运行 Razor 代码,然后再发送 HTML 页面到浏览器。在服务器上执行的代码能够执行一些在浏览器上不能完成的任务,比如,访问服务器数据库。服务器代码能创建动态的 HTML 内容,然后发送到浏览器。从浏览器上看,服务器代码生成的 HTML 与静态的 HTML 内容没有什么不同。
一、Razor 语法
1、 Razor C# 语法规则
- Razor 代码块包含在 @{ ... } 中 ,当行或多行。
- 内联表达式(变量和函数)以 @ 开头 :@变量 或 @( 表达式 )
- 代码语句用分号结束
- 变量使用 var 关键字声明
- 字符串用引号括起来
- C# 代码区分大小写
- C# 文件的扩展名是 .cshtml
<!-- Single statement block --> @{ var myMessage = "Hello World"; } <!-- Inline expression or variable --> <p>The value of myMessage is:@myMessage
</p> <!-- Multi-statement block --> @{ var greeting = "Welcome to our site!"; var weekDay = DateTime.Now.DayOfWeek; var greetingMessage = greeting + " Here in Huston it is: " + weekDay; } <p>The greeting is:@greetingMessage
</p>
2、Razor的作用域
大括号里面的就是表示作用域的范围,用形如 “@{code}”来写一段代码块。在作用域 “@(code)” 中输出也是用@符号的。
我的年龄:
@{
int age = 25;
string sex = "男";
@age
}性别: @(sex)
3、Razor和Html混合编写
- a.在作用域内容如果是以html标签开始则视为文本输出
- b.如果输出@,则使用@@
- c.如果需在代码块中直接输出纯文字而不带HTML标签,则可以使用@:标签,如果在 "@:" 后面加上@就表示Razor语句的变量。
@{
var strzm = "abc";
@:this is a mail:2734796332@qq.com.this is var:@strzm,this is mail@strzm,this is @@
//输出abc
@strzm
}
如果需要在代码块中输出续或不连续的多行纯文本,则使用text标签较为方便。
@if (Model.Price > 5M) {
<text> 名称:<b>@Model.Name</b><br /> 分类:<b>@Model.Description</b><br /> 价钱:<b>@Model.Price</b><br /> <pre> 测试行一: <a>aaaa</a> 测试行二: @@ fda@aaa </pre> </text>
}
4、变量
一个变量的名称必须以字母字符开头,并且不能包含空格或者保留字符。变量使用 var 关键字声明,或通过使用具体类型声明。
// Using the var keyword: var greeting = "Welcome to RUNOOB.COM"; var counter = 103; // Using data types: string greeting = "Welcome to RUNOOB.COM"; int counter = 103;
5、数据类型
- int 整数(全数字) 103, 12, 5168
- float 浮点数 3.14, 3.4e38
- decimal 十进制数字(高精度) 1037.196543
- bool 布尔值 true, false
- string 字符串 "Hello RUNOOB.COM", "John"
6、转换数据类型(string类型才能转)
- AsInt()\IsInt(): 转换字符串为整数
if (myString.IsInt()){ myInt=myString.AsInt(); }
- AsFloat()\IsFloat(): 转换字符串为浮点数。
- AsDecimal()\IsDecimal():转换字符串为十进制数。
- AsDateTime()\IsDateTime(): 转换字符串为 ASP.NET DateTime 类型。
- AsBool()\IsBool(): 转换字符串为布尔值。
- ToString(): 转换任何数据类型为字符串。
var myInt=1234; myString=myInt.ToString();
7、循环
For 循环
<body>@for(var i = 10; i < 21; i++) {<p>Line @i</p>}
</body>
For Each 循环
<body> <ul> @foreach (var x in Request.ServerVariables) {<li>@x</li>
} </ul> </body>
While 循环
<body>@{ var i = 0; while (i < 5) {i += 1; <p>Line @i</p> } }
</body>
8、数组
@{ string[] members = {"Jani", "Hege", "Kai", "Jim"}; int i = Array.IndexOf(members, "Kai")+1; int len = members.Length; string x = members[2-1]; } <html> <body> <h3>Members</h3> @foreach (var person in members) {<p>@person</p>
} <p>The number of names in Members are@l
en</p> <p>The person at position 2 is@x
</p> <p>Kai is now in position@i
</p> </body> </html>
9、逻辑条件
If 条件
@{var price=50;} <html> <body> @if (price>30) {<p>The price is too high.</p>
} </body> </html>
Else 条件
@{var price=20;} <html> <body> @if (price>30) {<p>The price is too high.</p> } else { <p>The price is OK.</p>
} </body> </html>
Else If 条件
@{var price=25;} <html> <body>@if (price>=30) { <p>The price is high.</p> } else if (price>20 && price<30) { <p>The price is OK.</p> } else { <p>The price is low.</p> }
</body> </html>
Switch 条件
@{ var weekday=DateTime.Now.DayOfWeek; var day=weekday.ToString(); var message=""; } <html> <body> @switch(day) { case "Monday": message="This is the first weekday."; break; case "Thursday": message="Only one day before weekend."; break; case "Friday": message="Tomorrow is weekend!"; break; default: message="Today is " + day; break; } <p>@message
</p> </body> </html>
二、Razor引擎
1、布局(Layout)(@RenderBody()方法)
解释:Layout方式布局就相当于一个模板,我们在它地址地方去添加代码。类似于ASP.NET母版页中的ContentPlaceHolder服务器控件,在MVC中使用@RenderBody()来呈现子Web页面的内容,它可以省去我们在每个视图文件中写相同的html元素、JS和样式等的工作。
母版页:(~/Views/Layout/_SiteLayout.cshtml)
母版的呈现是MVC内部处理的,这种以下划线(_)开头的视图文件,一般是不能直接返回给用户。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>我的网站 - @Page.Title</title> </head> <body> @RenderBody() </body> </html>
子页面:(~/Views/Home/About.cshtml)
@{ Layout = "~/Views/Layout/_SiteLayout.cshtml"; } <h1> 关于我的网站 </h1> <p> 这是一些内容显示在关于我们这个页面,我们用的是SiteLayout.cshtml这个主页母版页。 <br /> 当前时间:@DateTime.Now </p>
2、页面(@RenderPage()方法)
解释:page当需要在一个页面中,输出另外一个Razor文件(页面)的内容时候用到,比如头部或尾部这些公共的内容时需要用到,用@RenderPage()方法
母版页:(~/Views/Layout/_SiteLayout.cshtml)
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Simple Site</title> </head> <body> <!--头部--> @RenderPage("~/Views/Layout/_header.cshtml") </body> </html>
公共页:(~/Views/Layout/_header.cshtml)
<div id="header"> <a href="#">主页</a> <a href="#">关于我们</a> </div>
3、Section区域(@RenderSection())
解释:Section是定义在Layout的页面中使用的。在Layout的页面中用。在要Layout的父页面中使用@RenderSection()方法。
- @RenderSecion()这个占位符表示:在这里会渲染页面里面的一个节(可以是html代码也可以是c#代码和Html的结合体)。
- @RenderSection("scripts", required: false)做一个补充说明,第一个参数指明:在子页面被渲染的节的名称,第二个参数:指定子页面这个节是否是必需的,如果指定了required:true;但是在子页面没有给这个名称的节的话,编译是通不过的。
母版页:(~/Views/Layout/_SiteLayout.cshtml)
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Simple Site</title> </head> <body> <div id="left-menu"> @RenderSection("menu",true) </div> </body> </html>
公共页:(~/Views/Layout/_menu.cshtml)
@{ Layout = "~/Views/Layout/_SiteLayout.cshtml"; } <h1> 关于我的网站 </h1> <p> 这是一些内容显示在关于我们这个页面,我们用的是SiteLayout.cshtml这个主页母版页。 <br /> 当前时间:@DateTime.Now </p> @section menu{<ul id="sub-menu"> <li>菜单1</li> <li>菜单2</li> <li>菜单3</li> <li>菜单4</li> </ul> }
如果在子页面中没有去实现了menu了,则会抛出异常。我们可以使用它的重载@RenderSection("menu", false)
三、Razor 帮助器
ASP.NET 帮助器是通过几行简单的 Razor 代码即可访问的组件。您可以使用 Razor 语法构建自己的帮助器,或者使用内建的 ASP.NET 帮助器。
下面是一些有用的 Razor 帮助器的简短说明:
- Web Grid(Web 网格)
- Web Graphics(Web 图形)
- Google Analytics(Google 分析)
- Facebook Integration(Facebook 集成)
- Twitter Integration(Twitter 集成)
- Sending Email(发送电子邮件)
- Validation(验证)
@Href("~/")//表示网站的根目录
@Html.Raw('<font color='red'>红字</font>')就会显示出红色的”红字“,不用的话会直接显示这段html字符串(<font color='red'>红字</font>)
自定义Helper
@helper就是可以定义可重复使用的帮助器方法,不仅可以在同一个页面不同地方使用,还可以在不同的页面使用。
1、新建一个HelperMath.cshtml页面
2、HelperMath.cshtml页面写方法
@*求和*@ @helper sum(int a, int b) { int result = a + b; @result }
3、Index.cshtml页面调用
posted on 2020-07-04 15:19 springsnow 阅读(571) 评论(0) 编辑 收藏 举报