iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 6
0
Modern Web

從Asp.Net MVC5的起跑點認識現代網站系列 第 6

Day6_Razor語法初探

Asp.NET MVC支援Razor語法,它可以再View中混用C#語法跟HTML,所以會發現View檔案的副檔名都是.cshtml,那這個語法的好處是可以優化HTML裡面Binding資料,在Html語法中,就可以有很清楚的架構,而不會像原本麵條式的打法。

Razor 基本知識

  • Razor的開頭是以「@」符號當伺服端的資料的依據。eg:@變數名稱
  • @()陳述式
  • @{}程式碼區塊
  • @: 在程式碼區塊中如果需要顯示某些段字串
  • 方法也可以在@{}之中顯示字串
@{
    string Name = "Harry";
    string name = "Winnie";
}
<h3>@name@Name</h3>
<h3>@(Name)先生</h3>
@(5*25)
@for(int i=1; i< 10; i++)
{
    if (i%2==0)
    {
        @:偶數:@i
        <text>文字區塊</text>
    }
}

如上面簡單的測試,@{}裡面宣告了Name與name兩個字串,在Razor裡面是有分大小寫,所以@name@Name會顯示的結果是「WinnieHarry」

View中顯示@

那我們只需要多加一個@,即可顯示出@符號。

  • @@Name 顯示=> @Name
  • Harry@gmail 顯示 => Harry@gmail
    @非常的智能在Email上它可以自行判定那是信箱而不去阻擋它變成字串

Layout主版頁面

Razor的頁面執行順序預設會先載入 ViewStart.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

然後會執行這段程式,意思是預設套這Layout,而執行順序是在ViewStart載入後,再執行Action指定的View,最後載入Layout頁面。

__ViewStart.cshtml的特性

  • 比原本要執行的View(eg.Index)先執行
  • 每層Views底下的目錄都可以有個ViewStart,執行順序會從根目錄的ViewStart開始執行再往下一層執行(如:/Views/Home/__ViewStart),最後才執行原本該有的View頁面

__Layout.cshtml

在檔案裡面可以看到幾個常用的@用法

  1. @Styles.Render("~/Content/css") 引用CSS檔,路徑輸入在BundleConfig自己設定的路徑
  2. @Scripts.Render("~/bundles/modernizr") 引用JS檔
  3. @RenderBody() 將Index.cshtml插入Layout的html的位置。

下一篇會介紹Razor的進階用法。


上一篇
Day5_快速開發所帶來的好處與設計思維
下一篇
Day7_Razor進階之表單欄位
系列文
從Asp.Net MVC5的起跑點認識現代網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言