【图】AjaxPanel自定义控件实现页面无刷新数据交互

(一) . 简要

AjaxPanel, 一个自定义控件, 只要在页面中将AjaxPanel作为父控件, 则它内部的控件在运行时无刷新.

做了个程序试了一下果然比较Cool ! 下面介绍一下具体配置, 配置也比较简单.

(二). 运行示例图

(三). 配置

1. 把 AjaxPanel 添加到工具箱中. 步骤如下:

2. 在Web.Config文件的: configuration 节,添加如下配置:

1 configSections
2      section name="magicAjax" type="MagicAjax.Configuration.MagicAjaxSectionHandler, MagicAjax"/
3      /configSections
4      magicAjax outputCompareMode="HashCode" tracing="false"
5         pageStore mode="NoStore" unloadStoredPage="false" cacheTimeout="5" maxConcurrentPages="5" maxPagesLimitAlert="false"/
6     /magicAjax
7 configSections1 system.web
2         httpModules
3             add name="MagicAjax" type="MagicAjax.MagicAjaxModule, MagicAjax"/
4         /httpModules
5 system.web

(四). 做了上面几步配置后, 下面就可以使用了, 示例代码也非常简单, 具体如下:

1.前台页面文件 Magicajax.aspx 代码如下:

1 body
2     form id="form1" runat="server"
3     div
4         ajax:AjaxPanel ID="AjaxPanel1" runat="server" Font-Bold="True"
5             asp:Panel ID="Panel1" runat="server" Font-Size="XX-Large" Height="45px" Width="273px"
6                 AjaxPanel example/asp:Panel
7             br /
8             asp:Button ID="Button1" runat="server" BackColor="#FFC080" Height="26p

;   }
7    private DataTable CreateStructure()
8    {
9         DataTable dt = new DataTable();
10         dt.Columns.Add(new DataColumn("CategoryID", typeof(int)));
11         dt.Columns.Add(new DataColumn("CategoryName", typeof(string)));
12         dt.Columns.Add(new DataColumn("Price", typeof(int)));
13         return dt;
14    }
15    public DataSet CreateData()
16    {
17      DataSet ds = new DataSet();
18      DataTable dt = this.CreateStructure();
19
20      DataRow drNew = dt.NewRow();
21      drNew = dt.NewRow();
22      drNew["CategoryID"] = 1;
23      drNew["CategoryName"] = "Apple";
24      drNew["Price"] = 2;
25      dt.Rows.Add(drNew);
26
27      drNew = dt.NewRow();
28      drNew["CategoryID"] = 2;
29      drNew["CategoryName"] = "Banana";
30      drNew["Price"] = 3;
31      dt.Rows.Add(drNew);
32
33      drNew = dt.NewRow();
34      drNew["CategoryID"] = 3;
35      drNew["CategoryName"] = "Orange";
36      drNew["Price"] = 1;
37      dt.Rows.Add(drNew);
38
39      drNew = dt.NewRow();
40      drNew["CategoryID"] = 4;
41      drNew["CategoryName"] = "Radish";
42      drNew["Price"] = 2;
43      dt.Rows.Add(drNew);
44
45      drNew = dt.NewRow();
46      drNew["CategoryID"] = 5;
47      drNew["CategoryName"] = "Pen";
48      drNew["Price"] = 3

x" OnClick="Button1_Click"
9                 Text="CreateData" Width="85px" /
10
11             asp:Button ID="Button2" runat="server" BackColor="#FFC080" Height="26px" Text="ClearData"
12                 Width="73px" /br /
13             br /
14             asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#E7E7FF"
15                 BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Horizontal"
16                 FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" /
17                 RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" /
18                 SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" /
19                 PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" /
20                 HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" /
21                 AlternatingRowStyle BackColor="#F7F7F7" /
22             /asp:GridView
23         /ajax:AjaxPanel
24
25     /div
26     /form
27 /body

2.后台页面文件 Magicajax.aspx.cs 代码如下:

1 public partial class _Default : System.Web.UI.Page
2 {
3     protected void Page_Load(object sender, EventArgs e)
4     {
5
6