首先是怎么使用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();
}
}
}
首先还是新建个项目,然后添加引用:MagicAjax.dll。然后在配置文件Web.config中放入以下配置:
<
httpModules
>
<
add name
=
"
MagicAjax
"
type
=
"
MagicAjax.MagicAjaxModule, MagicAjax
"
/>
</
httpModules
>
<%
@ 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
>
<
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();
}
}
}
本文介绍如何使用MagicAjax.Net实现Ajax功能,并通过一个简单示例展示了如何利用AjaxPanel更新DataGrid内容,无需刷新整个页面。
3935

被折叠的 条评论
为什么被折叠?



