关于在单独的 Js文件中无法使用 <%= %> 的原因及解决方案

简介:

最近在做项目的时候遇到了一个问题,就是在项目中我使用了母版页的结构,所以在获取前台ID的中会遇到服务器控件ID自动添加母版页ID前缀的问题。

记得刚开始做web开发的时候,使用Repeater控件也遇到过子控件ID自动加前缀的问题,那时候的解决办法就是将项目运行一下,在浏览器中查看源代码,然后复制运行后生成的最终ID,粘贴到自己的代码中去,但是现在再用这种方法总觉得不妥,看起来太业余。

说这个有点扯跑题了,下面是正题:

由于用了母版页,所以我写jQuery的时候取控件ID就要这样写

1
jQuery( "#<%= btnAdd.ClientID%>" ).click();


这样写法的好处是服务器按钮控件btnAdd会直接通过ClientID这个属性获得其加完前缀的最终ID。

而这段代码在运行之后,我们可以看到最终生成的内容是这样的

1
jQuery( "#ContentPlaceHolder1_btnAdd" ).click();

可以看出自动在原ID的基础上加了ContentPlaceHolder1_这个前缀。

但是问题也随之而来了,在当我把jQuery 的代码从前台.aspx页的<head>中独立到一个单独的.js文件之后,发现一切就变得失效了。查看源代码,如下

1
jQuery( "#<%= btnAdd.ClientID%>" ).click();

对,它没有变,所以功能也就失效了。


出现这个问题的原因是什么呢?

1、比较平民的说,<%= %> 这个东西只能在.aspx中使用,也就是说只有在.aspx页中才能被识别出来。

2、比较官方的说法,Js文件是拿给客户端浏览器解析的,服务端只负责把你的Js文件输出给客户端,不会像.aspx去解析<%= %>,所以浏览器运行JS不认识这个<%= %>,只会当成一个普通字符串。

对于原因的理解以我的水平就到此了,下面说一下针对这类问题的解决办法。

1、针对你要选取的控件加一个对应的隐藏域控件,像这样

1
< input  type = "hidden"  id = "hfAdd"  value="#<%=btnAdd.ClientID %>" />

由于这个控件不是runat="server"控件,即非服务器控件,所以不用担心它会自动加上前缀,所以在.js文件中直接正常调用即可,如下

1
jQuery(jQuery( "#hfadd" ).val()).click();

2、在.aspx页面中,脚本顶部定义一个变量,然后通过<%= %>给变量赋值,即这个变量就是你想要的控件最终ID,然后在独立的.js文件中直接调用这个变量就可以了。形式如下

.aspx页

1
2
3
4
5
6
7
< head >
< script  type = "text/javascript"  src = "../Scripts/jquery-1.5.2.min.js" ></ script >
< script  type = "text/javascript" >
     var buttonADD = "#<%= btnAdd.ClientID%>";
</ script >
< script  type = "text/javascript"  src = "../Scripts/独立的js文件.js" ></ script >
</ head >


独立的js文件.js

1
2
3
jQuery(document).ready( function  () {
     jQuery(buttonADD).click();
})

这里要注意的是在.aspx页中对于脚本文件的调用顺序要注意一下,如果你想要在.js文件中使用声明的变量,就必须在其声明后,才引用你的.js文件。


目前我认为这两种方法可能是最可取的,有网友说还可以给js文件加上aspx的属性的东东,我有点傻傻分不清了,所以也不准备研究了。

上面两种方法各有各的好处,大家根据情况选择使用呗,如果js代码没多少或者不嫌乱的话,那就直接写在.aspx的<head>中好了。


PS:这里补充几个问题

1、使用 某控件ID.ClientID 这种形式取最终ID的话,前提是这个控件必须要是服务器控件,如果不是服务器控件的话,我们也没有必须获取所谓的最终的ID,因为非服务器控件是不会加前缀的。

2、不单单是<%= %> 只能在.aspx页才能被解析,包括<% %><%# %>都是一样的。










本文转自 我不会抽烟 51CTO博客,原文链接:http://blog.51cto.com/zhouhongyu1989/1392921,如需转载请自行联系原作者

目录
相关文章
|
10天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
14 0
|
1月前
|
JavaScript
uni-app中关于格式化时间的js文件
uni-app中关于格式化时间的js文件
30 0
|
2月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
|
3月前
|
XML JSON JavaScript
|
3月前
|
存储 JavaScript 前端开发
只使用简单的 JavaScript 创建文件共享型网站
只使用简单的 JavaScript 创建文件共享型网站
39 0
只使用简单的 JavaScript 创建文件共享型网站
|
3月前
|
JavaScript Android开发
AutoJs4.1.0实战教程---js文件打包发布成APK文件
AutoJs4.1.0实战教程---js文件打包发布成APK文件
92 0
AutoJs4.1.0实战教程---js文件打包发布成APK文件
|
4月前
|
JSON JavaScript 前端开发
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
93 0
|
4月前
|
JSON JavaScript 数据格式
NPM 发包 js 文件并支持 ts 使用(包含 gulp 打包压缩)
NPM 发包 js 文件并支持 ts 使用(包含 gulp 打包压缩)
57 0
|
1月前
|
JSON JavaScript 前端开发
vue项目使用Print.js插件实现PDF文件打印
vue项目使用Print.js插件实现PDF文件打印
33 0
|
2月前
|
数据采集 机器学习/深度学习 JavaScript
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
51 0