razor

时间 2019-12-09

标签 razor 繁體版

原文原文链接

1.Razor简介

Razor 是一种容许您向网页中嵌入基于服务器的代码（Visual Basic 和 C#）的标记语法。当网页被写入浏览器时，基于服务器的代码可以建立动态内容。在网页加载时，服务器在向浏览器返回页面以前，会执行页面内的基于服务器代码。因为是在服务器上运行，这种代码能执行复杂的任务，好比访问数据库。Razor 基于 ASP.NET，它为 web 应用程序的建立而设计。它拥有传统 ASP.NET 标记的能力。Razor 网页可被描述为带有两种内容的 HTML 页面：HTML 内容和 Razor 代码。html

2.语法

C# 的主要 Razor 语法规则:
Razor 代码封装于 @{ ... } 中;
行内表达式（变量和函数）以 @ 开头;
代码语句以分号结尾;
字符串由引号包围;
C# 代码对大小写敏感;
C# 文件的扩展名是 .cshtmlweb

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

C#实例：数据库

<!-- 单行代码块 -->
@{ var myMessage =    "Hello World"; }

<!-- 行内表达式或变量 -->
<p>The value of myMessage is: @myMessage</p> 

<!-- 多行语句代码块 -->
@{
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>

3.与对象打交道

"Date" 对象是典型的 ASP.NET 内建对象，可是也能够自行定义对象，一张网页，一个文本框，一个文件，或者一条数据库记录，等等。浏览器

Name	Value
Day	@DateTime.Now.Day
Hour	@DateTime.Now.Hour
Minute	@DateTime.Now.Minute
Second	@DateTime.Now.Second

4.变量

变量名必须以字母字符开头，不能包含空格和保留字符。
使用 var 关键词或类型对变量进行声明，不过 ASP.NET 一般可以自动肯定数据的类型。服务器

// 使用 var 关键词：
var greeting = "Welcome to W3School";
var counter = 103;
var today = DateTime.Today;

// 使用 data 类型：
string greeting = "Welcome to W3School";
int counter = 103;
DateTime today = DateTime.Today;

数据类型：函数

类型        描述             实例
int        整数           103, 12, 5168
float      浮点数         3.14, 3.4e38
decimal    小数           1037.196543
bool       逻辑值         true, false
string     字符串值       "Hello W3School", "Bill"

转换数据类型：post

As系列扩展方法和Is系列扩展方法测试

AsInt(), IsInt()
AsBool(),IsBool()
AsFloat(),IsFloat()
AsDecimal(),IsDecimal()
AsDateTime(),IsDateTime()
ToString()

@{
    var i = "10";
}
<p> i = @i.AsInt() </p> <!-- 输出 i = 10 -->

5.读取用户输入

由 Request[] 函数读取输入，并由 IsPost 条件进行测试：this

@{
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>

6.If,else if和else

@{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>

demo：spa

@if (Model != null)
    {
         if (Order>=10)
           {
                if (Order.name)
                {
                    <div class="info">
                        @for (int i = 0; i < count; i++)
                          {
                             <div class="info_01">
                                 @if (count != 1)
                                    {
                                        <span class="air_span">购买人@(i + 1)：</span>
                                    }
                                 else
                                    {
                                        <span class="air_span">购买人：</span>
                                    }
                             </div>
                          }
                    </div>
                }
            }
         else if (Order>5&&Order<10) 
           {
               <li>
                    <span class="price">&yen;@Order.price</span>
               </li>
           }
         else 
          {
              ...
          }         
  }

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

8.循环

for循环：

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

forEach循环：

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

while循环：

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

9.用@明确表示内容的起始

<h2>lists</h2>
<ul>
@foreach(var p in lists){
    <li>
        @p.listName

        @if(p.listCount == 0){
            @:(no Left!)
        }
    </li>
}
</ul>

若是没有将消息 no Left! 嵌套在HTML标签元素内，Razor不能隐式判断@if块中的内容是不是一个内容块的开始。咱们用“@：字符序列”来明确地指出咱们代码段里的这行应被看成是内容块。
若是要输出非html标签和非Razor语句的代码，则用@:，他的做用是至关于在处于html下面编写同样了，如在@：后面能够加上@就是表示Razor语句的变量:

@{
    var str = "abc";
    //下面会输出：this is a mail：dxl0321@qq.com, this is var: abc,this is mail@str,this is @；
    @: this is a mail：dxl0321@qq.com, this is var: @str,this is  mail@str,this is @@；
    //下面输出abc
    @str
}

10.Razor做用块注释

razor做用块里面自己就是服务器代码了，所以可以使用服务器代码的注释，注释有 // 和 /*/ 分别是单行注释和多行注释。另外razor注释还可使用自身特有的@ 注释的内容 *@，支持单行和多行的。

@{
   @*
       多行注释
       多行注释
   *@
   var i = 10;  @* asdfasf *@
}