razor 不是一种编程语言。它是服务器端的标记语言。可以让您将基于服务器的代码(visual basic 和 c#)嵌入到网页中。
当服务器读取页面时,它首先运行 razor 代码,然后再发送 html 页面到浏览器。在服务器上执行的代码能够执行一些在浏览器上不能完成的任务,比如,访问服务器数据库。服务器代码能创建动态的 html 内容,然后发送到浏览器。从浏览器上看,服务器代码生成的 html 与静态的 html 内容没有什么不同。
https://docs.microsoft.com/zh-cn/aspnet/web-pages/overview/getting-started/introducing-razor-syntax-c
一、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、数组
</p> <p>kai is now in position@{ 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="#" rel="external nofollow" rel="external nofollow" >主页</a> <a href="#" rel="external nofollow" rel="external nofollow" >关于我们</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)
@if (issectiondefined("menu")) { @rendersection("menu", false) } else { <p>menu section is not defined!</p> }
三、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页面调用
1+2= @helpermath.sum(1, 2) <br />
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。