Razor語法@的編解碼說明

 

使用Razor語法,任何透過@輸出的內容預設都是經過Html邊編碼過的,

因此不需要特別使用Html.Encode輔助方法,例如:

<script>
    var lastError = '@Html.Raw(Ajax.JavaScriptStringEncode(ViewBag.LastError))';
</script>

由於使用Razor的@語法輸出預設會將輸出結果再一次Html編碼,

所以須要再加上Html.Raw才能正確輸出

 

如果還不是很了解以下舉例為更詳細說明:

一開始先定義一下,一字串從 vz 變成 <p>vz</p><p>vz</p>再變成 &lt;p&gt;vz&lt;/p&gt; 為編碼;

反之,一字串從 &lt;p&gt;vz&lt;/p&gt; 變成 <p>vz</p><p>vz</p> 再變成 vz 稱之為解碼;

 

一般從HTML原始碼變成HTML網頁應可稱之為解碼,

使用Razor語法,任何透過@輸出的內容預設都是經過Html邊編碼過的,

舉例來說明,

1、當後端使用ViewBag.Result="&lt;p&gt;vz&lt;/p&gt;",

於前端輸出使用@ViewBag.Result,則隱含呼叫@Html.Encode轉成字串,網頁秀出的字串為&lt;p&gt;vz&lt;/p&gt;,

2、當後端使用ViewBag.Result="<p>vz</p>",

於前端輸出使用@ViewBag.Result,則隱含呼叫@Html.Encode轉成字串,網頁則秀出的字串為<p>vz</p>,

3、當後端使用ViewBag.Result="<p>vz</p>",

於前端輸出使用@Html.Raw(ViewBag.Result),避開隱含呼叫tml.Encode,直接包裝成mvcHtmlString

,網頁秀出的字串為vz。

 

最後列出一些編碼的關鍵字為

HttpServerUtility.HtmlEncode

Server.HtmlEncode

HttpUtility.HtmlEncode

Html.Encode

Url.Encode

HttpUtility.JavaScriptStringEncode

 

額外一題,假設大家都已知會使用Razor的 if 程式碼區塊,

但要跟HtmlHelper如何配合呢?如下範例,邏輯正確,

但為何「登入」的超連結就是跑不出來?

@if ((string)Session["login"] == "")
{
    Html.ActionLink("登入", "Login");
}
else
{
    <p>已登入</p>
}

則應該改成

@if ((string)Session["login"] == "")
{
    @Html.ActionLink("登入", "Login")
}
else
{
    <p>已登入</p>
}

紅色@if裡面的內容除了可以放程式碼區塊之外,

也可以放Html原始碼,但在跟HtmlHelper配合時,

有人可能會認為「Html.ActionLink("登入", "Login")」應該被視為程式碼,

所以就把黃色@拿掉了,事實上「@Html.ActionLink("登入", "Login")」整組跑出來是Html原始碼,

所以黃色@跟「Html.ActionLink("登入", "Login")」是合在一起不分開的。

 

參考資料:

HttpUtility.HtmlDecode 方法 (String)

.html() .text() .val() 的差別與前端html編解碼

詳細解說幾個建置網站時常用的編碼方法