Hopes

Start Here..

 

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

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

2007-10-4 22:27:00查看学习心得

(一) . 简要

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

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

(二). 运行示例图


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

     

    (三). 配置

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

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

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

    (五). 示例代码下载

          http://www.cnblogs.com/Files/ChengKing/MagicajaxExample.rar

    本文作者:

    posted on 2012-05-20 11:49 ** 阅读(157) 评论(0)  编辑  收藏


    只有注册用户登录后才能发表评论。


    网站导航:
     

    导航

    统计

    公告

    你好!

    常用链接

    留言簿(2)

    随笔档案

    文章分类

    文章档案

    新闻档案

    相册

    收藏夹

    C#学习

    友情链接

    搜索

    最新评论

    阅读排行榜

    评论排行榜