【已解决】用户控件中如何正确使用JavaScript代码

sanshi

给个ZIP包，也好调试

sanshi

第一个问题是FineUI的BUG。

第二个问题是自身代码问题：由于页面包含两个相同的用户控件，所以生成的HTML代码也是两份，如下所示：

1.     <div id="ctl04_wrapper">
   
2.                
   
3. <script type="text/javascript" >
   
4.     function SetV() {
   
5.         var id = 'ctl04_ctl00_WebUserControl1_Form3_FormRow1_hf001';
   
6.         document.getElementById(id).value = "123";
   
7.         alert(document.getElementById(id).value);
   
8.     }
   
9. </script>
   
10. 
    
11.                
    
12. <script type="text/javascript" >
    
13.     function SetV() {
    
14.         var id = 'ctl04_ctl00_WebUserControl2_Form3_FormRow1_hf001';
    
15.         document.getElementById(id).value = "123";
    
16.         alert(document.getElementById(id).value);
    
17.     }
    
18. </script>
    
19. 
    
20.             </div>
    

复制代码

很明显，可以看出，第二个 SetV 的定义覆盖了第一个 SetV 的定义，所以页面上对 SetV 的调用只会对第二个控件中的隐藏字段赋值，当然在后台无法取到第一个用户控件中的隐藏字段值。

正确的做法是：
1. 把 SetV 移动到 页面中（test.aspx）：

1. <script type="text/javascript">
   
2.         function setV(id) {
   
3.             document.getElementById(id).value = "123";
   
4.             alert(document.getElementById(id).value);
   
5.         }
   
6.     </script>

复制代码

2. 把用户控件中的 SetV 删除，然后在后台代码中：

1. protected void Page_Load(object sender, EventArgs e)
   
2.         {
   
3.             if (!IsPostBack)
   
4.             {
   
5.                 btnGeizhi.OnClientClick = String.Format("setV('{0}-inputEl');", hf001.ClientID);
   
6.             }
   
7.         }

复制代码

还要注意一点：这里只所以在 hf001.ClientID 后面又加个 -inputEl ，是由 HiddenField 生成 HTML 决定的（可以用浏览器调试工具看下生成的HTML结构）。