2012年11月21日 星期三

MVC 4 標籤中加入 Html 5 的 data-* Attribute方法

在設計jQuery Mobile網站時,經常需要替Html標籤加上Html 5的 data-* Attribute
如 按鈕:
<a href="index.html" data-role="button">mybutton</a>
這種Attribute MVC可不會自動幫你建立,必須要自己加!


以下以產生超連結標籤為例子 , 方式有兩種:

方法一 :

此方法使用匿名型別來宣告
不能直接使用 data-* 的 Attribute註冊,必須要將 "-" 改為 "_"
用這種偷雞的方法就可以搞定了.程式碼如下:

@Html.ActionLink(文字, Action, Controller, [routeValues],
new { data_icon = "arrow-l", data_rel = "back" })

方法二:

就是好想光明正大的使用怎辦?
那就不要使用上面的方法,改用Dictionary<Tkey,TObject>來處理,
程式碼如下:

@Html.ActionLink(文字, Action, Controller, [routeValues],
new Dictionary<string,Object> {{"data-role","button"},  {"data-icon","grid"}})

沒有留言:

張貼留言