zoukankan      html  css  js  c++  java
  • razor

    1.Razor简介

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

    2.语法

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

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

    转换数据类型:

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

    1. AsInt(), IsInt()
    2. AsBool(),IsBool()
    3. AsFloat(),IsFloat()
    4. AsDecimal(),IsDecimal()
    5. AsDateTime(),IsDateTime()
    6. ToString()
    @{
        var i = "10";
    }
    <p> i = @i.AsInt() </p> <!-- 输出 i = 10 --> 
    

    5.读取用户输入

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

    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:

     @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 *@
    }
    
  • 相关阅读:
    react ts axios 配置跨域
    npm run eject“Remove untracked files, stash or commit any changes, and try again.”错误
    java 进程的参数和list的线程安全
    帆软报表 大屏列表跑马灯效果JS
    帆软报表 快速复用数据集,避免重复劳动
    分析云 OA中部门分级思路和实现方法
    分析云 分段器 只显示一个块的数据
    分析云 更改服务默认的端口号
    分析云U8项目配置方法新版本(2)
    Oracle 创建时间维度表并更新是否工作日字段
  • 原文地址:https://www.cnblogs.com/twodog/p/12139560.html
Copyright © 2011-2022 走看看