• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    UpdatePanel触发javascript脚本的方法附代码
    一.预呈现数据无法更改

      1.大家知道,预呈现的数据是无法更改的,以前可能提到过,这里再看demo,自定义一个控件

    [DefaultProperty("Text")]
    [ToolboxData("<{0}:JsControl runat=server></{0}:JsControl>")]
    public class JsControl : WebControl
    {
    [Bindable(true)]
    [Category("Appearance")]
    [DefaultValue("")]
    [Localizable(true)]
     public string Text
     {
     get
     {
     String s = (String)ViewState["Text"]; 
     return ((s == null) ? String.Empty : s); 
     }

      set
     {
      ViewState["Text"] = value; 
      }
    }

     protected override void OnPreRender(EventArgs e)
     {
     Text = "hello,you can't change me"; 
     base.OnPreRender(e); 
     }

     protected override void RenderContents(HtmlTextWriter output)
     {
     output.Write(Text); 
     }
    }
    aspx页面

    protected void Button1_Click(object sender, EventArgs e)
    {
    JsControl1.Text = "I want to change the Text property"; 
    }
      你会发现你并未更改属性.这牵涉到控件生命周期的执行.为什么要说这个,因为控件的大部分脚本都是在预呈现中注册的. 

      这有什么问题吗? 其本身想法很好,脚本在此事件(指OnPreRender)中注册,注册脚本资源在前(控件夹中间),脚本初始化在最后.这符合javascript的使用原则,先导入脚本,然后有标签,初始化的脚本须放在标签后面.

      二.UpdatePanel引起的问题

      上面的问题如果是服务器提交回传的则可行,主要问题是我们要用ajax无刷新注册脚本.以下我们再来看asp.net2.0内置的treeview控件,拖个控件要页面看其生成的html代码。

      你已经看到很多的脚本注册和初始化了.

      我们来测试下UpdatePanel能干什么事情,我们设置其属性Visible为False到True

      借助FireBug的威力我们来看下UpdatePanel在无刷新状态下返回给了我们什么
     
      出错了,大家可能也遇到过此情况,很正常嘛,UpdatePanel没有为我们注册脚本也没未我们初始化,在属于正常现象,UpdatePanel只管其容器里面的,其他的不归它管.

      三.解决方法

      要解决TreeView控件,我是想不出来,这个控件算是在asp.net ajax模式下算是完蛋了.为了迎合asp.net ajax框架的运用,我们需要知道UpdatePanel无刷新更新范围,当我们自己定义控件的时候就需要注意.

    1.控件本身标签
    2.控件内部
    3.UpdatePanel容器内部

      若想使用UpdatePanel更新数据后再触发客户端事件的,有以下方案

      1.通过更改现有控件属性,如

    Button1.Attributes["onmouseover"] = "alert('hello')"; 
      2.在呈现过程中脚本初始化

      第一种方法简单运用还可以,复杂就不行了,我们还是需要把脚本封装好跟控件结合使用的,我们不再在预呈现中注册脚本,而在呈现中实现(即RederContent方法).
    我们只要保证脚本资源在前,初始化在后,控件在中间这一原则就可以了...以下方法是可行的

    如下
    protected override void RenderContents(HtmlTextWriter output)
    {
    output.Write("<script src=\"xxxx.js\"></script>"); 
    output.Write(Text); 
    output.Write("<script>alert('hello')</script>"); 
    }
      四.几个误区

      1.验证控件在ajax框架中可以完好使用
    其实是其加载了一段脚本,不然其也会挂掉
      2.状态保留
      在UpdatePanel中更新数据后,再Postback,无刷新更新的数据状态还保留
      3.更新数据后执行客户端脚本

    曾经我们天真的会这么写

    protected void Button1_Click(object sender, EventArgs e)
    {
    Label1.Text = "alert('hello')"; 
    }
      结果什么也没发生,window.onload事件已过,除非你刷新(可你不想刷新),不然没人帮你触发。
      谁来触发?微软帮我们准备好了。你要的大概就是这个了,数据更新前后都是一个事件触发。我们可以围绕着这两个事件为控件做点事情。这个状态适合于数据取到后就立马触发的需要。
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
     function BeginRequestHandler(sender, args)
     {
     var elem = args.get_postBackElement(); 
     ActivateAlertDiv('visible', 'AlertDiv', elem.value + ' processing'); 
     }
     function EndRequestHandler(sender, args)
     {
     ActivateAlertDiv('hidden', 'AlertDiv', ''); 
     }
     function ActivateAlertDiv(visstring, elem, msg)
     {
     var adiv = $get(elem); 
     adiv.style.visibility = visstring; 
     adiv.innerHTML = msg; 
     }
      其他的话我们也可以更改控件属性,就如加个onclick事件什么的都可以

      五.另类解决方法

    此方法比较的绝,但用起来比较的爽。UpdatePanel之所以无法获取到脚本数据,是因为其获取范围还不够。。。接着的想法是:

      照样无刷新取数据,但取回来的数据跟Postback回来的数据一样。
    可能有人说会比较耗性能,那都是相对的。不过也是一个很好的想法。Telerik公司的RadAjaxPanel就是这么实现的,有兴趣的可以下载一个用用 
    您可能感兴趣的文章:
    • js 触发select onchange事件代码
    • 代码触发js事件(click、change)示例应用
    • js获取触发事件元素在整个网页中的绝对坐标(示例代码)
    • javascript 动态改变onclick事件触发函数代码
    • JavaScript 动态添加脚本,并触发回调函数的实现代码
    • 文本框中,回车键触发事件的js代码[多浏览器兼容]
    • 用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
    • 用按钮触发Javascript动态生成一个表格的代码
    • FireFox与IE 下js兼容触发click事件的代码
    • 鼠标放上去触发一个javascript提示框效果代码
    • JS代码触发事件代码实例
    上一篇:asp下用replace非正则实现代码运行功能的代码
    下一篇:生成EAN13标准的条形码的ASP代码实例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    UpdatePanel触发javascript脚本的方法附代码 UpdatePanel,触发,javascript,