MagicAjax

 

一、概述
    现在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了。

 

0001：
    MagicAjax官方主页：www.magicajax.net
----------------------------------------------------------------------------------------------------
0002：
    MagicAjax的局限性：
    ●在AjaxPanel的AjaxCall过程中，如果有样式变化，客户端浏览器将不会刷新（除非使用MagicAjax的类库处
理）。
    ●FileUpload空间在AjaxPanel中无法使用。
----------------------------------------------------------------------------------------------------
0003：
    如何去掉MagicAjax中的Loading：
    ●获取MagicAjax的源代码（如果升级到.NET 2.0，则要使用新生成的这个项目文件打开编译）。
    ●打开MagicAjax源代码中的AjaxCallObject.js文件，找到CreateWaitElement函数（代码最后的一个函数）。
    ●可以修改为如下代码：（去掉了Loading）
    function CreateWaitElement() {
        var elem = document.getElementById('__AjaxCall_Wait');
        if (!elem) {
            elem = document.createElement("div");
            elem.id = '__AjaxCall_Wait';
            elem.style.visibility = 'hidden';
            document.body.insertBefore(elem, document.body.lastChild);
        }
        waitElement = elem;
    }
    ●重新编译项目即可。
----------------------------------------------------------------------------------------------------
0004：
    MagicAjax的使用：
    ●添加MagicAjax.dll的引用。
    ●在工具箱中也添加MagicAjax.dll（这样就可以直接拖拽控件到页面上）。
    ●配置web.config：
    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
      <configSections>
        <!--【1】为MagicAjax添加的配置-->
        <section name="magicAjax" type="MagicAjax.Configuration.MagicAjaxSectionHandler, MagicAjax"/>
      </configSections>
      <!--【2】为MagicAjax添加的配置-->
      <magicAjax tracing="false">
        <pageStore/>
      </magicAjax>
      <appSettings/>
      <connectionStrings/>
      <system.web>
        <pages>
          <controls>
            <!--【3】为MagicAjax添加的配置-->
            <add namespace="MagicAjax.UI.Controls" assembly="MagicAjax" tagPrefix="ajax"/>
          </controls>
        </pages>
        <httpModules>
          <!--【4】为MagicAjax添加的配置-->
          <add name="MagicAjaxModule" type="MagicAjax.MagicAjaxModule, MagicAjax"/>
        </httpModules>
        <compilation debug="true">
          <assemblies>
            <add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
          </assemblies>
        </compilation>
        <authentication mode="Windows"/>
      </system.web>
    </configuration>
----------------------------------------------------------------------------------------------------
0005：
    MagicAjax很好的解决了脚本跨域问题，如果Ajax是在一个嵌入在Iframe的页面中实现的，那么微软的Atlas是
无法解决跨域问题（微软官方已经说明）。那么这种情况的Ajax实现可以使用MagicAjax和AjaxPro的实现。
----------------------------------------------------------------------------------------------------
0006：
    CallTimer的使用：
    HTML部分：
    <ajax:AjaxPanel ID="AjaxPanel1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField HeaderText="进程名称" DataField="ProcName" />
                <asp:BoundField HeaderText="内存占用率" DataField="ProcMemory" />
            </Columns>
        </asp:GridView>
    </ajax:AjaxPanel>

    源代码部分：
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            MagicAjax.AjaxCallHelper.SetAjaxCallTimerInterval(500);
        }
        ShowProcesses();
    }

    private void ShowProcesses()
    {
        System.Diagnostics.Process[] processes = System.Diagnostics.Process.GetProcesses();

        System.Data.DataTable dt = new System.Data.DataTable("Processes");
        dt.Columns.Add("ProcName");
        dt.Columns.Add("ProcMemory", typeof(Int64));

        foreach (System.Diagnostics.Process process in processes)
        {
            dt.Rows.Add(new object[] { process.ProcessName, process.WorkingSet64 / 1000 });
        }

        System.Data.DataView dv = dt.DefaultView;
        dv.Sort = "ProcMemory DESC";

        this.GridView1.DataSource = dv;
        this.GridView1.DataBind();
    }
----------------------------------------------------------------------------------------------------
0007：
    在AjaxPanel中使用消息提示框：MagicAjax.AjaxCallHelper.WriteAlert("你好");