使用 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 ...
随机推荐
- 每日学习心得:Linq解决DataTable按照某一列的值排序问题/DataTable 导出CSV文件/巧用text-overflow解决数据绑定列数据展示过长问题
2013-8-5 1 Linq解决DataTable按照某一列的值排序 在之前的总结中提到过对拼接而成的复合的DataTable按照某一列值的大小排序,那个主要的思想是在新建表结构时将要排序的那一列的 ...
- ShopEX 4.8.5.81822 前台Getshell
ShopEX 4.8.5.81822 前台Getshell 作者:unhonker 发布:2014-06-23 00:12 分类:漏洞公布 被撸:8,179次 抢沙发 利用方式 ...
- 剑指offer系列47---翻转单词顺序
[题目]输入“I am a student.”>>>“.tneduts a ma I”.>>输出:student. a am I package com.exe9.off ...
- flash文件制作笔记
在uboot串口台输入printenv 可以分区以及其他信息,如下 hisilicon # printenv bootdelay=1baudrate=115200ethaddr=00:00:23:34 ...
- SVN设置实例
D:\scmserver\SVNROOT\safeControl,该SVN项目下,有erSystem和hcSystem两个项目.现在人员有两种类型的人,一个内部人员,一个是佰钧成人员. 设置要求: 1 ...
- uboot在nandflash和norflash是如何运行的
转自:http://www.aiuxian.com/article/p-2796357.html 电子产品如果没有了电,就跟废品没什么区别,是电赋予了他们生命,然而程序则是他们的灵魂. 小时候一直很好 ...
- HTTP协议下保证登录密码不被获取更健壮方式
说到在http协议下用户登录如何保证密码安全这个问题: 小白可能第一想法就是,用户在登录页面输入密码进行登录时,前台页面对用户输入的密码进行加密,然后把加密后的密码作为http请求参数通过网络发 ...
- jsPlumb
官网:https://jsplumbtoolkit.com GitHub:https://github.com/sporritt/jsplumb/ 初始化 jsPlumb只有等到DOM初始化完成之后才 ...
- Linux中变量$#,$@,$0,$1,$2,$*,$$,$?的含义(转载)
From:http://dadekey.blog.51cto.com/107327/119938 我们先写一个简单的脚本,执行以后再解释各个变量的意义 # touch variable # vi ...
- Java多线程之join
1.join方法只有在继承了Thread类的线程中才有. 2.线程必须要start() 后再join才能起作用. 将另外一个线程join到当前线程,则需要等到join进来的线程执行完才会继续执行当前线 ...