1 Code Expressions 代碼表達式
@表達式 or @(Expressions )
例如1： <h1>Listing @stuff.Length items.</h1
Razor peeks at the next character and sees an angle bracket, which isn’t a valid identifier and transitions back into markup mode
例如2：
@{
string rootNamespace = "MyApp";
}
<span>@rootNamespace.Models</span>
What hope to output was ：
<span>MyApp.Models</span>
必須這樣寫：<span>@(rootNamespace).Models</span> ，通過括號來標記語法結束。
example 3:
How to show an e-mail address:
<span>support@megacorp.com</span> Razor 語法能智能識別 一個 正確的e-mail 地址
但是像微博這種，@名字 ，則需要轉義輸出：
<p>
You should follow
@haacked, @jongalloway, @bradwilson, @odetocode
</p>
You can do so by using @@ sing ,just like that:
<p>
You should follow
@@haacked, @@jongalloway, @@bradwilson, @@odetocode
</p>
2 HTML Encoding
為了跨站點的腳本攻擊，Razor 語法會直接將腳本代碼編碼輸出。
@{
string message = "<script>alert('haacked!');</script>";
}
<span>@message</span>
輸出：
<span><script>alert('haacked!');</script></span>
此條實際測試時（chrome版本 37.0.2062.120 m，IE11）均顯示為： <span><script>alert('haacked!');</script></span>
如果需要原樣輸出 代碼文本 需要使用 @Html.Raw()：
@{
string message = "<strong>This is bold!</strong>";
}
<span>@Html.Raw(message)</span>
輸出：
<span><strong>This is bold!</strong></span>
實際測試： 顯示為：This is bold! 當作html標記執行了！！！
如果 message ="<script>alert('haacked!');</script>"; 那么
<span>@Html.Raw(message)</span> 會彈出一個 haacked! 對話框，執行js腳本！
可以在 Jquery 語法中使用 Razor語法：
<script type="text/javascript">
$(function () {
var message = 'Hello @ViewBag.Title';
$("#message").html(message).show('slow');
});
</script>
結果： Hello My Sample title
可以使用 @Ajax.JavaScriptStringEncode(string value) 對 字符內容進行編碼
3 Code Block 代碼塊
@{ } 代碼塊
例如：
@{
string s = "One line of code.";
ViewBag.Title "Another line of code";
}
@foreach(){} ， @while() {} ;@for(){} 循環代碼塊
@if(){} ; 條件塊
@* *@ 注釋塊
例如：
@foreach (Mvc4App.Models.LoginModel login in ViewBag.LoginModels)
{
UserName:<li>@login.UserName</li>
}
4 Layouts
用來呈現布局設計。@RenderBody()
例如： 主布局：SiteLayout.cshtml 文件
| <!DOCTYPE html> |
使用布局文件 index.cshtml
@{
Layout = "~/Views/Shared/SiteLayout.cshtml";
View.Title = "The Index!";
}
<p>This is the main content!</p>
---------------------------------------------
呈現 布局段 @RenderSection()
<!DOCTYPE html>
<html>
<head><title>@ViewBag.Title</title></head>
<body>
<h1>@ViewBag.Title</h1>
<div id="main-content">@RenderBody()</div>
<footer>@RenderSection("Footer")</footer>
</body>
</html>
更新index.cshtml
@{
Layout = "~/Views/Shared/SiteLayout.cshtml";
View.Title = "The Index!";
}
<p>This is the main content!</p>
@section Footer {
This is the <strong>footer</strong>.
}
-------------------------------------------------------
如果有些需要呈現，有些不需要，可以使用RenderSection 的重載方法：
<footer>@RenderSection("Footer", required: false)</footer>
還可以判斷段是否存在
<footer>
@if (IsSectionDefined("Footer")) {
RenderSection("Footer");
}
else {
<span>This is the default footer.</span>
}
</footer>
------------------------------------------------------------
5 分布視圖 partial view
在HomeControl 中添加Action
public ActionResult Partial()
{
ViewBag.Part = "this is partial view";
return PartialView();
}
右鍵添加視圖partial.cshtml，分布視圖不能使用Layout 屬性。
<div>
<p>Hello @ViewBag.Part</p>
</div>
分布視圖與一般視圖可以一樣的方式瀏覽 http://localhost:46918/home/partial
分布視圖可以同Ajax 配合，直接加載：
<input type="button" value="click me to load partial view" onclick="loadPartil()" />
<div id="result"></div>
<script type="text/javascript">
function loadPartil() {
$('#result').load('/home/partial');
}
</script>