在 HTML5 中, 可以使用 data- 属性来表示用户数据,这些数据甚至可以是 JSON 格式的数据,对 Web 前端开发带来很大的方便。

在 MVC 的 Razor 中,可以使用匿名对象来生成定制的属性,不过,这样的属性可不能通过 Razor  的语法检查。

new{ data-id=  }

编译器会直接报告错误。  The name 'data' does not exist in the current context   ,原因很简单,把 - 号当作运算符了。
其实,HtmlHelper 提供的方法 AnonymousObjectToHtmlAttributes 已经可以解决这个问题,方法的说明如下所示。

Replaces underscore characters (_) with hyphens (-) in the specified HTML attributes.

我们可以在匿名对象中直接使用下划线 (_) 来代替减号 (-) ,HtmlHelper 会在呈现中,将下划线替换为减号的。

例如,下面的写法

@Html.TextBox("username", "noname", new{ data_name="tom" })

会生成如下的 HTML5 标记。

<input data-name="tom" id="username" name="username" type="text" value="noname" />

使用 Razor 生成 HTML5 中的 data- 属性的更多相关文章

  1. HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)

    因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...

  2. 小强的HTML5移动开发之路(13)——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  3. Vue组件中的data属性

    Vue中的data属性专门用来以对象方式存放数据,它有两种用法. var vm=new Vue({ data:{a:1,b:2,}, }) var vm=new Vue({ data(){return ...

  4. html5中的全局属性

    在html5中,新增了一个"全局属性"的概念,所谓全局属性,是指可以对任何属性都使用的属性.下面列出常用的全局属性. 1.contentEditable属性,是微软开发的,该属性主 ...

  5. HTML5中class选择器属性的解释

    设置有class属性值的元素,可以被css中的选择器调用,也可以在javascript中以getElementsByClassName()方法调用. 可以给各个元素添加class而且名称可以相同与id ...

  6. 测试开发之前端——No4.HTML5中的事件属性

    HTML5的事件属性. 属性 值 描述 onafterprint script 在打印文档之后运行脚本 onbeforeprint script 在文档打印之前运行脚本 onbeforeonload ...

  7. 测试开发之前端——No3.HTML5中的标准属性

    HTML5的标准属性 属性 值 描述 accesskey character 规定访问元素的键盘快捷键 class classname 规定元素的类名(用于规定样式表中的类). contentedit ...

  8. Vue2 实例中的 data 属性三种写法与作用:

    <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app ...

  9. 辛星浅析html5中的role属性

    我们使用role属性告诉辅助设备.这个元素所扮演的角色.比方点击的按钮,我们通常就使用role="button",会让这个元素可点击. 可是它很多其它的是用来增强语义性,当现有的h ...

随机推荐

  1. 【oracle】 linux 下oracle 启动监听错误

    Message 1070 not found; No message file for product=network, facility=TNSTNS-12545: Message 12545 no ...

  2. LintCode "Previous Permutation"

    A reverse version of the Dictionary algorithm :) If you AC-ed "Next Permutation II", copy ...

  3. Redis系统管理相关指令简介

    常用命令列表 DBSIZE                                            返回当前数据库 Key 的数量 INFO                       ...

  4. (三)java的数据类型

    java是一种强类型的语言,所谓强类型,意味着每个变量都要有确定的类型,每个表达式也要有明确的类型,包括传递的某些参数.java中从大的方面分有两大数据类型,分别是基本数据类型和引用数据类型,基本数据 ...

  5. VisualStudio Form文件构成说明

    创建一个窗体Form1.cs 后,在他的下一级,有两个子文件: Form1.Designer.cs 和Form1.resx 这两个子文件 Form1.Designer.cs是VS自动生成用作UI的绘制 ...

  6. ZooKeeper典型应用场景(转)

    ZooKeeper是一个高可用的分布式数据管理与系统协调框架.基于对Paxos算法的实现,使该框架保证了分布式环境中数据的强一致性,也正是基于这样的特性,使得ZooKeeper解决很多分布式问题.网上 ...

  7. 使用BlockingQueue的生产者消费者模式

    BlockingQueue很好的解决了多线程中,如何高效安全“传输”数据的问题.通过这些高效并且线程安全的队列类,为我们快速搭建高质量的多线程程序带来极大的便利.使用场景. 首先它是一个队列,而一个队 ...

  8. 问对于一个给定的n,怎样才能用最少的步骤将它变到1

    如果n为偶数,则将它除以2,如果n为奇数,则将它加1或者减1.问对于一个给定的n,怎样才能用最少的步骤将它变到1.例如:n= 61n-- 60n/2 30n/2 15n++ 16n/2 8n/2 4n ...

  9. c语言知识(2)

    while(n)首先,n在这里被当作了一个条件其次,当n为真时,进入while循环体(A):否则跳出循环继续执行下面部分(B).n为0时条件为假  n不为0条件为真 while(j) { if(j%1 ...

  10. VI下删除所有内容

    让光标在一个位置 , 如果全删就放在问价开始的位置 , 在非编辑的状态下输入dG(注意大小写) , 这样光标之后的所有行都会被删掉