全国统一热线:
028-86758058
18980748058
购买流程
付款方式
常见问题
在线提问
续租服务
购物车(
0
件)
用户名:
密 码:
记住
首 页
HOME
域名注册
DOMAIN
虚拟主机
WEB HOST
成品网站超市
AUTO Site
VPS主机
VPS SERVER
云 主 机
CLOUD HOST
租用托管
SERVER
海外主机
HK HOST
代理专区
AGENT
客服中心
SERVICE
站长教程
SERVICE
欢迎光临西部数据云计算中心,我们将竭诚为您提供最优质的服务!
中文域名
域名转入
域名转出
DNS管理
动态域名
获取域名证书
域名停放
域名过户
集群主机
双线主机
基本主机
港台主机
论坛主机
Linux主机
Vip合租主机
超G型主机
ASP.net主机
Java主机
智能建站主机
网店主机
美国主机
数据库
成品网站超市
智能建站主机
集群VPS主机
国内VPS主机
香港VPS主机
美国VPS主机
云主机介绍
云主机购买
服务器租用
主机托管
常见问题
香港主机
港台主机
美国主机
国内免备案
步骤流程
代理级别
代理合同
代理模式
代理优势
在线申请
产品列表
常见问题
代理商分布图
常见问题
有问必答
跟踪提问
购买流程
产品价格
付款方式
常用软件
网站备案
续租服务
汇款确认
相关文档
联系我们
域名资讯
主机资讯
行业动态
网页制作
php教程
mysql教程
域名资讯
云计算资讯
网络编程
您当前的位置:
首页
>
网络编程
>
Net教程
从外部的js文件中获取ASPX页面的控件ClientID
时间:2015-01-29 来源:互联网 作者:佚名
前言
当使用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中,故可使用:
document.getElementById("<%=Me.txtTest.ClientID %>" )
来获取一个控件的真实引用,当然,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文件
复制代码
代码如下:
<script type="text/javascript">
function getClientId()
{
var paraId1 = '<%= Button1.ClientID %>';
return {Id1:paraId1};
}
</script>
<script type="text/javascript" src="JScript.js"></script>
接下来,我们在JScript.js中,就可以这样来实现需求:
function ChangeText()
{
var btn=document.getElementById(getClientId().Id1);
btn.value="from extended js";
}
getClientId().Id1 貌似很OO,而且还支持VS2008很蹩脚的JS智能提示,打上“.”之后就可以在提示中选择Id1了
如果有多个控件需要注册,只需将他们注册到访问器中即可,下面是一个完整的Demo代码:
Default5.aspx
复制代码
代码如下:
<%@ 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>
JScript.js
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:
复制代码
代码如下:
<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>
接下来,我们在JScript.js中,就可以这样来实现需求:
复制代码
代码如下:
function ChangeText()
{
var btn=document.getElementById(globals.controlIdentities.someControl1);
btn.value="from extended js";
}
globals.controlIdentities.someControl1,同样,也支持VS2008很蹩脚的JS智能提示,打上“.”之后就可以在提示中选择someControl1了
下面是一个完整的Demo代码:
Default5.aspx
复制代码
代码如下:
<%@ 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>
JScript.js
复制代码
代码如下:
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文件中,最好还是加上:
///<reference path="Default5.aspx"/>
来顶一下
返回首页
推荐资讯
Microsoft SQL Server 2005 Expres
概述 Microsoft SQL Server 2005 Express Edition是Micro
使用.NET命令行编译器编译项目(如
源程序最好有.csproj或.vbproj文件,没有的话,要花些时间调
相关文章
asp.net Silverlight应用程序中获取载体aspx页面参数
asp.net+js实现的ajax sugguest搜索提示效果
web用户控件调用.aspx页面里的方法
.aspx中的命名空间设置实现代码
aspx 页面弹出窗口代码大全
TextBox的宽度随输入的文本的大小而改变的js代码
asp.net js模拟Button点击事件
js与ASP.NET 中文乱码问题
Aspx/Asp.net 防注入程序 V1.0
js获取.aspx页面里面的服务器控件和.ascx中的服务器控
栏目更新
栏目热门
返回首页
关于我们
联系我们
付款方式
价格总览
资讯中心
友情链接
媒体关注
有问必答
投诉建议
网站备案
《中华人民共和国增值电信业务经营许可证》编号:川B2-20080058号
官方网址:
xibushuju.com
西部数据
Copyright © 2002~2015
天府快车
版权所有
电话总机:
028-86758058
(50线) 传真:
028-86758058