magic Ajax使用以及注意事项
以下是引用片段:
一、概述
现在Ajax技术正如火如荼的在Internet上发展着。而面对我们之前开发的ASP.NET1.1的Web项目,类似于下拉框等联动也需要啪啪啪的不断刷新,的确影响到了用户的使用体验。如何使用Ajax技术改善这部分的问题呢?是一个值得思考和尝试的工作。
在完成BMS Phase II过程中,我们采用了一个MagicAjax这一个现成的组件实现了尽量减少对原系统的改动且实现页面无刷新技术尝试和系统改进。
下面就针对我们在实际项目中使用MagicAjax的基本过程和需要注意的问题作一个简单说明。
二、开发和部署系统准备
1. Microsoft Visual Studio .NET 2003.
2. Microsoft .NET Framework 1.1
3. Microsoft .NET Framework 1.1 HotFix(KB886903) (一定要装,不然会因为viewstate不全而造成一些奇怪的问题)
三、MagicAjax使用准备
1. 首先当然是去http://sourceforge.net/projects/magicajax下载MagicAjax的Dll了,我使用的0.3.0.0的版本。
2. 将该dll加入到webForm所在项目的引用中。
3. 在Web.Config文件中<configuration>节点下添加如下子节点:
<configSections>
<section name="magicAjax" type="MagicAjax.Configuration.MagicAjaxSectionHandler, MagicAjax" />
</configSections>
4. 在Web.Config文件中< system.web>节点下添加如下子节点:
<httpModules>
<add name="MagicAjaxModule" type="MagicAjax.MagicAjaxModule, MagicAjax" />
</httpModules>
5. 在希望采用Ajax的webForm页面HTML开头引入Ajax的注册语句:
<%@ Register TagPrefix="ajax" Namespace="MagicAjax.UI.Controls" Assembly="MagicAjax" %>
这样,我们就可以在该页使用MagicAjax了。
四、MagicAjax使用
在BMS 项目中,我只用到了一个MagicAjax组件,那就是Ajax Panel.用法也是很简单:
1. 将你需要采用无刷新操作的控件包在MagicAjax的标签中,类似如下代码:
<ajax:AjaxPanel ID="AjaxPanel1" runat="Server">
<asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList>
<asp:DropDownList id="DropDownList2" runat="server"></asp:DropDownList>
<asp:DropDownList id="DropDownList3" runat="server"></asp:DropDownList>
</ajax:AjaxPanel>
(以上代码假设DropDownList1,DropDownList2,DropDownList3存在联动关系,控件设为AutoPostBack,并且联动方法已经在后台写好了。)
2. 再到页面上去点击DropDownList1,以前需要刷新的操作现在是不是不需要了?(左上角是不是有个loading一闪而过?这个文字和样式都可以换的哦)。
3. 至此,MagicAjax的运用已经基本完成,是不是太简单一点了。事实上,就这么简单。
五、MagicAjax使用中遇到的问题及解决办法
在使用MagicAjax的过程中,基本上不需要改动原来的source即可达到运用Ajax技术的效果,MagicAjax的实现机理网上有很多介绍,这里不累述,有两个关键词:doPostBack,和viewState。Magicajax就是将要做的操作送回后台,处理后将需要的信息截取出来。这个过程中doPostBack就是送回后台的操作,ViewState用于保存控件的状态,这样在自己写xmlHttp实现Ajax中出现的控件状态没有办法在后台获取(尤其是dropDownList的option的变化)的问题就迎刃而解了。
而在这个过程中也会因为这些因素,出现些问题。这里列出我遇到的部分以及解决方案。
1. 加入MagicAjax后页面布局出现混乱。
BMS项目中页面布局采用的是Table的布局方式,设定了每个TD的相对宽度。可是在加入AjaxPanel标签后页面布局出现混乱。
Solution: 经过排查,发现是当包含一句类似如下的语句时出现问题:
<span id="spFailcode"><%=strFailCode%></span>
改动也很容易,将这样的将该span改为runnt=server然后在后台赋值就好了。
2. 通过javascript调按钮的click做页面回传无效。
在原系统中可能存在类似如下的客户端脚本
var objQuery = document.getElementByIdx("btnQuery");
if(objQuery!=null)
{
objQuery.click();
}
通过触发button的click事件将页面回传到服务器端。可是在包上AjaxPanel后,以上的javascript没有效果了。
Solution:想来是因为magicAjax采用doPostBack回传。所以将Javascript改为:__doPostBack(btnQuery,’’);就搞定了。
3. 调用__doPostBack引起脚本错误。
在执行第二点改写JavaScript时出现了这个问题,错误类型为缺少对象。严格说来这个不是因为magicAjax的应用所造成的。
Solution:在PageLoad中加入GetPostBackEventReference(XXXX);其中XXXX可以为任何一个服务器按钮等等,如果页面中有设定AutoPostBack的控件,那么这个问题是不存在的。
4.在服务器端注册的脚本无效:
以前我们在后代代码汇会写类似如下代码:
StringBuilder sbMsg=new StringBuilder ();
sbMsg.Append (“<script language=javascript>”);
sbMsg.Append (“SetFocus(”” + Server.HtmlEncode(sid) + “”);”);
sbMsg.Append (“</script>”);
Page.RegisterStartupScript (“setfocus”,sbMsg.ToString ());
现在这这种注册脚本的方式(包括:RegisterStartupScript和RegisterClientScriptBlock)在通过MagicAjax触发的调用中都失去作用。
Solution:首先在该页面引入命名空间:using MagicAjax;
区分是正常调用Function还是MagicAjax引起调用Function,对于由MagicAjax引起调用的Function,注册脚本改为类似如下代码:
MagicAjax.AjaxCallHelper.Write("alert(’" + messageContent + "’);");
(将< script >Tag去除,然后直接将内容通过MagicAjax.AjaxCallHelper.Write完成脚本写入)
5.出现一些某名奇妙的错误
这部分错误包括:触发事件处理函数异常,viewState丢失,等等。
Solution:一般来说先检查环境中是否有安装Microsoft .NET Framework 1.1 HotFix(KB886903)补丁。安装后问题解决。
六、 结语
以上就是在BMS项目中使用MagicAjax的一个过程和遇到部分问题的解决办法。总体而言,采用MagicAjax可以快速实现asp.net1.1的MagicAjax应用,是一个为现有系统提供Ajax解决方案的好办法。并个人推断由于MagicAjax的特性(doPostBack,ViewState)所决定采用MagicAjax比不采用MagicAjax在效率上不会有本质的提高。主要的改善点还是在用户的操作感官上的。
另外,在该项目中应用MagicAjax操作的控件较少,可能会有一些控件在使用中会有一些其它特点,本文没有涉及到。
在项目过程中关于MagicAjax部分得到了Internet的大力帮助,谢谢那些显示器另外一边的人。
最后就是大家如果在使用MagicAjax中有什么心得,可以一起交换,共同进步:)
谢谢。
另外,在MagicAjax使用过程中又陆续有一些问题,比较严重的有以下两个:
1. 文本框中如果含有双引号的字符,在通过magicAjax环回一次后,符号被转义。
2. 在ie6的环境中,如果使用了MagicAjax页面出现横向滚动条,会无限延伸。
这两部分的问题。我都已经修正了,不过要改动MagicAjax的Source。
唉,MagicAjax为什么还不更新版本哇。
例子:
1、打开vs 添加 MagicAjax.dll,就会有AjaxPanel 控件,就往上拖东西吧。
2、打开web.config 添加:
<configSections>
<section name="magicAjax" type="MagicAjax.Configuration.MagicAjaxSectionHandler, MagicAjax"/>
</configSections>
<system.web>
...
<httpModules>
<add name="MagicAjaxModule" type="MagicAjax.MagicAjaxModule, MagicAjax"/>
</httpModules>
...
</system.web>
3、例子:
page_load:
if (!Page.IsPostBack)
{
MagicAjax.AjaxCallHelper.SetAjaxCallTimerInterval(1000);
}
FillDataView();
//FillDataView();
public void FillDataView()
{
string sql = "select * from mms_type";
DataTable db = SQLControl.GetDataTable(sql);
GridView1.DataSource = db;
GridView1.DataBind();
}
1、直接弹出一个Alert窗体的办法:using MagicAjax;MagicAjax.AjaxCallHelper.Write("alert(’" + "小测试!" + "’);"); 2、弹出一个确认框的办法:(可以直接用在MagicAjax中的呀!) this.Button2.Attributes["onclick"]="javascript:return confirm(’真的确认添加吗’);";
magic Ajax使用以及注意事项的更多相关文章
- JQuery Ajax使用及注意事项
定义和用法 ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 X ...
- SpringMVC处理ajax请求的注意事项
.首先要知道ajax请求的核心是JavaScrip对象和XmlHttpRequest,而浏览器请求的核心是浏览器 ajax请求 浏览器请求 场景一:使用ajax获取session中的user 从上图可 ...
- asp.net MVC 强类型视图表单Ajax提交的注意事项
xmfdsh这几天遇到这么一个问题,在MVC中通过model模型生成的强类型视图的表单,在提交后的回调函数并没有发挥作用.如下图: 如上图,无论是通过Ajax.BeginForm或者Html.Begi ...
- 使用$.ajax时的注意事项
做PHP难免接触js,我也是这样,使用ajax的时候,我比较习惯使用$.ajax({}),这种方式,因为通用性较强.有时候会较少使用js,隔一段时间后再使用,有些细节内容容易模糊不清,这一次,我又忘记 ...
- springMVC中ajax的运用于注意事项
ajax的运用: 注意事项: dataType:"json"在ajax中可写可不写(ajax能够自动识别返回值类型),写了更加规范,可以在ajax识别错误返回值类型的时候,指定返回 ...
- ajax post提交的方式
ajax的post注意事项 注意post请求的Content-Type为application/x-www-form-urlencoded,参数是在请求体中,即上面请求中的Form Data(后台通过 ...
- jquery ajax jsonp跨域调用实例代码
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...
- Echarts 3.19 制作常用的图形 非静态
最近阿里内部使用的 图表也向外开放了 而百度就好像更有良心一点,Echarts 早就开放了 . 自己学Echarts的时候走了很多的弯路,毕竟谁让自己菜呢,多撞几次南墙才晓得疼 才知道学习方法,新手上 ...
- PHP验证码的制作教程
自己过去自学了PHP绘画验证码的教程,现在就把这一部分笔记跟大家分享,希望可以帮到大家. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百度云 ...
随机推荐
- EF中的约定
优先级:Fluent API >数据注释>约定 CodeFirst约定 主键约定 如果类的属性名为"ID"(不区分大小写)或类名的后面跟有"ID", ...
- FpSpread添加表头(列名)标注
for (int j = 0; j < fp.ActiveSheetView.ColumnCount; j++) { fp.ActiveSheetView.ColumnHeader.Cells[ ...
- C#操作Flash动画
对于在C#开发的过程中没有接触过Flash相关开发的人员来说,没有系统的资料进行学习,那么这篇文档针对于初学者来说是很好的学习DEMO. 本文章中的DEMO实现了C#的COM控件库中本来就带有对fla ...
- hdu 2191多重背包
悼念512汶川大地震遇难同胞——珍惜现在,感恩生活 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Jav ...
- hdu 1262寻找素数对
Problem Description 哥德巴赫猜想大家都知道一点吧.我们现在不是想证明这个结论,而是想在程序语言内部能够表示的数集中,任意取出一个偶数,来寻找两个素数,使得其和等于该偶数. 做好了这 ...
- C#界面设计疑问
1.就是想做一个类似下面界面的窗体,上面一排按键,点击一个下面对应改变一次界面的内容,这是如何实现的呢 ...是不是通过,比如这里有四个按键,然后使用4个大小相同的面板,每个面板内容不同.按一个按键, ...
- windbg vmware win7联机调试环境搭建
接下来设置虚拟机启动模式,可以直接设置现在的虚拟机启动项为debug模式 或者直接新建一个启动项目 bcdedit /dbgsettings {serial [baudrate:value][debu ...
- 慕课linux学习笔记(七)常用命令(4)
帮助命令 Man命令 Man的级别 命令帮助 可被内核调用的函数帮助 函数和函数库帮助 特殊文件帮助 /dev 配置文件帮助 游戏的帮助 其他杂项的帮助 管理员可用命令帮助 内核相关文件的帮助 -f ...
- 新花生壳+tomcat(内网映射,无需设置路由器)建站攻略
说明: 1.适用于内网用户(局域网,校园网,或者公司网等无法更改路由器映射的情况) 2.一共花了8块钱…………心疼.不过如果大家有钱的话,8块钱,少吃一顿麻辣烫就好了~总之,这个适用于测试网站,小访问 ...
- React java.lang.UnsatisfiedLinkError: dlopen failed: "/data/data/com.edaixi.activity/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit
E/AndroidRuntime: FATAL EXCEPTION: main Process: com.edaixi.activity, PID: 3659 at java.lang.Runtime ...