[2020鐵人賽] Day14 - 使用Razor語法 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 14

Modern Web

打net core肉飯系列第 14 篇

[2020鐵人賽] Day14 - 使用Razor語法

12th鐵人賽

Scott Hsing

團隊404 Not Found

2020-09-29 23:40:46

4916 瀏覽

本章主要深入來介紹Razor語法，這在cshtml檔案中是相當重要而且非常好用，想在前端使用後端語法完全靠他!

Razor
寫在View(cshtml)頁面，主要有下列幾種表示法

Razor Code Expression
- 以@為起始，告訴將要開始撰寫
- 屬於Server Code

@請開始寫

Razor Code Block
- 如何包含一個區塊的Razor語法?

@{

}

那Code Block內還可以寫文字顯示出來嗎?

 @{
     @:我是文字
     <text>我也是文字</text>
 }

那cshtml要如何顯示@(小老鼠)符號?

@@

Comment
- 編譯之後看不到，如下例子

<!--我是註解，編譯之後F12看的到-->

@*我是註解，編譯之後F12看不到*@

還可以寫甚麼?
- 後端語法都可以，class也可以!

@functions{
    public class Test{
        public string TestStr{get;set;}
        public string TestMethod(){
            return "Hello!";
        }
    }
}

@Html.Raw
在Razor中是十分重要的語法，簡單來說，就是告訴瀏覽器，我是html，而不是文字，看看以下範例，想想會不會跳alert訊息呢?

    @{
        string s = "<script>alert(123)</script>";
    }
    @s

答案是不會，只會印出文字alert(123)
必須要寫成Html.Raw才會被視為前端語法

    @{
        string s = "<script>alert(123)</script>";
    }
    @Html.Raw(s)

有了基本概念後，我們來看看以下範例:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <h1>Home</h1>
    @{
        int i = 77; //c#
        <h3>Hello @i</h3> //tag
        @:Coding!
        <text>
            滷肉飯
        </text>
    }

    @i
    @(i + 100)

    <hr />
    @{
        string s = "<script>alert(123)</script>";
    }
    @s

    @*@Html.Raw(s)*@

    <hr />
    @{
        //local函式
        string SayHi() => "Hi";
    }

    @functions{
        //類別
        public DateTime GetDate() => DateTime.Now;

        public class Book
        {
            public string Title { get; set; }
        }

        public Book GetBook() => new Book { Title = "MVC" };
    }

    @SayHi()
    @ViewBag.Message
    @GetDate()
    @GetBook().Title

    <hr>
</body>
</html>

結果: