如何在ASP.NET MVC中使用破折号在HTML-5 data-*属性中。

11 浏览
0 Comments

如何在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-\"开头。

我的问题:

  • 有没有办法让Html.ActionLink或类似的Html帮助程序使用HTML5数据属性？
  • 是否有其他可替代的机制来附加自定义数据到元素？这些数据将在后来由JS进行处理。
admin 更改状态以发布 2023年5月20日
0

2 答案

0 Comments

更新：MVC 3及以上版本已经内置了对此的支持。请参考JohnnyO下面的高度赞成的回答，获取推荐的解决方案。

我认为没有直接的助手来实现这一点，但我有两个想法可以尝试：

// 1: pass dictionary instead of anonymous object
<%= Html.ActionLink( "back", "Search",
    new { keyword = Model.Keyword, page = Model.currPage - 1},
    new Dictionary { {"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" ) )%>

只是想法，没有测试过。

0
0 Comments

这个问题已在ASP.Net MVC 3中得到解决。他们现在会自动将html属性属性中的下划线转换为破折号。他们在这个问题上运气很好，因为下划线在html属性中是不合法的，所以MVC可以自信地暗示您在使用下划线时需要一个破折号。

例如：

@Html.TextBoxFor(vm => vm.City, new { data_bind = "foo" })

MVC 3中将呈现如下：

如果您仍在使用较旧的版本的MVC，则可以模仿MVC 3所做的操作，创建此静态方法，我从MVC3的源代码中借来的：

public class Foo {
    public static RouteValueDictionary AnonymousObjectToHtmlAttributes(object htmlAttributes) {
        RouteValueDictionary result = new RouteValueDictionary();
        if (htmlAttributes != null) {
            foreach (System.ComponentModel.PropertyDescriptor property in System.ComponentModel.TypeDescriptor.GetProperties(htmlAttributes)) {
                result.Add(property.Name.Replace('_', '-'), property.GetValue(htmlAttributes));
            }
        }
        return result;
    }
}

然后您可以像这样使用它：

<%: Html.TextBoxFor(vm => vm.City, Foo.AnonymousObjectToHtmlAttributes(new { data_bind = "foo" })) %>

这将呈现正确的数据-*属性：

0