iT邦幫忙

DAY 17
3

在錯誤中學習ASP.NET MVC系列 第 17

認識View - Helper

Helper的使用在剛學習Razor時真的覺得很難適應,不過知道怎麼用之後就習慣了,有些Helper的用途比較像是呼叫某些屬性或方法後自動幫產生HTML,可以使用MVC內建Helper,也可以自己寫,接下來就介紹平常使用率最高的HTMLHelper,另外常用的有UrlHelper與AjaxHelper。

以下列出我平常比較會用到的方法:

透過預設範本的Views/Account/Login.cshtml來觀察這些方法是如何使用的

@Html.BeginForm()

產生<form>,這邊初學的時候真的覺得非常難用,因為不知道怎麼設定form裡面的Attribute,例如要改使用Get傳遞參數,就整個攤手了

此時我們就必須養成愛用多載提示的功能,不然誰知道參數要怎麼設定阿,所以請打左括號後會出現如下圖的提示,這邊總有用13個多載方法,找到第5個發現它有一個FormMethod型別的參數,就決定用它了,不過用它的代價是要多打action跟controller名稱XD

改寫成這樣

@Html.BeginForm("Login","Account",FormMethod.Get,new { ReturnUrl = ViewBag.ReturnUrl })

使用@Html.BeginForm()預設使用Post傳遞變數,並且將表單傳送到與檢視同名的Action

其中14行的**@AntiForgeryToken**要搭配Action設定,這樣在登入畫面時會產生一個隱藏的input值,預防跨網站攻擊

輸出<input>

這邊有很多方法讓我們可以方便產生表單需要的欄位,使用方式都差不多,選一個來講究襖了,其中有For結尾的方法是要搭配Model來當成強型別使用,,因為Model還沒講嘛!所以之後再補充。

@Html.TextBox()

再講一次,一定要好好善用多載方法的提示,不然要寫到不用看就知道要傳什麼應該要很久的時間XD

如果今天想要產生一個這樣的HTML

<input class="red" id="price" name="price" type="text" value="500">

使用@Html.TextBox()多載中第3個方法,因為class是關鍵字,所以最前面要多加@

@Html.TextBox("price","500",new{@class="red"})

想當初我根本不知道怎麼看多載,會知道怎麼寫其實也就是在google上找範例亂改,改到可以動為止,真的非常浪費時間,而且還跟強者同事抱怨說Helper好難用根本不知道怎麼設定,其實會用之後真的超好用的,自從學會看多載方法之後,就有種自己好像變厲害的錯覺XD

@Html.Action()

剛好範本裡面也有使用到,可以好好觀察一下使用方式

在Account/Login登入畫面時會去將Account/ExternalLoginsList的執行結果(也就是檢視啦)整個塞到Login畫面裡,這方法還蠻好用的,例如每個畫面都要根據使用者身分顯示對應表單時,就可以在公用版面裡面使用這個方法,讓某個Action專心去處理後再回傳結果。

@Html.ActionLink()

產生超連結<a>標籤,會使用多載方法後,相信應該很容易知道如何使用了吧![](http://2.bp.blogspot.com/-PVBvr3msJDU/VECJi6LiFNI/AAAAAAAAAiU/NZwsrZj2A9A/s1600/17-11.png" style="line-height: 1.6;)

@Html.Raw()

將HTML字串使用非Html編碼輸出,聽不懂在講什麼吧XD,請看Code

@test的顯示結果竟然是直接顯示<h1>title<h1>這個字串,如果想讓它呈現Html的樣式的話就要使用@Html.Raw(test),因為@Html.Raw()會回傳"傳回不是 HTML 編碼的標記",因為@test會將值encode成HTML編碼,所以HTML會將值當成字串顯示,如果再將@Html.Raw(test) Encode就又變成字串顯示了。

這篇重點主要還是建議大家學會使用多載的提示功能,這樣在學習Razor的時候會有比較好的學習曲線,另外UrlHelper與AjaxHelper的使用方法其實都是異曲同工之妙,未來會再補充說明。


上一篇
認識View - Razor基本語法
下一篇
認識View - 自訂與擴充Helper
系列文
在錯誤中學習ASP.NET MVC30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
Pyan
iT邦研究生 5 級 ‧ 2020-06-22 17:22:04

感謝

0
Floralt 昀翰
iT邦新手 4 級 ‧ 2022-04-06 15:43:00

淺顯易懂的好文
只是我還是不太會看多載

我要留言

立即登入留言