MagicAjax.Net的使用要点和简单例子

首先是怎么使用MagicAjax.Net。这个其实很多人多讲过了，我这里重复一下。
        首先还是新建个项目，然后添加引用：MagicAjax.dll。然后在配置文件Web.config中放入以下配置：

< httpModules >
     < add name = " MagicAjax "  type = " MagicAjax.MagicAjaxModule, MagicAjax "   />  
</ httpModules >

这样我们就能在我们的程序中使用Ajax了。哦，对了，忘了要用ajax技术的.aspx文件中还要加上这句话：

<% @ Register TagPrefix = " ajax "  Namespace = " MagicAjax.UI.Controls "  
Assembly = " MagicAjax "   %>

现在就没有问题拉^_^
        接着是一个简单的应用。研究一些新技术我总喜欢用一些非常简单的例子，毕竟重点是弄清楚这个技术的用法，所以例子不是很复杂。
        首先是.aspx文件的代码：

<% @ Page language = " c# "  Codebehind = " WebForm1.aspx.cs "  AutoEventWireup = " false "  Inherits = " example.WebForm1 "   %>
<% @ Register TagPrefix = " ajax "  Namespace = " MagicAjax.UI.Controls "  
Assembly = " MagicAjax "   %>
<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN "   >
< HTML >
     < HEAD >
         < title > WebForm1 </ title >
         < meta name = " GENERATOR "  Content = " Microsoft Visual Studio .NET 7.1 " >
         < meta name = " CODE_LANGUAGE "  Content = " C# " >
         < meta name = " vs_defaultClientScript "  content = " JavaScript " >
         < meta name = " vs_targetSchema "  content = " http://schemas.microsoft.com/intellisense/ie5 " >
     </ HEAD >
     < body MS_POSITIONING = " GridLayout " >
         < form id = " Form1 "  method = " post "  runat = " server " >
             < ajax:AjaxPanel id = " AjaxPanel1 "  runat = " server " >
                 < asp:DataGrid id = " mygrid "  Runat = " server " ></ asp:DataGrid >
                 < asp:Button id = " Button1 "  style = " Z-INDEX: 101; LEFT: 48px; POSITION: absolute; TOP: 192px "  runat = " server "
                Text = " 确定 "  Width = " 96px "  BackColor = " Transparent " ></ asp:Button >
                 < asp:Button id = " Button2 "  style = " Z-INDEX: 102; LEFT: 208px; POSITION: absolute; TOP: 192px "  runat = " server "
                Text = " 确定2 "  Width = " 104px "  BackColor = " Transparent " ></ asp:Button >
             </ ajax:AjaxPanel >
            
            
             < asp:DataGrid id = " DataGrid1 "  style = " Z-INDEX: 103; LEFT: 368px; POSITION: absolute; TOP: 264px "
                runat = " server "  Width = " 240px "  Height = " 248px " ></ asp:DataGrid >
             < asp:Button id = " Button3 "  style = " Z-INDEX: 104; LEFT: 440px; POSITION: absolute; TOP: 576px "  runat = " server "
                Text = " Button "  Width = " 104px "  Height = " 32px " ></ asp:Button >
         </ form >
     </ body >
</ HTML >

        MagicAjax把要实现无刷的控件放在一个AjaxPanel中。在这里，我要用按钮控制DataGrid控件的显示内容，所以我把DataGrid控件和两个Button控件放在AjaxPanel中。

< ajax:AjaxPanel id = " AjaxPanel1 "  runat = " server " >
                 < asp:DataGrid id = " mygrid "  Runat = " server " ></ asp:DataGrid >
                 < asp:Button id = " Button1 "  style = " Z-INDEX: 101; LEFT: 48px; POSITION: absolute; TOP: 192px "  runat = " server "
                Text = " 确定 "  Width = " 96px "  BackColor = " Transparent " ></ asp:Button >
                 < asp:Button id = " Button2 "  style = " Z-INDEX: 102; LEFT: 208px; POSITION: absolute; TOP: 192px "  runat = " server "
                Text = " 确定2 "  Width = " 104px "  BackColor = " Transparent " ></ asp:Button >
             </ ajax:AjaxPanel >

        接下来是后台代码：

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;

namespace  example
{
    /**//// <summary>
    /// WebForm1 的摘要说明。
    /// </summary>
    public class WebForm1 : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.DataGrid mygrid;
        protected System.Web.UI.WebControls.Button Button1;
        protected System.Web.UI.WebControls.Button Button2;
        protected System.Web.UI.WebControls.DataGrid DataGrid1;
        protected System.Web.UI.WebControls.Button Button3;
        protected MagicAjax.UI.Controls.AjaxPanel AjaxPanel1;
    
        private void Page_Load(object sender, System.EventArgs e)
        {
            // 在此处放置用户代码以初始化页面
            ArrayList a = new ArrayList();
            a.Add("a");
            a.Add("b");
            a.Add("c");

            mygrid.DataSource = a;
            mygrid.DataBind();
        }

        Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
            //
            InitializeComponent();
            base.OnInit(e);
        }
        
        /**//// <summary>
        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
        /// 此方法的内容。
        /// </summary>
        private void InitializeComponent()
        {    
            this.Button1.Click += new System.EventHandler(this.Button1_Click);
            this.Button2.Click += new System.EventHandler(this.Button2_Click);
            this.Button3.Click += new System.EventHandler(this.Button3_Click);
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion

        private void Button1_Click(object sender, System.EventArgs e)
        {
            ArrayList a = new ArrayList();
            a.Add("aa");
            a.Add("bb");
            a.Add("cc");

            mygrid.DataSource = a;
            mygrid.DataBind();
        }

        private void Button2_Click(object sender, System.EventArgs e)
        {
            ArrayList a = new ArrayList();
            a.Add("aaa");
            a.Add("bbb");
            a.Add("ccc");

            mygrid.DataSource = a;
            mygrid.DataBind();
        }

        private void Button3_Click(object sender, System.EventArgs e)
        {
            ArrayList a = new ArrayList();
            a.Add("e");
            a.Add("f");
            a.Add("g");

            DataGrid1.DataSource = a;
            DataGrid1.DataBind();
        }
    }
}

        其实这个程序很简单，就是无刷新更新DataGrid控件的显示内容。为了清楚的比较刷新和无刷新的效果，我还加了个需要刷新的DataGrid控件。虽然这个刷新的速度比较快，看起来不是很明显，但你注意看的话还是发现它是刷新了的。