Razor 語法入門 -1

Razor 是 .NET MVC 中在 View 中使用的模板語法。

在 .NET MVC 的 Views 這裡，有 .NET 自己的樣板引擎 Razor
(其實和 Laravel 的 Blade 語法很像 )

這裡列出常見寫法
在.Net 的 cshtml 裡撰寫 Razor 語法：

1.常見的@

在Razor語法內，我們會常常用到@符號，要記得@和後面接續的詞彙不能有空白(空格)，例如：

@ViewBag

和

@ ViewBag

後者有空白會報錯。

又例如：

@model

和

@ model

後者有空白會報錯。

在網頁呈現的文字中，真的想用 @ 符號怎麼辦？例如 HTML頁面要呈現 @ 符號

<h1>@</h1>

這樣頁面渲染會報錯，要改成這樣：

<h1>@@</h1>

才會正常的渲染出一個 @ 符號出來。

那如果是信箱呢？

<h1>test@gmail.com</h1>

Razor 會自己判斷信箱，所以不用特地寫兩個 @

又例如在 Razor 內寫 CSS 行內樣式

@media (max-width: 600px) {
    .myWidth {
        max-width:400px;
    }
}

這個時候像這種有用到@的CSS語法會無法正常使用

也是要使用兩個 @ 才可以，要改寫成這樣：

@@media (max-width: 600px) {
    .myWidth {
        max-width:400px;
    }
}

2.撰寫後端語法

.cs 的語法要呈現在 Razor 內，記得要用

@{  }

把程式碼框起來

3.可以用變數填進 HTML 標籤屬性內

就像前端 Vue、React 或者後端 PHP 一樣，我們可以把程式的變數或其屬性之類的值塞給 HTML 標籤屬性當值。

例如我取得後端傳給我的 @model 資料，我 Razor 內的 HTML 可以這樣寫

<img src="@model.myImg" />

或者

<a href="@model.link" />

幾乎所有 HTML 標籤都可以這樣塞值進去

4.運算邏輯可以寫在HTML內

    <ul class="banner__wrap">
        @{int i = 1;}
        @foreach (var item in Model.Product.Items)
        {
            string imgPath = "../Resource/img201703/pot-exchange/pt_0"  + i + ".png";
            string couponClass = item.ExchangeStatus ? "coupon__btn" :  "coupon__btn n-btn--disabled";
            string couponText = item.ProductsStatus ? "領取<br />折價券" : "兌換完畢";
            <li class="banner__item">
                @if(!item.ProductsStatus)  {<text><div  class="n-sp-sold__out"><div class="n-sp-sold__txt"><span>搶購一空</span></div></div></text>}
                <a href="@item.PageLink"><img src=@imgPath  alt="banner"></a>
                 @if(item.ProductsStatus)  {<text><a  href="@item.PageLink" class="order__btn"><span class="word">立即換購</span></a></text>}
            </li>
            i++;
        }
    </ul>

例如以上 cshtml 段落，紅字是 Razor 語法，foreach 邏輯混在 HTML code 裡面，要注意的是 這裡的 foreach 與變數宣告並不是 JavaScript 寫法，而是 C# 寫法。