zoukankan      html  css  js  c++  java
  • 外部JS文件中获取ASPX页面上服务器控件ClientID

    郁闷!今天在做一个前台页面的优化时遇到这么个情况。原页面中js代码和html都写在一起没有分离开,然后自己就将js部份的代码全都放到外部js文件中引用。可是运行时就是不出现效果。后来才发现是这里出了问题:

    以下转至:http://www.jb51.net/article/17262.htm

    当使用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"/>
    详细出处参考:http://www.jb51.net/article/17262.htm

    以上是网上的一种解决方法个人决得虽然可以解决问题,但是还会有一小部份的js代码要写在html页面中。而用jQuery中的筛选器就完全只在外部js中编写jquery代码就能获得服务器控件的相关属性。

  • 相关阅读:
    ZOJ 2588 Burning Bridges
    POJ 1966 ZOJ 2182 Cable TV Network
    HDU 5348 MZL's endless loop
    HDU 5352 MZL's City
    Tarjan算法求解无向连通图的割点、割边、点双连通分量和边双连通分量的模板
    ZOJ 1119 SPF
    HDU 3452 Bonsai
    HDU 1520 Anniversary party
    POJ 2239 Selecting Courses
    POJ 1144 Network
  • 原文地址:https://www.cnblogs.com/zgshi/p/2375643.html
Copyright © 2011-2022 走看看