javaScript作为外部文件引用时要注意

   在实现某个功能的时候，发现了一个奇怪的问题：单页面应用js没有问题，但是如果应用masterpage，在套用外部js文件时，根据设置的id得到的对象始终为NULL:

   *******************************引用一段文字说明 问题所在*******************************
ASP.Net 提供了代码和页面分离的机制，在大多数情况下，这种机制工作得非常好。但是，如果需要使用客户端java脚本来做些工作，你就会遇到麻烦了。问题出在你在设计阶段为server端控件设置的ID值和页面运行时控件实际的ID值不一致。例如，新建一个Web site,增加一个 aspx page,在页面上加入一个text box控件：

<asp:TextBox ID="mytext" Runat=server></asp:TextBox>    
运行这个页面，从View source中会看到运行时的结果：

<Input name="mytext" type="text" id="mytext" />
这时我们看到设计阶段的ID值和运行时控件的ID值是一样的，没有问题，这是因为这是一个单纯的aspx页面。如果在页面中包含一个用户自定义的web control或使用了master pages (ASP.NET 2.0)，情况就不乐观了。我们增加一个新的user control名为mycontrol.ascx. 在mycontrol.ascx中加入同样的text box。再把这个自定义控件加入到一个aspx 页面， 将此控件的ID设置为myControl. 在浏览器中运行这个页面，得到的html是这样的：

<Input name="myControl:mytext" type="text" id="myControl_mytext" />
text box控件的设计阶段ID= mytext，但运行时得到的ID=myControl_mytext。也就是在原来的ID前面增加了包含text box控件的容器myControl的ID。在使用master pages时，所有的aspx 页面都是被包含在一个容器中的， 而且还常常会有容器的嵌套。如果在客户端使用JavaScript去按照ID查找控件就会失败

  *******************************************************************************************
  通常这个时候，就要利用控件的ClientID属性来获得运行时ID:
 1.在Masterpage的header部分加入对外部js文件的参考，那么所有应用此模板的页面都可以应用这个js文件

  < script  src  ="JScript.js"  language  ="javascript"  type  ="text/javascript"   ></ script >

2.JS文件定义：

       function  showTip(id,oevent,address)
       ... {
        var div=document.getElementById(id);
        var result=DbOp.getDetail(address).value;
        var arrs=result.split(","); 
        var show="The ID IS :"+arrs[0]+"<br>"+"The name IS :"+arrs[1];
        div.innerHTML=show;
        div.style.visibility="visible";
        div.style.left=oevent.clientX+5;
        div.style.top=oevent.clientY+5;
      }
      
       function  hidTip(id,oevent)
       ... {
       var div=document.getElementById(id);
        div.style.visibility="hidden";
      }

3。子页面：

< asp:Content  ID ="Content2"  ContentPlaceHolderID ="ContentPlaceHolder1"  Runat ="Server" >
   < div >
    
       < div  id ="divshow"   runat  ="server"    >
        
       </ div >
       < div  id ="div2"   runat  ="server"  style  =" border :solid 1px red; background :#f0f0f0; visibility :hidden ; position :absolute" >
       xxxxx
       </ div >
     </ div >
</ asp:Content >

4.CS:

// some code...
  
gv.Rows[i].Cells[ 2 ].Attributes.Add( " onMouseover " ,  " showTip(' " + div2.ClientID + " ',event,' "   +  address  +   " ') " );
            gv.Rows[i].Cells[ 2 ].Attributes.Add( " onMouseout " ,  " hidTip(' " + div2.ClientID + " ',event) " );

// code here ...

结合上篇文章，就可以实现行为和表现（js和html）的分离。