通數據圖標剃刀HTML輔助屬性

我想使用asp.net MVC 3剃鬚刀的HTML幫助下面的HTML代碼：通數據圖標剃刀HTML輔助屬性

<input type="text" .... . placeholder="Login" data-icon="user" />

我試試這個：

@Html.TextBoxFor(m => m.UserName, new { placeholder = "Login", data-icon = "user" })

或

@Html.TextBoxFor(m => m.UserName, new { placeholder = "Login", @data-icon = "user" })

顯示錯誤：

Invalid anonymous type members declaration.

這可能是由於數據圖標中的短劃線不作爲屬性。我怎樣才能在文本框字段中添加數據圖標屬性。

來源

2012-07-22 CodeManiac

是的，你不能這樣寫，但你可以編寫自己的擴展來解決這個問題。下面是示例代碼：

public static MvcHtmlString MyInput(this HtmlHelper htmlHelper, string name, string value, string icon) 
    { 
     var attrs = new Dictionary<string,object>(); 
     attrs.Add("data-icon", icon); 
     return htmlHelper.TextBox(name, name, value, attrs); 
    }

或者你也可以在剃鬚刀使用這樣的：

@{ 
    var attrs = new Dictionary<string, object>(); 
    attrs.Add("placeholder","Login"); 
    attrs.Add("data-icon","user"); 
} 
@Html.TextBoxFor(m => m.UserName, attrs)

PLZ不要忘記，以紀念它是正確的答案，如果它可以幫助你:-)

來源

2012-07-23 04:33:06 vNext

非常感謝我在谷歌搜索很長時間找不到。最後我得到了它。非常感謝你是生命的救星 – CodeManiac 2012-07-23 05:32:04

這是真的一樣vNext的第二選擇，但如果你喜歡把它寫在行：

@Html.TextBoxFor(m => m.UserName, new Dictionary<string, object> { { "placeholder", "Login" }, { "data-icon", "user" } })

來源

2012-10-30 13:20:42 Carl

試試這個

@Html.TextBoxFor(m => m.UserName, new { placeholder = "Login", data_icon = "user" })

來源

2013-03-13 08:57:18 Imran

這個。這對我來說並不是顯而易見的，但經過一些測試後，下劃線變成了破折號。在我的情況下，data_placeholder被轉換爲數據佔位符。 Un（der）記錄功能FTW！ – JasonCoder 2013-08-05 13:49:56

對我而言，這似乎是有意和正確的解決方案。非常感謝。 – 2016-02-15 07:05:57

通數據圖標剃刀HTML輔助屬性

回答

相關問題