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

【 tulaoshi.com - Web开发 】

(一) . 简要

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

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

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）

(二). 运行示例图

(三). 配置

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

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）

  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