如何在ASP.NET MVC中的HTML-5 data- *屬性中使用破折號

我試圖在個人ASP.NET MVC 1項目中使用HTML5數據屬性 。 （我是C＃和ASP.NET MVC的新手。）

<%= Html.ActionLink("« Previous", "Search",
     new { keyword = Model.Keyword, page = Model.currPage - 1},
     new { @class = "prev", data-details = "Some Details"   })%>

上面的htmlAttributes中的「data-details」給出如下錯誤：

CS0746: Invalid anonymous type member declarator. Anonymous type members 
  must be declared with a member assignment, simple name or member access.

它在我使用data_details時有效，但我想它須要按照規範以「data-」開頭。

個人問題：

• 有沒有辦法讓這個工做，並使用HTML5數據屬性與Html.ActionLink或相似的Html助手？
• 是否有其餘替代機制將自定義數據附加到元素？ 此數據稍後將由JS處理。

---

#1樓

它比上面提到的一切都更容易。 MVC中包含破折號（ - ）的數據屬性經過使用下劃線（_）來知足。

<%= Html.ActionLink("« Previous", "Search",
 new { keyword = Model.Keyword, page = Model.currPage - 1},
 new { @class = "prev", data_details = "Some Details"   })%>

我看到JohnnyO已經提到了這一點。

---

#2樓

更新：MVC 3和更新版本內置了對此的支持。 有關推薦的解決方案，請參閱下面的JohnnyO高度評價的答案。

我不認爲有任何直接的幫助來實現這一點，但我有兩個想法讓你嘗試：

// 1: pass dictionary instead of anonymous object
<%= Html.ActionLink( "back", "Search",
    new { keyword = Model.Keyword, page = Model.currPage - 1},
    new Dictionary<string,Object> { {"class","prev"}, {"data-details","yada"} } )%>

// 2: pass custom type decorated with descriptor attributes
public class CustomArgs
{
    public CustomArgs( string className, string dataDetails ) { ... }

    [DisplayName("class")]
    public string Class { get; set; }
    [DisplayName("data-details")]
    public string DataDetails { get; set; }
}

<%= Html.ActionLink( "back", "Search",
    new { keyword = Model.Keyword, page = Model.currPage - 1},
    new CustomArgs( "prev", "yada" ) )%>

只是想法，沒有測試過。

---

#3樓

我最終使用了一個普通的超連接和Url.Action ，如：

<a href='<%= Url.Action("Show", new { controller = "Browse", id = node.Id }) %>'
  data-nodeId='<%= node.Id %>'>
  <%: node.Name %>
</a>

這是更醜陋的，但你對a標籤有了更多的控制權，這在不少AJAXified網站中有時頗有用。

HTH

---

#4樓

你能夠像這樣使用它：

在Mvc：

@Html.TextBoxFor(x=>x.Id,new{@data_val_number="10"});

在Html中：

<input type="text" name="Id" data_val_number="10"/>

---

#5樓

在mvc 4中能夠使用下劃線（「_」）渲染

剃刀：

@Html.ActionLink("Vote", "#", new { id = item.FileId, }, new { @class = "votes", data_fid = item.FileId, data_jid = item.JudgeID, })

呈現的Html

<a class="votes" data-fid="18587" data-jid="9" href="/Home/%23/18587">Vote</a>