ASP.NET MVC第005天_Razor語法筆記(一)

- 11月 24, 2020

通常在cshtml view 檢視的前端畫面中看到

@ at sign

就是Razor語法了

其跟以前在寫 asp.net webform中介紹到的

ASP.NET 學習5_資料綁定的方式

還有Active Server Page中<% .... %>

是類似的概念

用於把Server Side中的C#一些程式內嵌到html中的一種語法(Markup Syntax)

前端通過後端進行一些邏輯處裡資料綁定

Razor是一種語法而非語言

因為內在包括的是既有的html , C#(並非支援全部的C#指令)

都不算Razor本身獨有的變數、判斷式、Tag

由於Razor語法只能用於副檔名cshtml的View

所以.NET View也有Razor View(Page)之稱

註解

@*我是註解或欲註解掉內容*@

@符號輸出

正常情境中若是類似像mail格式夾在兩字串(不含html tag)之間沒關係

單一個印印出時候

只打<h1>@</h1>

或直接@

會有問題

因為@對於Razor有特別含意所以不能直接挪用

@一句C#陳述式

表示單行程式敘述宣告

比如<p>目前時間:@DateTime.Now</p>

@變數名稱

可以打印C#變數

@(陳述式 )

可包一組C#運算式

@{....}多行程式敘述宣告

一段Server Side程式可能夾雜html前端code

}

複合夾雜後端邏輯跟前端程式的實際範例

@if(IsUploaded){

<p>上傳時間: @dateTime</p>

}else{
<p>目前時間: @DateTime.Now</p>

}

@foreach迴圈

<ul>

@foreach(var servItem in Request.ServerVariables){

<li>@servItem</li>}

</ul>

若一段Razor 語法包起來的內容要用一班文字輸出則可以加至於前

範例:


@{
    Layout = null;

    var name = "Jack";
    var num = 5;

}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        <h1>Home View</h1>

        @*我是註解或欲註解掉內容*@
        @*<h1>ID = @ViewBag.reqID </h1>*@

        @*我是第一串文字
        我是第二串文字*@
        <h1>abc@gmail.com</h1>
        abc@gmail.com

        <h1>@@</h1>
        @@

        <br />
        @DateTime.Now.ToString("yyyy/MM/dd HH:MM:ss")
        <br />
        @name
        <br>
        @num
        <br />
        @(8*5)
        @( "This is " + " a book." )


        @{
            // Loop over numbers and display them.
            for (int i = 0; i < 5; i++)
            {
                <b>Number: @i</b><br />
                if (i == 3)
                {
                    <b style="color:red">Three</b><br />
                    //this is 3
                    @:this is 3
                    <br />
                }
            }
        }


    </div>
</body>
</html>