乐趣区

关于javascript:javaScript作为外部文件引用时要注意

jiezi

javaScript 作为内部文件援用时要留神

单页面利用 js 没有问题，然而如果利用 masterpage，在套用内部 js 文件时，根据设置的 id 失去的对象始终为 NULL:

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

运行这个页面，从 View source 中会看到运行时的后果：

这时咱们看到设计阶段的 ID 值和运行时控件的 ID 值是一样的，没有问题，这是因为这是一个单纯的 aspx 页面。如果在页面中蕴含一个用户自定义的 web control 或使用了 master pages (ASP.NET 2.0)，情况就不乐观了。咱们减少一个新的 user control 名为 mycontrol.ascx. 在 mycontrol.ascx 中加入同样的 text box。再把这个自定义控件加入到一个 aspx 页面，将此控件的 ID 设置为 myControl. 在阅读器中运行这个页面，失去的 html 是这样的：

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]+"

“+”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 …

退出移动版