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(’真的确认添加吗’);";
  评论这张  转发至微博  0人  |  分享到：          阅读(44)| 评论(0)| 不可引用 |举报
 
  JS对List泛型集合和DataSet的绑定操作  AJAX异步调用WebService
历史上的今天

相关文章

最近读者

评论
    this.p={  m:2,
              b:2,
              id:'fks_094065082080084075080080081095085080084064093082080067084',
              blogTitle:'magic Ajax使用以及注意事项',
              blogAbstract:'一、概述<BR\> <WBR\> <WBR\> <WBR\> <WBR\>现在Ajax技术正如火如荼的在Internet上发展着。而面对我们之前开发的ASP.NET1.1的Web项目，类似于下拉框等联动也需要啪啪啪的不断刷新，的确影响到了用户的使用体验。如何使用Ajax技术改善这部分的问题呢？是一个值得思考和尝试的工作。<BR\> <WBR\> <WBR\> <WBR\> <WBR\>在完成BMS <WBR\>Phase <WBR\>II过程中，我们采用了一个MagicAjax这一个现成的组件实现了尽量减少对原系统的改动且实现页面无刷新技术尝试和系统改进。<BR\> <WBR\> <WBR\> <WBR\> <WBR\>下面就针对我们在实际项目中使用MagicAjax的基本过程和需要注意的问题作一个简单说明。',
              blogTag:'magicajax,ajax,页面,控件,javascript',
              blogUrl:'blog/static/1653946002010111722933263',
              isPublished:1,
              istop:false,
              type:0,
              modifyTime:0,
              publishTime:1292567373263,
              permalink:'blog/static/1653946002010111722933263',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'福建',
              visitorCity:'泉州',
              isWeekend:true,
              taobaoVersion:6,
              taobaolink:"http://g.163.com/a?CID=4399&Values=3931351846&Redirect=http://ju.atpanel.com/?url=http://www.tmall.com/?ad_id=100040497852881d4a61&am_id=&cm_id=&pm_id=",
              taobaobgimage:"http://blog.163.com/newpage/images/taobaolayerbg5.jpg",
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false
            }
       {list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="通过手机博客访问" class="iblock icn0 icn0-417"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}
       {if !!a}
    <a target="_blank" href="http://blog.163.com/${a.userName}/"><img class="bdwa bdc0 pnt" onerror="location.f60" src="${fn1(a.userName)}"/></a>
    <a target="_blank" class="fc03 m2a" href="http://blog.163.com/${a.userName}/">${fn(a.nickname,8)|escape}</a>
    <div class="intro fc05">${a.selfIntro|escape}{if great260}${suplement}{/if}</div>
     <div class="acts ztag"></div>
    {/if}
   <#--最新日志，群博日志-->     {list a as x}
    {if !!x}
    <li class="thide"><a target="_blank" class="fc03 m2a" href="${furl()}${x.permalink}/?latestBlog">${fn(x.title,26)|escape}</a></li>
    {/if}
    {/list}
   <#--推荐日志-->     <p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname}" onerror="location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/1653946002010111722933263">${y.recommendBlogTitle}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}
   <#--引用记录-->     <span class="pleft fc07">引用记录：</span>
    <ul class="tbac">
    {list d as x}
      <li class="clearfix">
        <span class="pleft iblock">·</span>
        <div class="tbl thide pleft"><span><a target="_blank" class="fc07 m2a" href="${x.referBlogUrl}">${x.referBlogTitle}</a></span></div>
        <div class="tbr pleft"><span><a target="_blank" class="fc07 m2a" href="${x.referHomePage}">${x.referUserName}</a></span></div>
      </li>
    {/list}
    </ul>
   <#--博主推荐-->     {list a as x}
    {if !!x}
    <li class="thide"><a target="_blank" class="fc03 m2a" href="http://blog.163.com/${x.userName}/${x.permalink}/?recommendBlog" title="${x.title|default:""|escape}">${x.title|default:""|escape}</a></li>
    {/if}
    {/list}
   <#--随机阅读-->     {list a as x}
    {if !!x}
    <li class="thide"><a target="_blank" class="fc03 m2a" href="http://blog.163.com/${x.userName}/${x.permalink}/?personalRecomBlog" title="${x.title|default:""|escape}">${x.title|default:""|escape}</a></li>
    {/if}
    {/list}
   <#--首页推荐-->     {list a as x}
    {if !!x}
    <li class="thide"><a target="_blank" class="fc03 m2a" target="_blank" href="${x.blogUrl|default:""|escape}?recommendReader" title="${x.blogTile|default:""|escape}">${x.blogTile|default:""|escape}</a></li>
    {/if}
    {/list}
   <#--相关文章-->     <ul>
      {list a as x}
      {if x_index>9}{break}{/if}
      {if !!x}
        <li class="thide fc03">
          <a class="m2a" target="_blank" target="_blank"  href="${x.url|default:""}?fromdm&fromSearch&isFromSearchEngine=${isFromSearchEngine|default:"no"}"  title="${x.title|default:""|escape}">${x.title|default:""|escape}</a><span class="fc07">${fn2(parseInt(x.date),'yyyy-MM-dd HH:mm:ss')}</span>
        </li>
      {/if}
      {/list}
    </ul>
   <#--历史上的今天-->     <ul>
      {list a as x}
      {if x_index>4}{break}{/if}
      {if !!x}
        <li class="thide fc03">
          <a class="m2a" target="_blank"  href="http://blog.163.com/${x.userName}/${x.permalink|default:""}"  title="${x.title|default:""|escape}">${fn1(x.title,60)|escape}</a><span class="fc07">${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}</span>
        </li>
      {/if}
      {/list}
    </ul>
   <#--右边模块结构-->     <div class="uinfo ztag"></div>
    <h4 class="fc07 fs0 ltt">最新日志</h4>
    <ul class="ztag blst"></ul>
    <h4 class="fc07 fs0 ltt phide ztag">该作者的其他文章</h4>
    <ul class="ztag blst"></ul>
    <h4 class="fc07 fs0 ltt phide ztag">博主推荐</h4>
    <ul class="ztag blst"></ul>
    <h4 class="fc07 fs0 ltt phide ztag">相关日志</h4>
    <ul class="ztag blst"></ul>
    <h4 class="fc07 fs0 ltt phide ztag">随机阅读</h4>
    <ul class="ztag blst"></ul>
    <h4 class="fc07 fs0 ltt phide ztag">首页推荐</h4>
    <ul class="ztag blst"></ul>
    <div class="more"><a target="_blank" class="fc03 m2a" href="http://blog.163.com">更多>></a></div>
    <br/><a id="yodaoad_suggest" target="_blank" href="http://fankui.163.com/ft/comment.fb?pid=12004&fid=16023" class="fc05 m2a phide">对“推广广告”提建议</a>
    <br/><br/>
    <div id="yodaoad_r" style="display:none;_zoom:1;"></div>
   <#--评论模块结构-->     <div class="publish ztag"></div>
    <div class="bdwt bds2 bdc0 phide" id="yodaoad_2" style="_zoom:1;"></div>
    <div class="ztag bdwt bds2 bdc0">
      <div class="case"></div>
      <div class="clearfix"></div>
    </div>
   <#--引用模块结构-->      <div class="close">
       <span class="ztag iblock icn0 icn0-57"> </span>
     </div>
  <div class="ztag phide"></div>
   <#--博主发起的投票-->     {list a as x}
    {if !!x}
      <li>
      <a href="http://blog.163.com/${x.userName}/" target="_blank" class="m2a fc03">${x.nickName|escape}</a>  投票给
        {var first_option = true;}
        {list x.voteDetailList as voteToOption}
            {if voteToOption==1}
              {if first_option==false},{/if}  “${b[voteToOption_index]}” 
            {/if}
        {/list}
        {if (x.role!="-1") },“我是${c[x.role]}”  {/if}
            <span class="fc07">    ${fn1(x.voteTime)}</span>
        {if x.userName==''}{/if}
    {/if}
    {/list}