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

赞 (0)

相关推荐

  • js触发onchange事件的方法说明

    js中onchange事件是在客户端改变输入控件的值,比如一个textbox,会出发的一个事件.但是如果在js代码中改变一个textbox的value,而不是通过键盘输入改变一个textbox值的话,是不会出发onchange事件的. 那么,如何在js代码模式通过代码触发textbox控件的onchange事件呢,经过查阅资料,发现js提供了一个方法,可以触发控件的应该是所有事件.object.fireEvent()方法,使用方法如 object.fireEvent('onchange'),即可

  • 深入理解Javascript动态方法调用与参数修改的问题

    Javascript中可以对所传参数在函数内进行修改,如下 复制代码 代码如下: function func1(name) {     name = 'lily';     alert(name); } func1('jack');//输出lily 再看一个例子 复制代码 代码如下: function fun1(n) {     this.name = n; } function fun2(name) {     fun1.call(this,'lily');     alert(name);

  • js onmousewheel事件多次触发问题解决方法

    我想做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果,遇到了很多问题,后来在kk的帮助下,终于解决了这个问题,甚是欢喜,于是记录一下: 我最初的代码是这样的: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> div { width: 700px; height: 1000px; } .red { back

  • javascript实现方法调用与方法触发小结

    在js中,this关键字是一个比较让人有意思的东西,但是它的指向经常让初学者摸不着头脑. 其实要理解这个关键字,需要理清两个问题--"方法的调用和方法的触发" 下面先看一段代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>function</title> <script> function showThis(

  • JS方法调用括号的问题探讨

    移动端的html页面, 写了一个函数. 复制代码 代码如下: function showAlert(msg,fn){ showDialog("alert", msg,"温馨提示",260); if(isNull(fn) == false){ $("#SD_confirm").unbind("click"); $("#SD_confirm").bind("click",fn); } } f

  • JavaScript中的方法调用详细介绍

    JavaScript中,如果function属于一个对象,那么通过对象来访问该function的行为称之为"方法调用".与普通的函数调用不同的是,在进行方法调用时,function中的this指代将发生变化 - this将指代用于调用该function的对象(该对象将成为方法调用的invocation context): 复制代码 代码如下: var x = 99; var sample = {   x:1,   act:function(a){     this.x = a*a;//

  • js实现浏览器窗口大小被改变时触发事件的方法

    本文实例讲述了js实现浏览器窗口大小被改变时触发事件的方法.分享给大家供大家参考.具体分析如下: 当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 复制代码 代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信息: 复制代码 代码如下: <span id="info_jb51_net">请改变浏览器窗口大小</span> <script> window.onresiz

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

    一.预呈现数据无法更改 1.大家知道,预呈现的数据是无法更改的,以前可能提到过,这里再看demo,自定义一个控件 [DefaultProperty("Text")] [ToolboxData("<{0}:JsControl runat=server></{0}:JsControl>")] public class JsControl : WebControl { [Bindable(true)] [Category("Appeara

  • Selenium执行JavaScript脚本的方法示例

    Selenium执行JavaScript脚本的方法示例

    JavaScript是运行在客户端(浏览器)和服务器端的脚本语言,允许将静态网页转换为交互式网页.可以通过 Python Selenium WebDriver 执行 JavaScript 语句,在Web页面中进行js交互.那么js能做的事,Selenium应该大部分也能做.WebDriver是模拟终端用户的交互,所以就不能点击不可见的元素,有时可见元素也不能点击.在这些情况下,我们就可以通过WebDriver 执行JavaScript来点击或者执行页面元素.本文将介绍如何使用 WebDriver

  • C# 执行Javascript脚本的方法步骤

    前一阵子使用C#编写SCXML状态机,需要解析EMCScript表达式,使用了Jint库(https://github.com/sebastienros/jint/),当时感觉与C#之间的数据转换不是很方便.这两天有时间又关注了一下,发现新的3.0版本有了很大改进,在这里介绍给大家,供参考. 首先要安装nuget包,注意增加prerelease选项,安装最新的版本,使用dotnet命令行指令如下: dotnet add  package Jint --prerelease 直接计算表达式: Co

  • Java中使用JavaScript脚本的方法步骤

    简介 Nashorn Nashorn 一个 javascript 引擎. 从JDK 1.8开始,Nashorn取代Rhino(JDK 1.6, JDK1.7)成为Java的嵌入式JavaScript引擎.Nashorn完全支持ECMAScript 5.1规范以及一些扩展. 它使用基于JSR 292的新语言特性,其中包含在JDK 7中引入的 invokedynamic,将JavaScript编译成Java字节码. 与先前的Rhino实现相比,这带来了2到10倍的性能提升. 使用方式 1. 编写Ja

  • 探析浏览器执行JavaScript脚本加载与代码执行顺序

    探析浏览器执行JavaScript脚本加载与代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕①.这一点是没有争议的,并且在所有浏览器中的行为都是一致的,原因也不难理解:浏览器需要一个稳定的DOM结构,而JavaScript可能会修改DOM(改变DOM结构或修改某个

  • 不想让浏览器运行javascript脚本的方法

    不想让浏览器运行javascript脚本的方法

    如果希望自己的浏览器禁止运行网页上的 JavaScript 脚本的话,可以按照下面的方法将自己的浏览器设置一下: [1]:打开 IE 浏览器,然后选择 [工具]--> [Internet 选项]-->[安全]-->[自定义级别]然后在打开的窗体中向下拉滚动条,找到 "脚本" 选项,里面的第一项就是 Java 小程序脚本,选择下面三个选项中的"禁用"就可以了.如下图: [2]:不过要注意,一旦将这一项禁用后,虽然可以提高了系统的安全性,但是网页的一些

  • MongoDB服务端JavaScript脚本使用方法

    常用JavaScript语句 复制代码 代码如下: db.getSiblingDB(<dbname>)   db.getCollectionNames()    db.getCollection(<collname>)    db.printCollectionStats() 在mongo shell运行JavaScript脚本   切换数据库: 复制代码 代码如下: use <dbname> 运行如下脚本: var total = 0; var dbaStatColl

  • 快速掌握WordPress中加载JavaScript脚本的方法

    在 WordPress 中加载脚本(为 CSS 和 JS,下同)文件,大多数人的做法是直接在 header.php 文件中添加 link 标签,或者把 link 标签通过 wp_head 钩子直接添加到 head 标签里,这种做法是不符合官方规范的. 标准的脚本加载方式应该是使用 WordPress 官方提供的函数(后边会说),统一标准有几个好处,首先就是更加安全和利于管理,其次是更加的方便快捷,而且不仅主题能挂载脚本,插件也可以,并且还能管理脚本,并且调整挂载顺序和位置和其它内容. 在哪个钩子

  • JavaScript trim 去除字符串空格的三种方法(附代码详解)

    方法一: 正则替换 推荐个人认为最好的方法.采用的是正则表达式,这是最核心的原理. 下面是代码原文 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- //出处:网上搜集 //For more visit http://www.jb51.net // Trim() , Ltrim() , RTrim() String.prototype.Trim = function() { return this.replace(/(^\s

  • javascript脚本调试方法小结

    1. alert方法 这也是十分原始的方法,但调试起来十分麻烦. 2. debugger方法 首先打开Internet选项--高级,将"禁用脚本调试(Internet Explorer)"的勾去掉 如果想其他浏览器也启用调试,那么可以把"禁用脚本调试(其他)"的勾也去去掉. 然后在你想需要地方进行调试,就加入debugger,如 <script type="text/javascript"> debugger; var s="

随机推荐