使用 Razor 生成 HTML5 中的 data- 属性
在 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- 属性的更多相关文章
- HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)
因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...
- 小强的HTML5移动开发之路(13)——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- Vue组件中的data属性
Vue中的data属性专门用来以对象方式存放数据,它有两种用法. var vm=new Vue({ data:{a:1,b:2,}, }) var vm=new Vue({ data(){return ...
- html5中的全局属性
在html5中,新增了一个"全局属性"的概念,所谓全局属性,是指可以对任何属性都使用的属性.下面列出常用的全局属性. 1.contentEditable属性,是微软开发的,该属性主 ...
- HTML5中class选择器属性的解释
设置有class属性值的元素,可以被css中的选择器调用,也可以在javascript中以getElementsByClassName()方法调用. 可以给各个元素添加class而且名称可以相同与id ...
- 测试开发之前端——No4.HTML5中的事件属性
HTML5的事件属性. 属性 值 描述 onafterprint script 在打印文档之后运行脚本 onbeforeprint script 在文档打印之前运行脚本 onbeforeonload ...
- 测试开发之前端——No3.HTML5中的标准属性
HTML5的标准属性 属性 值 描述 accesskey character 规定访问元素的键盘快捷键 class classname 规定元素的类名(用于规定样式表中的类). contentedit ...
- Vue2 实例中的 data 属性三种写法与作用:
<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app ...
- 辛星浅析html5中的role属性
我们使用role属性告诉辅助设备.这个元素所扮演的角色.比方点击的按钮,我们通常就使用role="button",会让这个元素可点击. 可是它很多其它的是用来增强语义性,当现有的h ...
随机推荐
- Android 打包签名 从生成keystore到完成签名 -- 转
首先,我们需要一个keystore,当然已经有了的话就不用这一步了:cmd下:进入到jdk的bin目录,这样的话,android.keystore文件就会生成在这个目录下,签名的时候我们需要这个文件C ...
- Android启动画面实现
每个Android应用程序启动之后都会出现一个Splash启动界面,显示产品LOGO.公司LOGO或者开发者信息.如果应用程序启动时间比较长,那么启动界面就是一个很好的东西,可以让用户耐心等待这段枯燥 ...
- ARM与x86之3--蝶变ARM
http://blog.sina.com.cn/s/blog_6472c4cc0100lqr8.html 蝶变ARM 1929年开始的经济大萧条,改变了世界格局.前苏联的风景独好,使得相当多的人选择了 ...
- MySQL指定mysqld启动时所加载的配置文件
mysqld.exe --init-file=file_name 以下为配置文件参数优化和中文详解: [client]port = 3306socket = /tmp/mysql.sock [mysq ...
- 8张图带你深入理解Java
1.字符串的不变性 下图展示了如下的代码运行过程: String s = "abcd";s = s.concat("ef"); 备注:String refe ...
- bzoj3319: 黑白树
Description 给定一棵树,边的颜色为黑或白,初始时全部为白色.维护两个操作:1.查询u到根路径上的第一条黑色边的标号.2.将u到v 路径上的所有边的颜色设为黑色.Notice:这棵树的 ...
- js中RGB转hex
科普下颜色代码 RGB格式:220,20,60(三个数字组成) HEX格式:#DC143C 代码如下 var rgb = '220,20,60'; alert(rgb2hex(rgb)); //将RG ...
- Expecting "jsp:param" standard action with "name" and "value" attributes错误
错误信息如下: Servlet.service() for servlet [jsp] in context with path [/20161017] threw exception [/tag/s ...
- Linux的软连接与硬链接
Linux的软连接相当于window系统的快捷方式,如我们桌面的QQ等. 硬连接相当于复制一个文件,但不同的是两个文件内容同步.如创建一个文件A的硬连接B, 如果我修改A里面的内容,同时B中的内容也会 ...
- (C#) What is the difference between "const" and "static readonly" ?
const int a must be initialized initialization must be at compile time readonly int a can use defaul ...