ASP.NET Razor 简介

---

目录###

1. 什么是Razor
2. Razor C# 基本语法规则
3. 逻辑条件与循环
4. ASP.NET MVC 中 Razor 布局

---

razor

1. 什么是Razor ?

• Razor 不是一种编程语言，而是一种标记语法，可以将基于服务器的代码（Visual Basic 和 C#）嵌入到网页中。
• Razor 是基于 ASP.NET 的，是为创建 Web 应用程序而设计的。
• Razor支持代码混写。
• 带 Razor 语法的 ASP.NET 网页有特殊的文件扩展名cshtml(Razor C#)或者vbhtml(Razor VB)。

---

2. Razor C#基本语法规则

① 使用@将代码块添加到页面中

• 内联表达式(Inline expressions)
• 单语句块(Single statement blocks)
• 多语句块(Multi-statement block)

You are using @Request.Broswer.Broswer!


@{ ViewBag.title = "Home Page"; }
@{ var myMessage = "Hello World"; }


@{
    var name = "Jason";
    var greeting = "Nice to meet you, ";
    var greetingMessage = greeting + name;
}
The greeting is: @greetingMessage

② 代码块括在大括号中，代码语句用分号结束

③ 使用 var 关键字，声明变量存储值

@{ var welcomeMessage = "Welcome, new members!"; }
@welcomeMessage


@{ var year = DateTime.Now.Year; }

④ 字符串要用引号括起来

@{ var myString = "This is just an example"; }

⑤ C#代码是区分大小写

⑥ 空格和换行符不影响语句

• 可以通过增加空格或者换行符提高代码的可读性。
• 但是对于字符串，不可以

@{ var test = "This is a long
    string"; }  // Does not work!

⑦ 内联的helper方法

@helper formatAmount(decimal amount)
{
    var color = "green";
    if (amount < 0)
    {
        color = "red";
    }
    @String.Format("{0:c}", amount)
}

然后可以在其他地方使用helper方法，比如：

@{var amounts = new List {100, 25.50m, -40, 276.99m}
}


    @foreach(decimal amount in amounts)
    {
        
@formatAmount(amount)
    }

⑧ @{}中的内容都会被视为C#代码

• 如果想要添加纯文本，两种方法

@ {
      //方法1
      djskfadsfhadsjfk
      //方法2
      @: fhdshfjskhfksfs
}

• 输出@符号

@ { 
Have a good weekend @@LA
 }
//output: Have a good weekend @LA

⑨ 注释

• 使用@**@

@*  A one-line code comment. *@
@*
    This is a multiline code comment.
    It can continue for any number of lines.
*@  

• 在@{}中使用C#的注释格式

@{
    // This is a comment.
    var myVar = 17;
    /* This is a multi-line comment
    that uses C# commenting syntax. */
}

---

3. 逻辑条件与循环

• If-else, else if 语句

@ { var price = 25; }

@if (price >= 30)
{
    
The price is high.
}
else if (price > 20 && price < 30) 
{
    
The price is OK.
}
else
{
    
The price is low.
} 

• Switch 语句

@ { var day = "Monday"; }

@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;
}

• For 循环

@for (int i = 0; i < 10; i++)
{
    @:@i
}

@{
    for (int i = 0; i < 10; i++)
    {
        //do something
    }
}

• While 循环

@{
    var i = 0;
    while (i < 5)
    {
        i += 1;
        
Output is: @i
   }
}

• Foreach 循环

//定义一个数组
@{var amounts = new List {100, 25.50m, -40, 276.99m}
}
//使用foreach遍历数组

    @foreach(decimal amount in amounts)
    {
        
@amount
    }

---

4. ASP.NET MVC 中Razor布局

Views folder

• 在_ViewStart.cshtml中， 可以定义所有view的默认layout模板

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

• _Layout.cshtml即模板页，起到页面整体框架重用的目的

    
     
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")


    @Html.Partial("_header")
    

        

            

                

                    
@Html.ActionLink("Home", "Index", "Home")
                    
@Html.ActionLink("About", "About", "Home")
                    
@Html.ActionLink("Contact", "Contact", "Home")
                
                @Html.Partial("_LoginPartial")
            
        
    
    

        

            

                
            
        
        @RenderBody()
    
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
    @Html.Partial("_footer")

• @Html.Partial()
  HtmlHelper.Partial()，可以将页头、页脚、登陆等局部视图加载进来
• @RenderBody()
  将对应View页面的主内容替换到此
• @RenderSection()
  将对应View页面的相应的section部分替换到此

---

相关资料

1. Introduction to ASP.NET Web Programming Using the Razor Syntax (C#)
2. C# Razor Syntax Quick Reference