ASP.NET中的Razor语法简介

目录
  • 一、Razor 语法
    • 1、 Razor C# 语法规则
    • 2、Razor的作用域
    • 3、Razor和Html混合编写
    • 4、变量
    • 5、数据类型
    • 6、转换数据类型(string类型才能转)
    • 7、循环
    • 8、数组
    • 9、逻辑条件
  • 二、Razor引擎
    • 1、布局(Layout)(@RenderBody()方法)
    • 2、页面(@RenderPage()方法)
    • 3、Section区域(@RenderSection())
  • 三、Razor 帮助器
    • 自定义Helper

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 />

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • ASP.NET MVC学习教程之Razor语法

    前言 ASP.NET MVC 3配有一个新的名为"Razor"的视图引擎选项(除了已有的.aspx视图引擎).Razor尽量减少编写一个视图模板需要敲入的字符数,实现快速流畅的编程工作流.与大部分模板的语法不同,你不必在HTML中为了明确地标记出服务模块的开始和结束而中断编程.Razor解析器足够聪明,能从你的代码中推断出来.这使其简洁,富有表现力的语法输入干净,快速,有趣.下面话不多说了,来一起看看详细的介绍吧 1. 表达式 表达式必须跟在"@"符号之后, 2.代

  • 详解ASP.NET MVC3:Razor的@:和语法

    这是我正在写的博文系列中的另一篇,涵盖ASP.NET MVC 3的一些新功能: http://weblogs.asp.net/scottgu/archive/2010/10/19/asp-net-mvc-3-new-model-directive-support-in-razor.aspx Razor中的布局10月22日) 用Razor实现服务器端注释(11月12日) Razor的@:和<syntax>语法(今天) 本文将讨论新版Razor里视图引擎中支持的两个有用的语法功能:@:和<t

  • 详解ASP.NET Razor 语法

    Razor 同时支持 C# (C sharp) 和 VB (Visual Basic). 主要的 Razor C# 语法规则 Razor 代码块包含在 @{ ... } 中 内联表达式(变量和函数)以 @ 开头 代码语句用分号结束 变量使用 var 关键字声明 字符串用引号括起来 C# 代码区分大小写 C# 文件的扩展名是 .cshtml C# 实例 <!-- Single statement block --> @{ var myMessage = "Hello World&quo

  • ASP.NET中的Razor语法简介

    目录 一.Razor 语法 1. Razor C# 语法规则 2.Razor的作用域 3.Razor和Html混合编写 4.变量 5.数据类型 6.转换数据类型(string类型才能转) 7.循环 8.数组 9.逻辑条件 二.Razor引擎 1.布局(Layout)(@RenderBody()方法) 2.页面(@RenderPage()方法) 3.Section区域(@RenderSection()) 三.Razor 帮助器 自定义Helper Razor 不是一种编程语言.它是服务器端的标记语

  • PHP中的替代语法简介

    替代语法是PHP程序设计中不常见到,有时却又很重要的一个概念.今天本文就以实例形式展示了这一概念的用法. 查看一下wordpress的代码,里面可以见到有些少见的php替代语法,如下所示: <?php else : ?> <div class="entry-content"> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span&

  • asp.net实现在非MVC中使用Razor模板引擎的方法

    本文实例讲述了asp.net实现在非MVC中使用Razor模板引擎的方法.分享给大家供大家参考.具体分析如下: 模板引擎介绍 Razor.Nvelocity.Vtemplate,Razor一般在MVC项目中使用,这里介绍在非MVC项目中的用法. 如何在非MVC中使用Razor模板引擎 借助于开源的RazorEngine,我们可以在非asp.net mvc项目中使用Razor引擎,甚至在控制台.WinForm项目中都可以使用Razor(自己开发代码生成器) 如何使用Razor 环境搭建: ① 添加

  • 教你如何在 Javascript 文件里使用 .Net MVC Razor 语法

    相信大家都试过在一个 View 里嵌套使用 javascript,这时就可以直接使用 Razor 语法以调用 .NET 的一些方法.如以下代码嵌套在一个 Razor 的 View 里: <script> var currDate = '@DateTime.Now'; //直接调用.NET的方法 console.log(currDate) </script> 但另一种情况是,如果我想在一个独立的 JS 文件里使用 Razor,那以上的方法可行不通,因为MVC不会直接解释JS文件,只有

  • ASP.NET Core中的Razor页面使用视图组件

    视图组件简介 在新的ASP.NET Core MVC中,视图组件类似于局部视图,但它们更强大.视图组件不使用模型绑定,仅依赖于您在调用时提供的数据. 视图组件特性: 呈现页面响应的某一部分而不是整个响应 包括在控制器和视图之间发现的关注分离和可测试性优势 可以具有参数和业务逻辑 通常在页面布局中调用 视图组件是在任何地方可重用的呈现逻辑,对于局部视图来说相对复杂,例如: 动态导航菜单 标签云(查询数据库) 登录面板 购物车 最近发表的文章 典型博客上的侧边栏内容 将在每个页面上呈现的登录面板,并

  • ASP.NET Core中的Razor页面介绍

    目录 简介 Why? 创建Razor页面应用程序 ASP.NETCoreRazor页面-核心功能 模型绑定 Handlers TagHelpersandHTMLHelpers 路由 总结 简介 随着ASP.NET Core 2 即将来临,最热门的新事物是Razor页面. Razor页面是ASP.NET Core的一个新功能,可以使基于页面的编程方式更容易,更高效. 大众的初步印象是对于那些只专注于页面的小型应用来说,Razor页面更容易.更快地取代MVC.然而,事实证明,它可能比这更强大.使用A

  • asp.net模板引擎Razor中cacheName的问题分析

    本文实例讲述了asp.net模板引擎Razor中cacheName的问题.分享给大家供大家参考.具体如下: 一.为什么使用cacheName 使用cacheName主要是考虑到Razor.Parse()每解析一次都会动态创建一个程序集,如果解析量很大,就会产生很多程序集,大量的程序集调用会造成程序非常慢. 举个例子: 如果编译1000次,编译速度就会很慢. static void Main(string[] args) { string cshtml = File.ReadAllText(@"E

  • 利用ASP.Net Core中的Razor实现动态菜单

    目录 准备 1.实现思路 2.编码 2.1  建立渲染内容填充方法 2.2  建立分部视图 2.3 调用分布视图 准备 1.框架 .netcore  版本 yishaadmin开源框架 2.模板 本文模板使用adminlte3.0,文档地址 3.菜单表关键字段 id 表主键(当前菜单) ParentId 父级ID(父级菜单 为0时为顶级菜单,也可能为内容) MenuUrl 菜单地址(只有页面有地址,本身菜单是空) MenuType 菜单类型(1是菜单 2是页面 3是按钮) MenuIcon 图标

随机推荐