页面中包含同一个asp.net控件多次，如何产生不同的javascript方法名
开发asp.net控件的时候，有时候需要为控件定义javascript方法，当页面加载该控件的时候，javascript方法也会一同被加载。但是这样有可能会产生一个问题，当页面中只包含该控件一次，那么不会产生问题，但是如果包含该控件多次，则可能产生javascript方法的调用问题。举一个例子，如下：
定一个控件：userControl.ascx，该控件的作用就是当选中checkbox时，会显示div中的"Hello!"，反之则隐藏。
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="userControl.ascx.cs" Inherits="WebApplication1.userControl" %>
<asp:CheckBox ID="checkBox1" runat="server" Text="ShowHello" onclick="showHello()" />
<br />
<div id="divShow" style="display:none;">
Hello!
</div>
<script type="text/javascript">
function showHello() {
if(document.getElementById("<%= checkBox1.ClientID %>").checked == true)
document.getElementById("divShow").style.display = "block";
else
document.getElementById("divShow").style.display = "none";
}
</script>
在aspx文件中调用该控件：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %>
<%@ Register Src="~/userControl.ascx" TagName="userControl" TagPrefix="uc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc:userControl ID="userControl1" runat="server"></uc:userControl>
</div>
</form>
</body>
</html>
页面运行效果如下：
未选中状态
选中状态
但是，当页面中放置2个该控件时，则会产生问题。
页面中放置2个该控件代码：
<body>
<form id="form1" runat="server">
<div>
<uc:userControl ID="userControl1" runat="server"></uc:userControl>
</div>
<div>
<uc:userControl ID="userControl2" runat="server"></uc:userControl>
</div>
</form>
</body>
页面显示状态：
会发现，当选择第一个checkbox时，没有显示"Hello!"。
再看下一个状态：
选中第二个checkbox后，反而显示了第一个的"Hello!"，程序运行不正确了。
查看页面的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="WebForm3.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTY4MjM1NjEzN2QYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFFnVzZXJDb250cm9sMSRjaGVja0JveDEFFnVzZXJDb250cm9sMiRjaGVja0JveDGYnw7nmS01jb8pV+8NyvTrL+s3BDXk0Cg6rVkecRYxqA==" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLTl8PxCgKXwsreDgKXwt7PCz6U0lBVu2hpdPLsgMxA/QH9O1Dos/ApRsb2xKTwKd4T" />
</div>
<div>
<input id="userControl1_checkBox1" type="checkbox" name="userControl1$checkBox1" onclick="showHello();" /><label for="userControl1_checkBox1">ShowHello</label>
<br />
<div id="divShow" style="display:none;">
Hello!
</div>
<script type="text/javascript">
function showHello() {
if(document.getElementById("userControl1_checkBox1").checked == true)
document.getElementById("divShow").style.display = "block";
else
document.getElementById("divShow").style.display = "none";
}
</script>
</div>
<div>
<input id="userControl2_checkBox1" type="checkbox" name="userControl2$checkBox1" onclick="showHello();" /><label for="userControl2_checkBox1">ShowHello</label>
<br />
<div id="divShow" style="display:none;">
Hello!
</div>
<script type="text/javascript">
function showHello() {
if(document.getElementById("userControl2_checkBox1").checked == true)
document.getElementById("divShow").style.display = "block";
else
document.getElementById("divShow").style.display = "none";
}
</script>
</div>
</form>
</body>
</html>
发现有2个问题：
1）2个div的id都是"divShow"，程序中出现相同的id，显示是不对的。
2）存在2个javascript的showHello()方法，造成调用的混淆。
下面说说解决方法：
1）针对第一个问题，只要简单的为div加上runat="server"属性就可以了，这样在后台生成div的时候，系统会为其自动生成唯一的id。而且在javascript方法中，改成如下方式，即加上ClientID：
document.getElementById("<%= divShow.ClientID %>")
2）针对第二个问题，可以生成不同javascript方法名，方法如下：
function showHello<%=this.ClientID %>()
简单的在showHello后面添加上<%=this.ClientID %>，其生成的方法名就是唯一的。完整代码如下（注意，已经把checkbox中的onclick方法删除，后面会再加上。）：
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="userControl.ascx.cs" Inherits="WebApplication1.userControl" %>
<asp:CheckBox ID="checkBox1" runat="server" Text="ShowHello" />
<br />
<div id="divShow" runat="server" style="display:none;">
Hello!
</div>
<script type="text/javascript">
function showHello<%=this.ClientID %>() {
if(document.getElementById("<%= checkBox1.ClientID %>").checked == true)
document.getElementById("<%= divShow.ClientID %>").style.display = "block";
else
document.getElementById("<%= divShow.ClientID %>").style.display = "none";
}
</script>
最后如何为控件添加javascript方法，我使用的方法是在后台程序中添加，如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class userControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected override void OnInit(EventArgs e)
{
string strFn = "showHello" + this.ClientID + "()";
checkBox1.Attributes.Add("onclick", strFn);
base.OnInit(e);
}
}
}
好了，最后运行程序查看结果：
程序运行正常，再看一下页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="WebForm3.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTY4MjM1NjEzNw9kFgICAw9kFgQCAQ9kFgJmDxAPZBYCHgdvbmNsaWNrBRdzaG93SGVsbG91c2VyQ29udHJvbDEoKWRkZAIDD2QWAmYPEA9kFgIfAAUXc2hvd0hlbGxvdXNlckNvbnRyb2wyKClkZGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFFnVzZXJDb250cm9sMSRjaGVja0JveDEFFnVzZXJDb250cm9sMiRjaGVja0JveDF5UfR+knF9eDroF7PWJGWAHnANeipnWaDL7XQ23OuamA==" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKsmtPqBgKXwsreDgKXwt7PC99BvEBwIkmRC1NuzGV5YlvQuLHIDqla2izvgk/PVxqU" />
</div>
<div>
<input id="userControl1_checkBox1" type="checkbox" name="userControl1$checkBox1" onclick="showHellouserControl1();" /><label for="userControl1_checkBox1">ShowHello</label>
<br />
<div id="userControl1_divShow" style="display:none;">
Hello!
</div>
<script type="text/javascript">
function showHellouserControl1() {
if(document.getElementById("userControl1_checkBox1").checked == true)
document.getElementById("userControl1_divShow").style.display = "block";
else
document.getElementById("userControl1_divShow").style.display = "none";
}
</script>
</div>
<div>
<input id="userControl2_checkBox1" type="checkbox" name="userControl2$checkBox1" onclick="showHellouserControl2();" /><label for="userControl2_checkBox1">ShowHello</label>
<br />
<div id="userControl2_divShow" style="display:none;">
Hello!
</div>
<script type="text/javascript">
function showHellouserControl2() {
if(document.getElementById("userControl2_checkBox1").checked == true)
document.getElementById("userControl2_divShow").style.display = "block";
else
document.getElementById("userControl2_divShow").style.display = "none";
}
</script>
</div>
</form>
</body>
</html>
每一个div都有不同的id，2个showHello方法的名字现在时不同的，checkbox也调用了各自的方法，程序可以正常运行。
