热巴罗布膏,姜昆唐杰忠相声全集,休闲小栈
前言
当使用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"/>
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！
点击进行留言回复
我要评论
网友评论