使用MagicAjax的方法

最新推荐文章于 2025-09-09 13:30:42 发布

ckalsky

最新推荐文章于 2025-09-09 13:30:42 发布

阅读量800

点赞数

文章标签： datagrid button asp webform server ajax

本文介绍如何使用MagicAjax实现ASP.NET Web应用程序中的Ajax功能。通过具体示例展示了如何设置项目引用、配置Web.config文件，并将控件置于AjaxPanel内以实现局部刷新。此外，还提供了后台代码示例以展示数据绑定。

首先新建个项目，然后添加引用：MagicAjax.dll。然后在配置文件Web.config中放入以下配置：

</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>

</HEAD>

<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 窗体设计器生成的代码Web 窗体设计器生成的代码