ASP.NET 系列_02_Razor 教程

ASP.NET 系列_02_Razor 教程

 

github地址: https://github.com/ixixii/ASP.NET_01_WebPages_Razor

代码汇总: 见github

 

ASP.NET Razor 标记

 

ASP.NET Razor - 标记

本节为你介绍什么是 Razor 以及 Razor 语法。


Razor 不是一种编程语言。它是服务器端的标记语言。


什么是 Razor?

Razor 是一种标记语法,可以让您将基于服务器的代码(Visual Basic 和 C#)嵌入到网页中。

基于服务器的代码可以在网页传送给浏览器时,创建动态 Web 内容。当一个网页被请求时,服务器在返回页面给浏览器之前先执行页面中的基于服务器的代码。通过服务器的运行,代码能执行复杂的任务,比如进入数据库。

Razor 是基于 ASP.NET 的,是为创建 Web 应用程序而设计的。它具有传统 ASP.NET 的功能,但更容易使用并且更容易学习。


Razor 语法

Razor 使用了与 PHP 和经典 ASP 相似的语法。

Razor:

<ul>
@for (int i = 0; i < 10; i++) {
<li>@i</li>
}
</ul>

PHP:

<ul>
<?php
for ($i = 0; $i < 10; $i++) {
echo("<li>$i</li>");
}
?>
</ul>

Web Forms(经典 ASP):

<ul>
<% for (int i = 0; i < 10; i++) { %>
<li><% =i %></li>
<% } %>
</ul>

 


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(验证)

Razor 编程语言

Razor 支持 C# (C sharp) 和 VB (Visual Basic)。

 

ASP.NET Razor 语法

 

ASP.NET Razor - C# 和 VB 代码语法


Razor 同时支持 C# (C sharp) 和 VB (Visual Basic)。

本节讲解了 Razor C# 与  Razor VB 的语法规则。


主要的 Razor C# 语法规则

  • Razor 代码块包含在 @{ ... } 中
  • 内联表达式(变量和函数)以 @ 开头
  • 代码语句用分号结束
  • 变量使用 var 关键字声明
  • 字符串用引号括起来
  • C# 代码区分大小写
  • C# 文件的扩展名是 .cshtml

C# 实例

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

 


主要的 Razor VB 语法规则

  • Razor 代码块包含在 @Code ... End Code 中
  • 内联表达式(变量和函数)以 @ 开头
  • 变量使用 Dim 关键字声明
  • 字符串用引号括起来
  • VB 代码不区分大小写
  • VB 文件的扩展名是 .vbhtml

实例

<!-- Single statement block --> 
@Code dim myMessage = "Hello World" End Code 

<!-- Inline expression or variable --> 
<p>The value of myMessage is: @myMessage</p> 

<!-- Multi-statement block --> 
@Code
dim greeting = "Welcome to our site!" 
dim weekDay = DateTime.Now.DayOfWeek 
dim greetingMessage = greeting & " Here in Huston it is: " & weekDay
End Code 

<p>The greeting is: @greetingMessage</p>

 


它是如何工作的?

Razor 是一种将服务器代码嵌入在网页中的简单的编程语法。

Razor 语法是基于 ASP.NET 框架,专门用于创建 Web 应用程序的部分 Microsoft.NET 框架。

Razor 语法支持所有 ASP.NET 的功能,但是使用的是一种简化语法,对初学者而言更容易学习,对专家而言更有效率的。

Razor 网页可以被描述成带一下两种类型内容的 HTML 网页: HTML 内容和 Razor 代码。

当服务器读取页面时,它首先运行 Razor 代码,然后再发送 HTML 页面到浏览器。在服务器上执行的代码能够执行一些在浏览器上不能完成的任务,比如,访问服务器数据库。服务器代码能创建动态的 HTML 内容,然后发送到浏览器。从浏览器上看,服务器代码生成的 HTML 与静态的 HTML 内容没有什么不同。

带 Razor 语法的 ASP.NET 网页有特殊的文件扩展名 cshtml(Razor C#)或者 vbhtml(Razor VB)。


使用对象

服务器编码往往涉及到对象。 

"Date" 对象是一个典型的内置的 ASP.NET 对象,但对象也可以是自定义的,一个网页,一个文本框,一个文件,一个数据库记录,等等。 

对象有用于执行的方法。一个数据库记录可能有一个 "Save" 方法,一个图像对象可能有一个 "Rotate" 方法,一个电子邮件对象可能有一个 "Send" 方法,等等。 

对象也有用于描述各自特点的属性。一个数据库记录可能有 FirstName 和 LastName 属性。

ASP.NET Date 对象有一个 Now 属性(写成 Date.Now),Now 属性有一个 Day 属性(写成 Date.Now.Day)。下面实例演示了如何访问 Data 对象的一些属性: 

实例

<table border="1"> 
<tr> 
<th width="100px">Name</th> 
<td width="100px">Value</td> 
</tr> 
<tr> 
<td>Day</td><td>@DateTime.Now.Day</td> 
</tr> 
<tr> 
<td>Hour</td><td>@DateTime.Now.Hour</td> 
</tr> 
<tr> 
<td>Minute</td><td>@DateTime.Now.Minute</td> 
</tr> 
<tr> 
<td>Second</td><td>@DateTime.Now.Second</td> 
</tr> 
</td> 
</table>

 


If 和 Else条件

动态网页的一个重要特点是,您可以根据条件决定做什么。

做到这一点的常用方法是使用 if ... else 语句:

实例

@{
var txt = "";
if(DateTime.Now.Hour > 12)
{txt = "Good Evening";}
else
{txt = "Good Morning";}
}
<html> 
<body> 
<p>The message is @txt</p> 
</body> 
</html> 

 


读取用户输入

动态网页的另一个重要特点是,您可以读取用户输入。

输入是通过 Request[] 功能读取的,并且传送输入数据是经过 IsPost 条件判断的:

实例

@{
var totalMessage = "";
if(IsPost)
{
var num1 = Request["text1"];
var num2 = Request["text2"];
var total = num1.AsInt() + num2.AsInt();
totalMessage = "Total = " + total;
}

<html> 
<body style="background-color: beige; font-family: Verdana, Arial;"> 
<form action="" method="post"> 
<p><label for="text1">First Number:</label><br> 
<input type="text" name="text1" /></p> 
<p><label for="text2">Second Number:</label><br> 
<input type="text" name="text2" /></p> 
<p><input type="submit" value=" Add " /></p> 
</form> 
<p>@totalMessage</p> 
</body> 
</html>

 

 

 

ASP.NET Razor C# 变量

 

ASP.NET Razor - C# 变量

在 ASP.NET 中 Razor 支持 C# (C sharp) ,本节讲解了 C# 的变量。


变量是用来存储数据的命名实体。


变量

变量是用来存储数据的。

一个变量的名称必须以字母字符开头,并且不能包含空格或者保留字符。

一个变量可以是一个指定的类型,表示它所存储的数据类型。string 变量存储字符串值("Hello Beyond"),integer 变量存储数字值(103),date 变量存储日期值,等等。

变量使用 var 关键字声明,或通过使用类型(如果您想声明类型)声明,但是 ASP.NET 通常能自动确定数据类型。

实例

// Using the var keyword:
var greeting = "Hello Beyond";
var counter = 103;
var today = DateTime.Today;

// Using data types:
string greeting = "Hello Beyond";
int counter = 103;
DateTime today = DateTime.Today;

 


数据类型

下面列出了常用的数据类型:

类型 描述 实例
int 整数(全数字) 103, 12, 5168
float 浮点数 3.14, 3.4e38
decimal 十进制数字(高精度) 1037.196543
bool 布尔值 true, false
string 字符串 "Hello Beyond", "Mathilda"

 


运算符

运算符告诉 ASP.NET 在表达式中执行什么样的命令。

C# 语言支持多种运算符。下面列出了常用的运算符:

运算符 描述 实例
= 给一个变量赋值。 i=6
+
-
*
/
加上一个值或者一个变量。
减去一个值或者一个变量。
乘以一个值或者一个变量。
除以一个值或者一个变量。
i=5+5
i=5-5
i=5*5
i=5/5
+=
-=
变量递增。
变量递减。
i += 1
i -= 1
== 相等。如果值相等则返回 true。 if (i==10)
!= 不等。如果值不等则返回 true。 if (i!=10)
<
>
<=
>=
小于。
大于。
小于等于。
大于等于。
if (i<10)
if (i>10)
if (i<=10)
if (i>=10)
+ 连接字符串(一系列互相关联的事物)。 "w3" + "schools"
. 点号。分隔对象和方法。 DateTime.Hour
() 圆括号。将值进行分组。 (i+5)
() 圆括号。传递参数。 x=Add(i,5)
[] 中括号。访问数组或者集合的值。 name[3]
! 非。真/假取反。 if (!ready)
&&
||
逻辑与。
逻辑或。
if (ready && clear)
if (ready || clear)

 


转换数据类型

从一种数据类型转换到另一种数据类型,有时候是很有用的。

最常见的例子是将字符串输入转换为另一种类型,如整数或者日期。

一般规则下,都是将用户输入看做字符串处理,即使用户输入了数字。因此数值输入必须被转换成数字,然后才能将其用于计算。

下面列出了常用的转换方法:

方法 描述 实例
AsInt()
IsInt()
转换字符串为整数。 if (myString.IsInt())
{myInt=myString.AsInt();}
AsFloat()
IsFloat()
转换字符串为浮点数。 if (myString.IsFloat())
{myFloat=myString.AsFloat();}
AsDecimal()
IsDecimal()
转换字符串为十进制数。 if (myString.IsDecimal())
{myDec=myString.AsDecimal();}
AsDateTime()
IsDateTime()
转换字符串为 ASP.NET DateTime 类型。 myString="10/10/2012";
myDate=myString.AsDateTime();
AsBool()
IsBool()
转换字符串为布尔值。 myString="True";
myBool=myString.AsBool();
ToString() 转换任何数据类型为字符串。 myInt=1234;
myString=myInt.ToString();

 

 

ASP.NET Razor C# 循环和数组

 

ASP.NET Razor - C# 循环和数组


语句在循环中会被重复执行。

循环语句允许我们多次执行一个语句或语句组。


For 循环

如果您需要重复执行相同的语句,您可以设定一个循环。

如果您知道要循环的次数,您可以使用 for 循环。这种类型的循环在向上计数或向下计数时特别有用:

实例

<html>
<body>
@for(var i = 10; i < 21; i++)
{<p>Line @i</p>}
</body>
</html>

 


For Each 循环

如果您使用的是集合或者数组,您会经常用到 for each 循环

集合是一组相似的对象,for each 循环可以遍历集合直到完成。

下面的实例中,遍历 ASP.NET Request.ServerVariables 集合。

实例

<html>
<body>
<ul>
@foreach (var x in Request.ServerVariables)
{<li>@x</li>}
</ul>
</body>
</html>

 


While 循环

while 循环是一个通用的循环。

while 循环以 while 关键字开始,后面紧跟着括号,您可以在括号里规定循环将持续多久,然后是重复执行的代码块。

while 循环通常会设定一个递增或者递减的变量用来计数。

下面的实例中,+= 运算符在每执行一次循环时给变量 i 的值加 1。

实例

<html>
<body>
@{
var i = 0;
while (i < 5)
{
i += 1;
<p>Line #@i</p>
}
}
</body>
</html>

 


数组

当您要存储多个相似变量但又不想为每个变量都创建一个独立的变量时,可以使用数组来存储:

实例

@{
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 @len</p>
<p>The person at position 2 is @x</p>
<p>Kai is now in position @i</p>
</body>
</html>
 

 

 

 

ASP.NET Razor C# 逻辑

 

ASP.NET Razor - C# 逻辑条件


编程逻辑:根据条件执行代码。


If 条件

C# 允许根据条件执行代码。

使用 if 语句来判断条件。根据判断结果,if 语句返回 true 或者 false:

  • if 语句开始一个代码块
  • 条件写在括号里
  • 如果条件为真,大括号内的代码被执行

实例

@{var price=50;}
<html>
<body>
@if (price>30)
{
<p>The price is too high.</p>
}
</body>
</html>

 


Else 条件

if 语句可以包含 else 条件

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>

 

注释:在上面的实例中,如果第一个条件为真,if 块的代码将会被执行。else 条件覆盖了除 if 条件之外的"其他所有情况"。


Else If 条件

多个条件判断可以使用 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>

 

在上面的实例中,如果第一个条件为真,if 块的代码将会被执行。

如果第一个条件不为真且第二个条件为真,else if 块的代码将会被执行。

else if 条件的数量不受限制。

如果 if 和 else if 条件都不为真,最后的 else 块(不带条件)覆盖了"其他所有情况"。


Switch 条件

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>

 

测试值(day)是写在括号中。每个单独的测试条件都有一个以分号结束的 case 值和以 break 语句结束的任意数量的代码行。如果测试值与 case 值相匹配,相应的代码行被执行。

switch 块有一个默认的情况(default:),当所有的指定的情况都不匹配时,它覆盖了"其他所有情况"。