使用 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 ...
随机推荐
- SharePoint 2010 最佳实践学习总结------第1章 SharePoint Foundation开发基础
----前言 这段时间项目出在验收阶段,不是很忙,就潜心把SharePoint学一下,不求有多深刻,初衷只是先入门再说.后续会发布一系列的学习总结.主要学习的书籍为<SharePoint2010 ...
- c# 可以设置透明度的 Panel 组件
using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...
- C#Random()函数详解
随机数的使用很普遍,可用它随机显示图片,用它防止无聊的人在论坛灌水还可以用来加密信息等等.本文讨论如何在一段数字区间内随机生成若干个互不相同的随机数,比如在从1到20间随机生成6个互不相同的整数,并通 ...
- 07socket编程
TCP客户/服务器模型: 从图中就可以看出基本的过程来. 回射客户/服务器: 这个是回射的图示,客户端发给服务端,服务端在发回给客户端. socket函数: 包含头文件<sys/sock ...
- phpize的安装
一直想装VLD却一直没装上,因为需要用到phpize,但这个工具大部分机子都没有装,上网搜了一下大部分都是讲phpize的应用没有讲怎么安装. 今天终于搜到了,不过是要在linux机器上,有yum命令 ...
- jsp页面中的问题:Date cannot be resolved to a type
问题如下:写了一个jsp,提示 症状原因:缺date的jar包 解决办法:在jsp开头导入jar包:<%@ page language="java" import=" ...
- Yii集成smarty说明
1. [在protected目录下建立文件夹vendor/smarty,把smarty的类包放入其中] 2. [在extensions目录下边建立文件CSmarty.php] ...
- JavaScript对象 属性
1.ES中的对象是完全动态的,这意味着,在程序执行的时候我们可以任意的添加,修改或删除对象的属性. var stu = { ID: 1 }; //添加新属性 stu.Name = 'ck'; cons ...
- 黄聪:wordpress伪静态的原理
首先起作用的是配置文件的.htaccess 中的 RewriteEngine OnRewriteBase /RewriteRule ^index\.php$ - [L]RewriteCond %{RE ...
- butterknife 使用注意事项
写了个demo,一直报错 Caused by: java.lang.IllegalStateException: Required view 'tv1' with ID 2131492943 for ...