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就是这么实现的，有兴趣的可以下载一个用用