zoukankan      html  css  js  c++  java
  • 外部的js文件中获取ASPX页面的数据--解耦初接触

    当使用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的耦合度,非常不推荐使用。
    我看了作者的解决方法

    方案一:使用内联JS访问器 :①声明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";
    }
    方案二:使用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>

    在js文件中,则
    function ChangeText()
    {
    var btn=document.getElementById(globals.controlIdentities.someControl1);
    btn.value="from extended js";
    }

    在上面两种方法中,也没有真正的实现aspx和js的完全解耦,我很不满意.
    js写在外部,好处不用说了。上google一下就出来了。遗憾的是,目前我不能找到一个更好的方法:我遇到该类似问题(news_system)一般就用全局变量方法:aspx源码
    <script type="text/javascript">
     var focus_width=160;
     var focus_height=120;
     var text_height=0;
     var text_align="center";
     var swf_height = focus_height+text_height;
     //var swfpath="http://www.xxxxxx.net/xxx/xxpic/pixviewer.swf";
      var swfpath="pic/pixviewer.swf"//指定播放器
     var pics='<%=xxget_pic()%>';
     var links='<%=xxget_address()%>';//注意一定要用单引号,否则不行
     var texts='<%=xxget_text()%>'
     //var texts="1a|2b|3c|4d|5e";
    //多访客时提高速度,写出flash句放在独立flash_pic_show.js中
    </script>
    <script src="js/flash_pic_show.js" type="text/javascript" language="JavaScript"></script>

    写好js文件源码
    function CompareDate(d1,d2)
    {
       return ((new Date(d1.replace(/-/g,"\/"))) > (new Date(d2.replace(/-/g,"\/"))));
    }
    var end_date=end_date_first; //得到前js定义而获得的c#页面的值
    var site_board_date=site_board_date_first;//得到前js定义而获得的c#页面的值
    var current_time = new Date();
    if(CompareDate(end_date,current_time.getYear()+"-"+(current_time.getMonth ()+1)+"-"+current_time.getDate ())==true && CompareDate(current_time.getYear()+"-"+(current_time.getMonth ()+1)+"-"+current_time.getDate (),site_board_date)==true)
    {
    window.open('./gonggao/page1.aspx','_blank','left=460px,top=200px,width=550,height=350,resizable=no,status=no'); 
    }保存为一个js文件.
    还是不能解耦,遗憾啊。我会努力探求方法,正确把该问题解决,做的更好.

  • 相关阅读:
    ionic localstorage
    angular 中文鏈接
    把jqmobi 變成jQuery 的插件 從此使用jQuery
    jqmobi 的一些設置
    ionic ngcordova map 地圖
    ionic pull to refresh 下拉更新頁面
    json 對象的序列化
    鍵盤彈出,頁面佈局被推上去了.....
    Cordova V3.0.0中config.xml配置文件的iOS Configuration
    android ios 只能輸入數字 不能輸入小數點的 函數 cordova
  • 原文地址:https://www.cnblogs.com/pyman/p/1543424.html
Copyright © 2011-2022 走看看