从外部JS文件中获出ASPX页面控件的ClientID
前言
当使用MasterPage、UserControl等容器时,为了避免控件的重复命名,asp.net会自动将容器中的控件生成一个ClientID(Control Tree中的可生成,否则不会生成)。
例如:ContentPlaceHolder1中的Button1默认情况下会生成“ctl00_ContentPlaceHolder1_Button1”的ClientID。
我们在Render出来的mark up中看到的也是这些ClientID。所以,当我们使用JavaScript对控件元素进行操作的时候,必须使用ClientID来对控件进行查找。
Inline情况下的解决方案
如果JavaScript代码写在.aspx文件中时,也就是Inline Script时。在页面生成的时候,我们能够通过绑定机制将控件的ClientID绑定到页面Mark up中,故可使用:
来获取一个控件的真实引用,当然,FindControl等方法也可以写在<%=...%>中用来绑定服务端数据到客户端。
external JS情况下的解决方案
然而,部分情况下,为了解耦,我们常常把JavaScript单独写在.js文件中,再引用到aspx文件中去。这种情况下,.js文件内的代码不能通过<%=...%>来进行服务端数据的绑定,所以上面的方法是不能用的。
此时简单点的解决方案就是直接在JavaScript中写控件的ClientID,但这样增加了JS文件和ASPX的耦合度,非常不推荐使用。
我常用的方法有两种,在此抛砖引玉:
案例:
Default5.aspx是MasterPage.master 的内容页,本例中的主要文件。
JScript.js是一个外部的js文件,用来处理JavaScript操作。
Button1是Default5.aspx中的一个<ASP:Button>,用来显示效果。
Button2是Default5.aspx中的一个<input type=button>,用来触发JavaScript。
需求:点击Button2,将Button1上的文本改成“from extended js”
方案一:使用内联JS访问器
要想在外部JS中获得ASPX动态生成的ClientID,可以通过在ASPX页面中添加访问器的方式来实现,类似OO语言中的属性:
我们在Default5.aspx中添加如下代码:
作用:①声明getClientId访问器,并注册Button1的ClientID。②引用JScript.js文件
function getClientId()
{
var paraId1 = '<%= Button1.ClientID %>';
return {Id1:paraId1};
}
</script>
<script type="text/javascript" src="JScript.js"></script>
接下来,我们在JScript.js中,就可以这样来实现需求:
{
var btn=document.getElementById(getClientId().Id1);
btn.value="from extended js";
}
getClientId().Id1 貌似很OO,而且还支持VS2008很蹩脚的JS智能提示,打上“.”之后就可以在提示中选择Id1了
如果有多个控件需要注册,只需将他们注册到访问器中即可,下面是一个完整的Demo代码:
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %>
<script runat="server">
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript">
function getClientId()
{
var paraId1 = '<%= Button1.ClientID %>';//注册控件1
var paraId2 = '<%= TextBox1.ClientID %>';//注册控件2
return {Id1:paraId1,Id2:paraId2};//生成访问器
}
</script>
<script type="text/javascript" src="JScript.js"></script>//引用外部js
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
<input id="Button2" type="button" value="button" onclick="ChangeText();" />
</asp:Content>
function ChangeText()
{
var btn=document.getElementById(getClientId().Id1);
btn.value="from extended js";
var btn=document.getElementById(getClientId().Id2);
btn.value="from extended js";
}
方案二:使用JS全局变量
还有一种方法也比较OO,就是使用JS全局变量,同样,也需要在Default5.aspx中添加一段JS代码,作为全局变量,来提供ClientID:
var globals = {};
globals.controlIdentities = {};
globals.controlIdentities.someControl1 = '<%= Button1.ClientID %>';
globals.controlIdentities.someControl2 = '<%= TextBox1.ClientID %>';
</script>
<script type="text/javascript" src="JScript.js"></script>
接下来,我们在JScript.js中,就可以这样来实现需求:
{
var btn=document.getElementById(globals.controlIdentities.someControl1);
btn.value="from extended js";
}
globals.controlIdentities.someControl1,同样,也支持VS2008很蹩脚的JS智能提示,打上“.”之后就可以在提示中选择someControl1了
下面是一个完整的Demo代码:
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %>
<script runat="server">
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript">
var globals = {};
globals.controlIdentities = {};
globals.controlIdentities.someControl1 = '<%= Button1.ClientID %>';
globals.controlIdentities.someControl2 = '<%= TextBox1.ClientID %>';
</script>
<script type="text/javascript" src="JScript.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
<input id="Button2" type="button" value="button" onclick="ChangeText();" />
</asp:Content>
function ChangeText()
{
var btn=document.getElementById(globals.controlIdentities.someControl1);
btn.value="from extended js";
var txt=document.getElementById(globals.controlIdentities.someControl2);
btn.value="from extended js";
}
结束语:
在上面两种方法中,也没有真正的实现aspx和js的完全解耦,所以,在js文件中,最好还是加上:
转载于:https://www.cnblogs.com/stray521/archive/2008/12/27/1363477.html
从外部JS文件中获出ASPX页面控件的ClientID相关推荐
- 外部js php变量,在外部JS文件中包含PHP变量?
我的解决方案结合了几种技术,其中一些已经在这个问题的答案中提到过. 是的,将PHP与JS分开 首先:是的,你应该将你的JS与PHP分开.您可以将其放在单独的文件中,但是您需要对当前代码进行一些更改.不 ...
- Web生产:外部JS文件中的绝对URL?
我想知道,您是否知道在外部JavaScript文件中指定绝对URL的最佳做法? 我正在寻找一种可维护的解决方案. 基本方案是当我需要在运行时通过javascript包含css文件或对某些URL进行aj ...
- 挖坑指南:如何在引用的外部js文件中获取vue页面实例?(独家)
原文链接 前言 在基于iView的后台项目中,表格组件是我们的老朋友了.实现如下的效果更是最基本的需求: 开始 在iView早期1.x的版本(其实在~2.0.0-rc.7也能使用),想要渲染这样的效果 ...
- 外部js文件中调用pinia时,报错getActivePinia was called with no active Pinia. Did you forget to install pinia?
分析原因:是pinia在main.js中还未注册好,便在其他文件中使用了它. 正确引用: src/stores/index.js文件 import { createPinia } from 'pini ...
- Highcharts教程--把js代码从html中抽离出来,放到单独的一个js文件中。由html页面调用...
1.html页面写法 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- Qt解决资源文件中添加图片,对应控件不显示图片的问题
//资源文件--为控件添加图标//:/new/prefix1/image/mr.jpgQPixmap pic; //定义一个图片对象pic.load(":/new/prefix1/a.jpg ...
- js加载html的head偶尔失效,外部 js 文件偶尔会加载失败
最近有一个很奇怪的问题一直困扰着我: html 页面中,head部分引入了几个外部js文件. 比如: // 目前页面结构就是这样,其他的代码都和此异常无关,就不多贴了. // 这里就直接报错,显示 V ...
- 从外部的js文件中获取ASPX页面的控件ClientID(get control reference from external javascript)...
前言 当使用MasterPage.UserControl等容器时,为了避免控件的重复命名,asp.net会自动将容器中的控件生成一个ClientID(Control Tree中的可生成,否则不会生成) ...
- Angular7中引用外部JS文件
Angular7中引用外部JS文件,步骤如下: 1. 将引入的js文件放到项目的src/assets下 2. 在angular.json文件中找到scripts项并配置js文件的相对路径 3. 在sr ...
最新文章
- 对数组中的数字从小到大排序
- AM消息中间件OA、ERP消息提醒的必要工具
- 20155339 Exp6 信息搜集与漏洞扫描
- h5中的结构元素header、nav、article、aside、section、footer详解
- memcached 相关
- 集合中获取元素为什么要进行强制类型转换
- 38 FI配置-财务会计-固定资产-组织结构-指定帐户确定
- PhpStudy升级数据库到mysql5.7方法
- Android Studio(4)---开发人员工作流程基础
- python 嵌入 php,Python与PHP实现插入排序实例
- 2021水电消纳交易电量增长超150% 价格已提高16%
- K8S - 为 Docker 而生
- mysql有则修改无则添加_通过sql实现无则插入有则修改(MySQL)
- linux平台 doc转pdf,linux doc ppt 转 pdf
- PM-项目管理(Project Management)
- 汇编软件MASM和调试工具DEBUG的使用
- iOS开发之—— XCODE真机调试设备连接一直忙碌如何处理!(真机调试各种错误提示解决)...
- 计算机健康小知识,电脑一族护肤保健小常识
- 3D模型欣赏:短发美女,小恶魔
- 微信公php开发视频,PHP实现微信公众平台开发 全套视频资源下载