Razor语法和Razor引擎大全
一、Razor语法
1、Razor的标识符
解释:@字符被定义为Razor服务器代码块的标识符,后面的表示是服务器代码了。web form中使用<%%>中写服务器代码一个道理。在vs工具里面提供了代码着色和智能感应的功能。
@{
string userName = "启超";
<span>我的名字叫:@userName</span>
<span>我的出生日期:@DateTime.Now.ToString("yyyy-MM-dd");</span>
}
2、Razor的作用域
解释:在上面一个例子中都已经使用到了大括号{},不错,大括号里面的就是表示作用域的范围,用形如 “@{code}”来写一段代码块。在作用域 “@(code)” 中输出也是用@符号的。
Index.cshtml页面:
我的年龄:
@{
int age = 25;
string sex = "男";
@age
}性别:@(sex)
3、Razor和Html混合编写
解释:
a.在作用域内容如果是以html标签开始则视为文本输出
b.如果输出@,则使用@@
c.如果要输出非html标签和非Razor语句的代码,则用 "@:" ,他的作用是相当于在处于html下面编写一样了,如果在 "@:" 后面加上@就表示Razor语句的变量,如下:
Index.cshtml页面:
@{
var strzm = "abc";
@:this is a mail:@qq.com.this is var:@strzm,this is mail@strzm,this is @@ //输出abc
@strzm
}
4、Razor类型转换
解释:As系列扩展方法和Is系列扩展方法(string类型才能转)
AsInt(),IsInt()
AsBool(),IsBool()
AsFloat(),IsFloat()
AsDecimal(),IsDecimal()
AsDateTime(),IsDateTime()
ToString()
Index.cshtml页面:
@{
string ss = "";
}
string转int:@ss.AsInt()
5、Razor其他
解释:
@Href("~/")//表示网站的根目录
@Html.Raw('<font color='red'>红字</font>')就会显示出红色的”红字“,不用的话会直接显示这段html字符串(<font color='red'>红字</font>)
————————————————————————————————————————————
二、Razor引擎
1、布局(Layout)(@RenderBody()方法)
解释:Layout方式布局就相当于一个模板一样的,我们在它地址地方去添加代码。相当于定义好框架,作为一个母版页的,在它下面的页面需要修改不同代码的地方使用@RenderBody()方法。
母版页:(~/Views/Layout/_SiteLayout.cshtml)
<!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") <!--底部-->
@RenderPage("~/Views/Layout/_footer.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()方法。
母版页:(~/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>
}
4、Helper
@helper就是可以定义可重复使用的帮助器方法,不仅可以在同一个页面不同地方使用,还可以在不同的页面使用。
4.1、新建一个HelperMath.cshtml页面
4.2、HelperMath.cshtml页面写方法
@*求和*@
@helper sum(int a, int b)
{
int result = a + b;
@result
}
4.3、Index.cshtml页面调用
+=@HelperMath.sum(, )<br />
Razor语法和Razor引擎大全的更多相关文章
- Blazor和Vue对比学习(基础1.2):模板语法和Razor语法
Vue使用模板语法,Blazor使用祖传的Razor语法,从逻辑和方向上看,两者极为相似,比如: 都基于HTML 都通过声明式地将组件实例的状态(数据/方法)绑定到呈现的DOM上 都通过指令实现更加丰 ...
- Go汇编语法和MatrixOne使用介绍
目录 MatrixOne数据库是什么? Go汇编介绍 为什么使用Go汇编? 为什么不用CGO? Go汇编语法特点 操作数顺序 寄存器宽度标识 函数调用约定 对写Go汇编代码有帮助的工具 avo tex ...
- OC第五节 ——点语法和@property
一.setter和getter函数 1.回忆:如何访问对象中的成员变量 2.setter和getter函数的作用 setter 方法: 修改对象的字段/实例变 ...
- Markdown 语法和 MWeb 写作使用说明
---恢复内容开始--- # Markdown 语法和 MWeb 写作使用说明 Markdown 的设计哲学 Markdown 的目標是實現「易讀易寫」. 不過最需要強調的便是它的可讀性.一份使用 M ...
- Markdown语法和MWeb使用说明
Markdown 语法和 MWeb 写作使用说明 开始写博客,首先熟悉一下Markdown,以前过看GitHub里的README.MD,感受到了这种文字排版的简洁美观. 写博客是一种有效的学习总结和分 ...
- iOS开发-OC语言 (六)点语法和@property
点语法和@property 知识点 1.setter/getter函数 2.点语法 3.@property语法和属性 ======================================== ...
- Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法
转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...
- 好习惯: 用controller as 语法和$inject数组注入
angular好习惯1: 用controller as 语法和$inject数组注入 1) 像普通的JS类一样实现controller,摆脱$scope 2) 用.$inject数组注入相关模块,便于 ...
- [golang] go的typeswitch guard(类型区别)语法和type assertion(类型断言)语法
最近在实现golang,看到个go的特性语法: typeswitch guard. typeswitch guard语法如下: package main import "fmt" ...
随机推荐
- 『Python基础-6』if语句, if-else语句
# 『Python基础-6』if语句, if-else语句 目录: 条件测试 if语句 if-else语句 1. 条件测试 每条if语句的核心都是一个值为True或False的表达式,这种表达式被称为 ...
- 第6天 Java基础语法
第6天 Java基础语法 今日内容介绍 自定义类 ArrayList集合 引用数据类型(类) 引用数据类型分类 提到引用数据类型(类),其实我们对它并不陌生,如使用过的Scanner类.Random类 ...
- 数据结构之栈和队列及其Java实现
栈和队列是数据结构中非常常见和基础的线性表,在某些场合栈和队列使用很多,因此本篇主要介绍栈和队列,并用Java实现基本的栈和队列,同时用栈和队列相互实现. 栈:栈是一种基于“后进先出”策略的线性表.在 ...
- fedora19之后的版本安装mysql
正准备学习linux平台的mysql,却发现在fedora21平台下安装mysql总是失败,查了些资料,总结如下: 错误示范: 按照安装软件的经验,习惯性输入以下的命令: $sudo dnf inst ...
- vuetify.js框架 下拉框数据改变DOM原数据未清除
今天遇到一个奇怪的bug 需求很简单,就是将“引擎能力”下拉框选中的值作为筛选条件传入到“样本类型”下拉框中,默认“样本类型”下拉框显示所有样本类型 看图: 如图所示,功能很简单. 其实还是对vuet ...
- 常用 Maven 配置
打包为带依赖的 JAR <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEnc ...
- 北京Uber优步司机奖励政策(4月8日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- ORB代码框架梳理
这里从单目入手,画了一个框架图:
- 第三模块:面向对象&网络编程基础 第1章 面向对象
我的失败与梦想(一) 我的失败与梦想之为何创办路飞学城 01-编程范式 02-面向过程编程 03-面向对象编程介绍 04-定义类与实例化出对象 05-如何使用类 06-如何使用对象 07-属性查找与绑 ...
- 初学Direct X(10)—— D3D基础预备知识
初学Direct X(10) -- D3D基础预备知识 1. 像素格式 D3DFMT_X8R8G8B8(F) X:未加使用 8:8位用于显示 B:用于显示蓝色 F:浮点像素类型 以下三个较为常用,使用 ...