美文网首页.NET圈dotNETC#
ASP.NET Razor 简介

ASP.NET Razor 简介

作者: Jason_Yuan | 来源:发表于2015-06-16 11:41 被阅读559次

    目录###

    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)
    <!-- Inline expressions -->
    <p>You are using @Request.Broswer.Broswer!</p>
    
    <!-- Single statement blocks  -->
    @{ ViewBag.title = "Home Page"; }
    @{ var myMessage = "Hello World"; }
    
    <!-- Multi-statement block -->
    @{
        var name = "Jason";
        var greeting = "Nice to meet you, ";
        var greetingMessage = greeting + name;
    }
    <p>The greeting is: @greetingMessage</p>
    
    ② 代码块括在大括号中,代码语句用分号结束
    ③ 使用 var 关键字,声明变量存储值
    <!-- Storing a string -->
    @{ var welcomeMessage = "Welcome, new members!"; }
    <p>@welcomeMessage</p>
    
    <!-- Storing a date -->
    @{ 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";
        }
        <span style="color:@color">@String.Format("{0:c}", amount)</span>
    }
    

    然后可以在其他地方使用helper方法,比如:

    @{var amounts = new List<decimal> {100, 25.50m, -40, 276.99m}
    }
    
    <ul>
        @foreach(decimal amount in amounts)
        {
            <li>@formatAmount(amount)</li>
        }
    </ul>
    
    @{}中的内容都会被视为C#代码
    • 如果想要添加纯文本,两种方法
    @ {
          //方法1
          <text>djskfadsfhadsjfk</text>
          //方法2
          @: fhdshfjskhfksfs
    }
    
    • 输出@符号
    @ { <p>Have a good weekend @@LA</p> }
    //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; }
    <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>
    
    • Switch 语句
    @ { var day = "Monday"; }
    <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;
    }
    
    • For 循环
    <!-- 方式1 -->
    @for (int i = 0; i < 10; i++)
    {
        @:@i
    }
    <!-- 方式2 -->
    @{
        for (int i = 0; i < 10; i++)
        {
            //do something
        }
    }
    
    • While 循环
    <body>
    @{
        var i = 0;
        while (i < 5)
        {
            i += 1;
            <p>Output is: @i</p>
       }
    }
    </body>
    
    • Foreach 循环
    //定义一个数组
    @{var amounts = new List<decimal> {100, 25.50m, -40, 276.99m}
    }
    //使用foreach遍历数组
    <ul>
        @foreach(decimal amount in amounts)
        {
            <li>@amount</li>
        }
    </ul>
    

    4. ASP.NET MVC 中Razor布局

    Views folder
    • 在_ViewStart.cshtml中, 可以定义所有view的默认layout模板
    @{
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    • _Layout.cshtml即模板页,起到页面整体框架重用的目的
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title> 
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        @Html.Partial("_header")
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                    @Html.Partial("_LoginPartial")
                </div>
            </div>
        </div>
        <div class="container body-content">
            <div class="row">
                <div class="col-md-12">
                    <img src="~/Content/Images/logo.png" class="img-responsive item-center"/>
                </div>
            </div>
            @RenderBody()
        </div>
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
        @Html.Partial("_footer")
    </body>
    </html>
    
    • @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

    相关文章

      网友评论

        本文标题:ASP.NET Razor 简介

        本文链接:https://www.haomeiwen.com/subject/mkbrqttx.html