目录

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