ASP.NET MVC Html.ActionLink with data-icon問題

data-icon actionlink

leo226 2019-12-23 11:20:07 ‧ 1371 瀏覽

分享至

請問各位大師：
　　參考網頁設計範例有一些元素為data-role，data-icon

  <header data-role="header">
    <a href="#" data-icon="home">主頁</a>
    <h1>指定網頁的佈景主題</h1>
    <a href="#" data-icon="refresh" data-iconpos="right">更新</a>
  </header>
    <div data-role="controlgroup">
      <a href="index.html" data-role="button" data-icon="home">主頁</a>
      <a href="index.html" data-role="button" data-icon="search">搜尋</a>
      <a href="index.html" data-role="button" data-icon="refresh">更新</a>
    </div>

當我們使用的連結是用＠Html.ActionLink

@Html.ActionLink("回上一頁", "GetEditorTrackList", "Editor", new { area = "Users" }, new { @class = "btn btn-primary" })

請問在＠Html.ActionLink裡是否可以添加入data-role，data-icon這些元素呢？
如果可以，那語法該如何寫呢？謝謝～

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

小魚

iT邦大師 1 級 ‧ 2019-12-23 11:30:58

你想要做什麼?

回應 1
分享
檢舉

leo226 iT邦新手 4 級 ‧ 2019-12-23 16:14:18 檢舉

看RWD的網頁設計，想要套用一些美編效果進來原本的網頁，其中有些效果都是加上data-role="button" data-icon="home"來套用，但ASP.NET通常都是非純HTML來撰寫，常常遇到語法不知道該如何結合的問題。
例如以下摺疊的效果之類的

<section data-role="page"> 
  <div data-role="content"> 		
    <div data-role="collapsible-set">
      <div data-role="collapsible" data-collapsed="false">
        <h3>x</h3>
        <p>xxxxxxxxxxxxx。</p>
      </div>
      <div data-role="collapsible">
        <h3>s</h3>
        <p>ssssssssss。</p>
      </div>
      <div data-role="collapsible">
        <h3>v</h3>
        <p>vvvvvvvvvv。</p>
      </div>
    </div>
  </div>
</section>

不過發現原本的網頁套用jQuery或CSS版本與想要套用的效果版本有差異的話，附掛上去會有問題，不相容～
如果引用範本提供的jQuery與CSS，那原本的網頁排版就會走鐘

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

如果不引用，那效果也無法順利套用，實在是兩難呀～

登入發表回應

dragonH

iT邦超人 5 級 ‧ 2019-12-23 11:51:00

.netfiddle

@Html.ActionLink("回上一頁", "GetEditorTrackList", "Editor", new { area = "Users" }, new { @class = "btn btn-primary", data_role = "button", data_icon = "icon" })

參考

選我正解