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

- 中国WEB开发者网络 (http://www.webasp.net)
-- 技术教程 (http://www.webasp.net/article/)
--- AjaxPanel自定义控件实现无刷新页面数据交互 (http://www.webasp.net/article/28/27731.htm)
-- 作者：ChengKing
-- 发布日期： 2006-09-04

(一) . 简要

          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  <configSections>
1 <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="26px" OnClick="Button1_Click"
 9                 Text="CreateData" Width="85px" />
10             &nbsp;
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     }
 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;
49      dt.Rows.Add(drNew);
50 
51      drNew = dt.NewRow();
52      drNew["CategoryID"] = 6;
53      drNew["CategoryName"] = "Pencil";
54      drNew["Price"] = 7;
55      dt.Rows.Add(drNew);
56 
57      drNew = dt.NewRow();
58      drNew["CategoryID"] = 7;
59      drNew["CategoryName"] = "Ruler";
60      drNew["Price"] = 3;
61      dt.Rows.Add(drNew);
62 
63      drNew = dt.NewRow();
64      drNew["CategoryID"] = 8;
65      drNew["CategoryName"] = "Eraser";
66      drNew["Price"] = 5;
67      dt.Rows.Add(drNew);
68 
69      ds.Tables.Add( dt );
70      return ds;
71    }
72    protected void Button1_Click(object sender, EventArgs e)
73    {
74       this.GridView1.DataSource = this.CreateData();
75       this.DataBind();
76    }
77 }
webasp.net